最直接的方法是用 innerHTML + 正则替换实现关键词高亮，需转义关键词特殊字符、使用 RegExp 构造函数动态创建全局忽略大小写的正则，并用 $1 引用匹配内容；不能操作 textContent，须确保只处理文本节点或先净化 HTML 防 XSS。
用
+ 正则替换最直接
浏览器原生不提供“高亮关键词”的 API，得手动把匹配到的文本包上
或带样式的
。核心就是：拿到原始文本 → 用正则找出关键词位置 → 替换为带标签的 HTML 片段。
注意点：
必须用
构造函数（而非字面量），否则无法动态插入变量关键词
要加
标志全局匹配，加
标志忽略大小写（按需）
关键词含正则特殊字符（如
、
、
）必须先转义，否则会报错或误匹配
替换时用
引用匹配内容，避免丢失大小写原始值
示例：
为什么不能直接对
操作
是纯文本，没有 HTML 结构。你往里面塞
标签，它只会当普通字符显示出来，不会渲染成高亮样式。
立即学习
“
前端免费学习笔记（深入）
”；
正确做法是：
操作目标必须是支持 HTML 解析的属性，比如
或
如果原内容来自用户输入或不可信来源，先做 XSS 过滤（比如用
），再高亮，否则
里塞个
innerHTMLRegExpgi.*($&function highlight(text, keyword) {
if (!keyword.trim()) return text;
const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
return text.replace(regex, '$1');
}
const html = highlight('JavaScript 是一门语言，javascript 也很流行', 'javascript');
// → '〈mark〉JavaScript〈/mark〉 是一门语言，〈mark〉javascript〈/mark〉 也很流行'
textContenttextContentinnerHTMLinsertAdjacentHTMLDOMPurify.sanitize()keyword