HTML搜索高亮需手动提取关键词并操作DOM文本节点，mark标签仅作语义容器无自动匹配能力，须避免字符串替换污染HTML结构、注意正则转义、大小写处理、多词合并及性能优化。
HTML搜索高亮本身不提供搜索能力，必须传入关键词才能知道“高亮谁”——mark 标签只是个空壳容器，它不会自己找词。
为什么 mark 标签不能自动高亮
mark 是纯语义标签，浏览器渲染时只按默认样式（通常是黄底）显示内容，完全不感知“这是不是搜索结果”。它不像 input 或 form 那样带行为逻辑。
- 写
<mark>abc</mark>就会高亮 abc，但你得先手动把 abc 从原文里揪出来 - 如果用户搜的是
ABC（大写），而原文是abc，mark不会帮你做大小写转换或模糊匹配 - 直接对含 HTML 的字符串用
String.prototype.replace()匹配关键词，极大概率会污染标签结构，比如把<img src="a.jpg">里的src或a错误替换成<mark>a</mark>
安全提取关键词并高亮的实操路径
核心原则：**别碰原始 HTML 字符串，改用 DOM 节点遍历 + 文本节点操作**。
- 用
document.querySelectorAll('p, li, span, div:not([class*="no-highlight"])')锁定可高亮区域，避开脚本、属性值、注释等敏感位置 - 对每个匹配元素调用
node.childNodes，只处理nodeType === 3（文本节点） - 关键词要做正则转义：
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')，否则+、[这类字符会让RegExp构造失败 - 匹配时用
new RegExp(escapedKeyword, 'gi')，确保大小写不敏感且全局匹配；但注意不要在正则中用g标志后反复exec()同一个字符串，容易死循环 - 创建
mark元素时用document.createElement('mark')，再用textContent设置内容，避免 XSS 风险
多词搜索和性能踩坑点
用户输入 “前端 框架”，不是要高亮“前端 框架”这个完整短语，而是分别高亮“前端”和“框架”——但顺序、重叠、嵌套都得小心处理。
立即学习“前端免费学习笔记（深入）”；
- 先用
keyword.trim().split(/s+/).filter(Boolean)拆词，去掉空串 - 逐词匹配时，记录每个匹配的
start和end索引，合并区间前先按start排序，再用贪心合并避免嵌套mark套mark - 单页文本节点超过 200 个时，建议加防抖：
setTimeout(highlight, 150)，否则输入过程中频繁 DOM 修改会卡顿 - 服务端返回已带
mark的 HTML？千万别信。必须校验是否所有mark都在文本节点内，而不是插在<a href="...</mark>">这种错位位置
真正难的不是加黄色背景，而是让高亮不破坏链接跳转、不干扰屏幕阅读器、不把 <script> 里的字符串当正文匹配——这些细节藏在节点遍历的判断条件里，而不是 mark 标签本身。
