时间戳

首页 > 解决方案 > 如何将逗号分隔的文本字段转换为单独的行

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

问题描述

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

<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 实现这一点？

标签： javascript

解决方案

您可以简单地将 .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>

推荐阅读