如何使用javascript替换从DB返回的类中的字符

Question

我有一个表，我在制作的页面中重复了它，输出中是一系列用逗号(，(分隔的产品

这是该列的代码：

<td class='listord'>" . $row["OrderList"] . "</td>

这是一个示例输出：

PRODUCT1,PRODUCT2,PRODUCT3

预期输出：

PRODUCT1
PRODUCT2
PRODUCT3

这是我当前的代码，但似乎不起作用：

let str = document.getElementsByClass("listord");
for (var i = 0; i < str.length; i++) {
let result = str[i].innerText.replace(/,/g, "<br>");
str[i].innerText = result;
}

我做错了什么？

Answer 1

正如CBroe在评论中所说，JS不能工作主要是因为getElementsByClass不是一个真正的函数，而不是因为replace调用中的正则表达式有任何问题。

使用JavaScript时，请始终检查浏览器的控制台(在其开发工具中(是否存在错误，因为这会显示在那里——例如，在Chrome中，您会收到以下消息：

未捕获类型错误：document.getElementsByClass不是函数

此外，请务必查看文档以提醒自己确切的名称。

您将遇到的另一个问题是，由于您试图用HTML标记替换逗号，并且希望浏览器解析逗号并在单独的行上显示文本，因此需要使用innerHTML而不是innerText，否则您的替换将被解释为纯文本而不是实时HTML。

演示：

let str = document.getElementsByClassName("listord");
for (var i = 0; i < str.length; i++) {
let result = str[i].innerHTML.replace(/,/g, "<br/>");
str[i].innerHTML = result;
}

<table>
<tr>
<td class='listord'>PRODUCT1,PRODUCT2,PRODUCT3</td>
</tr>
</table>

---

N.B.正如我和其他人在评论中所说，一个适当规范化的数据库设计一开始不会涉及以逗号分隔的格式将多个数据项存储在一列中。