最直接的方法是用 innerhtml + 正则替换实现关键词高亮，需转义关键词特殊字符、使用 regexp 构造函数动态创建全局忽略大小写的正则，并用 $1 引用匹配内容；不能操作 textcontent，须确保只处理文本节点或先净化 html 防 xss。
用 innerHTML + 正则替换最直接
浏览器原生不提供“高亮关键词”的 API，得手动把匹配到的文本包上 <mark></mark> 或带样式的 <span></span>。核心就是：拿到原始文本 → 用正则找出关键词位置 → 替换为带标签的 HTML 片段。
注意点：
- 必须用
RegExp构造函数（而非字面量），否则无法动态插入变量关键词 - 要加
g标志全局匹配，加i标志忽略大小写（按需） - 关键词含正则特殊字符（如
.、*、(）必须先转义，否则会报错或误匹配 - 替换时用
$&引用匹配内容，避免丢失大小写原始值
示例：
function highlight(text, keyword) {
if (!keyword.trim()) return text;
const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
const html = highlight('JavaScript 是一门语言，javascript 也很流行', 'javascript');
// → '〈mark〉JavaScript〈/mark〉 是一门语言，〈mark〉javascript〈/mark〉 也很流行'
为什么不能直接对 textContent 操作
textContent 是纯文本，没有 HTML 结构。你往里面塞 <mark></mark> 标签，它只会当普通字符显示出来，不会渲染成高亮样式。
正确做法是：
- 操作目标必须是支持 HTML 解析的属性，比如
innerHTML或insertAdjacentHTML - 如果原内容来自用户输入或不可信来源，先做 XSS 过滤（比如用
DOMPurify.sanitize()），再高亮，否则keyword里塞个<script></script>就执行了 - 别在循环里反复赋值
innerHTML，性能差；优先一次性生成完整 HTML 字符串再写入
mark 标签 vs 自定义 span 样式
<mark></mark> 语义正确、开箱即用，但默认样式固定（黄色背景），且部分老浏览器（IE）不支持。
更稳妥的做法是用 <span class="highlight"></span>：
- CSS 可完全控制：背景色、字体粗细、圆角、动画等
- 兼容性好，所有现代浏览器和 IE9+ 都支持
- 方便用 JS 动态切换高亮状态（比如加
highlight--active类） - 注意加
class而非id，避免重复 ID 报错
CSS 示例：
.highlight {
background-color: #ffeb3b;
padding: 0 2px;
border-radius: 3px;
}
搜索结果中高亮要避开 HTML 标签内容
如果原始文本是 HTML 字符串（比如从接口拿到的富文本摘要），直接正则替换会污染标签结构 —— 比如把 <div class="js-xxx"> 里的 <code>js 也高亮，导致标签断裂。
安全做法是只处理文本节点：
- 用
document.createElement('div').innerHTML = rawHtml解析成 DOM - 遍历所有
Text节点（nodeType === 3），跳过元素节点 - 对每个文本节点的内容做高亮，再用
replaceChild替换 - 最后取
outerHTML或innerHTML输出
简单绕过方案（适用于结构简单、无嵌套标签的摘要）：先用正则剔除 HTML 标签再高亮，但会丢失原文本格式，慎用。
实际项目里最容易被忽略的是关键词转义和 HTML 标签干扰这两块，一不留神就出现渲染异常或 XSS 漏洞。
