如何用JavaScript查找替换方法为<li>中含冒号的文本设置红色

架构老林

2026-8-9

实现冒号及后续文本变红的JavaScript方案

需求说明

现有从数据库拉取的如下HTML列表，需要通过JavaScript实现：只要<li>标签内容包含冒号“:”，就将冒号及其后面的文本设置为红色。

<ul>
  <li>Capacity : 1.000 kg</li>
  <li>Load Capacity When Extended : 1.000 kg</li>
  <li>Max. Number of users (indoor/outdoor) : 4</li>
</ul>

代码实现

将以下JavaScript代码添加到页面中（建议放在</body>标签前，或使用DOM加载完成事件确保元素已存在）：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('li').forEach(li => {
    const content = li.textContent;
    if (content.includes(':')) {
      // 分割出冒号前后内容，只分割第一个冒号
      const [prefix, suffix] = content.split(':', 2);
      // 重构内容，给冒号+后缀套红色span
      li.innerHTML = `${prefix}<span style="color: #ff0000;">: ${suffix.trim()}</span>`;
    }
  });
});

关键细节

使用DOMContentLoaded事件避免DOM未加载完成时找不到<li>元素的问题；
split(':', 2)确保只分割第一个冒号，适配内容中可能出现多个冒号的场景；
suffix.trim()去除冒号后多余的空格，保证排版整洁；
也可以把内联样式替换为预定义CSS类（比如.red-text），方便统一维护样式：
```
.red-text { color: #ff0000; }
```
对应的JS代码修改为：
```
li.innerHTML = `${prefix}<span class="red-text">: ${suffix.trim()}</span>`;
```