首頁猿問如何將逗號分隔的文本字段轉換為單獨的行

如何將逗號分隔的文本字段轉換為單獨的行

JavaScript

藍山帝景 2022-11-27 16:43:20

我正在創建車輛列表網站，并且我有車輛選項字段，其中包含大量用逗號分隔的文本。這是代碼<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 實現這一點？

查看完整描述

4 回答

哆啦的時光機

TA貢獻1779條經驗獲得超6個贊

您可以簡單地將 .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;

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>

反對回復 2022-11-27

PIPIONE

TA貢獻1829條經驗獲得超9個贊

好吧，如果您的客戶通過 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。

反對回復 2022-11-27

POPMUISE

TA貢獻1765條經驗獲得超5個贊

您無法僅通過 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>';

反對回復 2022-11-27

慕尼黑5688855

TA貢獻1848條經驗獲得超2個贊

無需創建列表，只需更改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

}

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>

反對回復 2022-11-27

4 回答
0 關注
142 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將逗號分隔的文本字段轉換為單獨的行

如何將逗號分隔的文本字段轉換為單獨的行

4 回答

添加回答