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

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 AirbagAnti-Lock BrakesPassenger Airbag如何使用 CSS 或 javascript 实现这一点？

Answer 1

您可以简单地将 .textContent与 JavaScript 一起使用来获取最新text信息，一旦您拥有了所有需要使用 split() 函数的数据.split(',')，就可以逐行从逗号中获取文本。

除了在使用 split 函数之前，我们还可以使用它trim()来删除多余的空格。,

Split将生成每一行的数组。您可以使用forEach()遍历它以生成列表项。

在您的forEach循环中，您将生成一个列表 ul li并将数据返回到您的原始 div .dvs-options innerHTML并通过querySelector方法选择元素

运行下面的片段。

//Get the current data

let getText = document.querySelector('.dvs-options').textContent.trim().split(',')

//Store data as list

let str = '<ul>'

//Use foreach to get all the text

getText.forEach(function(data) {

  str += '<li>' + data + '</li>';

});

str += '</ul>';

//Replace the innerHTML

document.querySelector(".dvs-options").innerHTML = str;

<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>

Answer 2

好吧，如果您的客户通过 API 提供数据，那将会更加容易和实用，但由于您需要的只是一个解决方案，所以试试这个。

let data = document.getElementsByClassName("dvs-options")[0].innerText; 

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){

  item.textContent = item.textContent.trim().split(',').join('\n')

})

.dvs-options{

  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>