JavaScript字符串高亮关键词实现方法

本文详解了JavaScript中安全、可靠地高亮字符串关键词的完整实现方案：从对用户输入的关键词进行正则特殊字符转义（如 . * ? 等），到构建支持全局匹配和大小写不敏感的正则表达式，再到使用 replace 方法精准包裹匹配项为带样式的HTML标签；特别强调了防范XSS攻击的关键实践——严格转义输入、避免直接插入未处理内容，让开发者既能实现美观高亮，又确保应用安全稳健。

要在JavaScript中查找并高亮字符串中的特定关键词，核心是：用正则表达式匹配关键词（注意转义特殊字符、支持大小写可选），再用 String.prototype.replace() 将匹配部分包裹为带样式的HTML标签（如 或自定义class的 ）。

关键词安全转义，避免正则报错

用户输入的关键词可能含正则元字符（如 .、*、?、( ) 等），直接拼进正则会出错或误匹配。需先对关键词做转义处理：

• 用 keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') 把每个特殊字符前加反斜杠
• 例如 "price?" → "price\\?"，确保它被当作字面量匹配

构建正则并启用全局与大小写选项

匹配所有出现位置，且通常希望不区分大小写：

• 使用 new RegExp(pattern, 'gi')：`g` 匹配全部，`i` 忽略大小写
• pattern = 转义后的关键词，如 escapeRegExp("JS") + "(?![^>]* 可选加简单 HTML 标签规避（但更稳妥做法是先解析DOM文本节点）
• 若需高亮多个词，可用 keyword.split(/\s+/).filter(Boolean).map(escapeRegExp).join('|') 构建多关键词正则

替换为带样式的HTML片段