不能直接用 innerHTML.replace() 做高亮，因其将 HTML 当纯字符串处理，导致标签误匹配、正则报错、DOM 结构非法、表单值丢失、XSS 漏洞等必然问题；安全做法是仅遍历并替换文本节点（Node.TEXT_NODE），配合 TreeWalker、正则转义、mark 元素动态插入及 normalize 处理。
直接用 innerHTML.replace() 做高亮，页面大概率会崩——表单值清空、事件监听器丢失、XSS 漏洞、DOM 结构非法，不是“可能”，是“必然”。
为什么不能对 innerHTML 做正则替换
浏览器把 innerHTML 当纯字符串处理，但里面混着标签和文本。搜 a，可能把 <a href="...> 里的 a 也包进去；搜 [ 或 .，正则直接报 Invalid regular expression；更糟的是，<p>abc</p> 变成 <p><mark>abc</mark></p> 看似正常，但一旦搜 p，就变成 p>abc<mark>p</mark>>，DOM 非法，页面白屏。
这些不是边缘情况：用户输入带符号、中文无空格分隔、动态内容含事件监听器——全都会出事。
- 表单控件（如
<input value="已输入">）高亮后变纯文本，值彻底丢失 -
<script>或<textarea>内容被误匹配，执行脚本或污染结构 - 原始文本跨多个元素（比如
<strong>React</strong> Native），正则切碎 DOM，导致Range.surroundContents()报InvalidNodeTypeError
必须只操作 Node.TEXT_NODE 节点
安全做法是遍历并仅替换文本节点（nodeType === 3），跳过所有元素、注释、脚本、样式和 textarea 节点。
立即学习“前端免费学习笔记（深入）”；
- 用
document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false)创建遍历器，它天然过滤非文本节点 - 循环中加判断：
if (!node.textContent.trim() || node.parentElement?.tagName === 'SCRIPT' || node.parentElement?.tagName === 'STYLE' || node.parentElement?.tagName === 'TEXTAREA') continue - 对每个有效节点，用
node.nodeValue做正则匹配，构造new RegExp(escapedKeyword, 'gi')（注意先转义正则元字符） - 匹配后用
document.createElement('mark')包裹，再调用node.parentNode.replaceChild(markEl, node)替换，不拼 HTML 字符串 - 每次替换后立即执行
node.parentNode.normalize()，合并相邻文本节点，防止重复高亮
mark 标签的坑比你想象的多
mark 是唯一语义正确、可访问、且被搜索引擎识别的高亮方式，但它不是“写了就完事”。
- IE 完全不识别
mark；旧版 Safari 渲染背景色不一致，且子元素（如<strong>）的color可能被父级mark覆盖 - 暗色模式下默认黄色背景不可读，必须写
@media (prefers-color-scheme: dark) { mark { background-color: #ffcc00; color: #111; } } -
mark是内联元素，若父容器有white-space: pre-line或line-height异常，会导致高亮块宽度突变、文字被截断、相邻mark间出现多余间隙 - 中文搜索要防“服务”匹配到“服务器”，不能依赖
（对中文无效），得用 Unicode 边界模拟：/(?
关键词转义必须做两层
用户输入的搜索词既是 HTML 内容，又是正则模式，必须双重转义。
- HTML 转义：防止 XSS，
keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`) - 正则转义：防止
.、*、[等破坏匹配逻辑，keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 别用
String.prototype.replace()的字符串替换形式（如'<mark>$&</mark>'），容易被误解析；优先用函数回调：str.replace(regex, (match) => `<mark>${match}</mark>`) - 多词搜索时，按长度从长到短排序关键词，避免短词截断长词（如先匹配
JavaScript，再匹配Script）
最易被忽略的点：高亮后滚动定位如果对每个 mark 都调用 scrollIntoView()，低配设备上会卡顿；应只处理第一个可见匹配项，并加防抖。还有，手动选中文本后触发高亮，getSelection() 会失效——因为 replaceChild 破坏了原始节点引用，得用 cloneRange() 提前保存锚点。
