本文介绍一种基于 javascript（配合 jquery）的自动化方案，可精准匹配文本中的关键词并为其分别应用不同 css 颜色类，不干扰其他文字，支持大小写不敏感匹配与可扩展配置。
本文介绍一种基于 javascript（配合 jquery）的自动化方案，可精准匹配文本中的关键词并为其分别应用不同 css 颜色类，不干扰其他文字，支持大小写不敏感匹配与可扩展配置。
在 Web 开发中，常需对一段纯文本中的特定关键词进行高亮着色（如日志分析、代码关键词渲染、敏感词标记等），但直接修改整个容器的 CSS 会作用于全部内容，而手动包裹 <span></span> 又不可维护。理想的方案是：逐词识别、按规则着色、保留原始格式、零侵入式改造。
以下是一个轻量、可靠且易于扩展的实现：
✅ 核心思路
- 获取目标文本内容（
text()，避免误解析 HTML）； - 按空白符分词（
split(/\s+/)），保留原有空格结构； - 建立关键词 → CSS 类名映射表（如
"he": "green"）； - 遍历每个词，忽略大小写匹配关键词，匹配成功则用
<span class="..."></span>包裹； - 将处理后的带标签字符串重新注入 DOM（使用
html()替换）。
? 完整示例代码
<meta charset="UTF-8"><title>关键词彩色高亮</title><style>
.green { color: #28a745; font-weight: 500; }
.red { color: #dc3545; font-weight: 500; }
.blue { color: #007bff; font-weight: 500; }
</style><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><div id="coloredText">he walked to the store and then he walked to his house</div>
$(document).ready(function() {
const $target = $("#coloredText");
let text = $target.text(); // 纯文本，安全获取
const keywordClasses = {
"he": "green",
"walked": "red",
"store": "blue",
"house": "blue"
};
// 按空白符分割（保留多空格/换行的语义边界）
const words = text.split(/(\s+)/); // 注意：括号捕获分隔符，保留空格
for (let i = 0; i ${word}`;
}
}
}
$target.html(words.join('')); // 重建 HTML，保留原始空白结构
});
? 关键优化说明：
- 使用
split(/(\s+)/)而非split(/\s+/)，可保留原始空格、制表符、换行，避免格式塌陷；replace(/[^\w]/g, '')在匹配前剔除标点（如"he."→"he"），提升鲁棒性；- 所有匹配逻辑基于小写，确保
"He"、"WALKED"同样生效；- CSS 类名解耦，新增关键词只需扩展
keywordClasses对象，无需改逻辑。
⚠️ 注意事项
-
避免正则全局替换陷阱：不要用
String.replace()直接替换（易重复嵌套、破坏结构）； -
性能考量：对超长文本（>10万字），建议分块处理或使用
DocumentFragment减少重排； -
HTML 安全性：若原文含用户输入，务必对
word做 HTML 转义（可用textContent+innerHTML组合防御 XSS）； -
进阶需求：如需支持词干匹配、模糊匹配或正则关键词，可将
keywordClasses改为[RegExp, className]数组并用test()判断。
该方案简洁、可维护、开箱即用，是前端文本关键词着色的工业级实践范式。
