如何将逗号分隔的文本字段转换为单独的行

Question

我正在创建车辆列表网站，并且我有车辆选项字段，其中包含大量用逗号分隔的文本。这是代码

<div class="dvs-options">

Driver Airbag,Anti-Lock Brakes,Passenger Airbag,Alarm,Side AirbagCD Player,AM/FM Radio,AM/FM Stereo,DVD,CD Changer,Aftermarket Speaker,Hard Disc,Satellite RadioPower Windows,Rear Window Defroster,Tinted Glass,Rear Window WiperPower Door Locks,Alloy Wheels,Power Mirrors,Sunroof,Third Row Seats,Power Slide DoorNo Accident history,Maintenance Records Available,One Owner,New Tires,Non-Smoker,Fully Loaded,Performance Tires,Turbo,Upgraded Sound System,Custom Wheels,Repainted CarLeather Seats,Power Seats,Child Seat,Bucket Seat

</div>

我想逐行输出此文本字段的显示内容，如：

Driver Airbag

Anti-Lock Brakes

Passenger Airbag

如何使用 CSS 或 javascript 实现这一点？

Answer 1

您可以简单地将&nbsp;.textContent与 JavaScript 一起使用来获取最新text信息，一旦您拥有了所有需要使用 split() 函数的数据.split(',')，就可以逐行从逗号中获取文本。除了在使用 split 函数之前，我们还可以使用它trim()来删除多余的空格。,Split将生成每一行的数组。您可以使用forEach()遍历它以生成列表项。在您的forEach循环中，您将生成一个列表&nbsp;ul&nbsp;li并将数据返回到您的原始 div&nbsp;.dvs-options&nbsp;innerHTML并通过querySelector方法选择元素运行下面的片段。//Get the current datalet getText = document.querySelector('.dvs-options').textContent.trim().split(',')//Store data as listlet str = '<ul>'//Use foreach to get all the textgetText.forEach(function(data) {&nbsp; str += '<li>' + data + '</li>';});str += '</ul>';//Replace the innerHTMLdocument.querySelector(".dvs-options").innerHTML = str;<div class="dvs-options">&nbsp; Driver Airbag,Anti-Lock Brakes,Passenger Airbag,Alarm,Side AirbagCD Player,AM/FM Radio,AM/FM Stereo,DVD,CD Changer,Aftermarket Speaker,Hard Disc,Satellite RadioPower Windows,Rear Window Defroster,Tinted Glass,Rear Window WiperPower Door Locks,Alloy Wheels,Power&nbsp; Mirrors,Sunroof,Third Row Seats,Power Slide DoorNo Accident history,Maintenance Records Available,One Owner,New Tires,Non-Smoker,Fully Loaded,Performance Tires,Turbo,Upgraded Sound System,Custom Wheels,Repainted CarLeather Seats,Power Seats,Child Seat,Bucket&nbsp; Seat</div>

Answer 2

好吧，如果您的客户通过 API 提供数据，那将会更加容易和实用，但由于您需要的只是一个解决方案，所以试试这个。let data = document.getElementsByClassName("dvs-options")[0].innerText;&nbsp;data = data.split(",");这将在 JS 对象中为每个车辆提供选项。您可以使用循环遍历每个并将其列出。编辑const element = document.getElementsByClassName("dvs-options")[0];let data = element.innerText;data = data.split(",").join("\r\n");element.innerText = data;这是完整的代码。它从 div 中检索所有内容并按顺序放回同一个 div。

Answer 3

您无法仅通过 CSS 实现此目的 - CSS 不允许您基于逗号换行，只能在空格处换行。为了将 CSV 转换为多行，我建议使用带有 Regex 的简单 JavaScript 以获得更好的性能，例如：var csv = document.getElementsByClassName("dvs-options")[0].innerHTML;const regex = /\,/gm;const subst = `</p><p>`;const result = csv.replace(regex, subst);document.getElementsByClassName("dvs-options")[0].innerHTML = '<p>'+result+'</p>';

Answer 4

无需创建列表，只需更改white-space行为并在修剪\n当前textContent.//REM: Replace "," with Linebreaks "\n"document.querySelectorAll('.dvs-options').forEach(function(item){&nbsp; item.textContent = item.textContent.trim().split(',').join('\n')}).dvs-options{&nbsp; white-space: pre}<div class="dvs-options">Driver Airbag,Anti-Lock Brakes,Passenger Airbag,Alarm,Side AirbagCD Player,AM/FM Radio,AM/FM Stereo,DVD,CD Changer,Aftermarket Speaker,Hard Disc,Satellite RadioPower Windows,Rear Window Defroster,Tinted Glass,Rear Window WiperPower Door Locks,Alloy Wheels,Power Mirrors,Sunroof,Third Row Seats,Power Slide DoorNo Accident history,Maintenance Records Available,One Owner,New Tires,Non-Smoker,Fully Loaded,Performance Tires,Turbo,Upgraded Sound System,Custom Wheels,Repainted CarLeather Seats,Power Seats,Child Seat,Bucket Seat</div>