直接 innerhtml.replace() 必然破坏 dom，导致表单清空、事件丢失、标签结构错乱；treewalker 方案通过限定根节点、三重过滤、关键词转义、normalize() 和安全插入 mark 标签，实现零依赖、兼容性强、语义正确的高亮。
为什么直接 innerHTML.replace() 一定会崩
大规模文本高亮时，innerHTML.replace() 不是“可能出错”，而是必然破坏 DOM：表单值清空、事件监听器消失、<input> 变成纯文本、<script></script> 内容被正则误匹配执行、<p>abc</p> 被切开成非法片段。用户搜 . 或 [，正则直接抛 Invalid regular expression；搜 p，可能把 <p></p> 标签头尾一起包进 <mark></mark>，生成 p>abc<mark>p</mark>> 这种非法结构，浏览器直接白屏。
TreeWalker 遍历文本节点的实操要点
这是目前唯一零依赖、IE9+ 兼容、能应对中文无空格、动态内容、事件绑定的方案。关键不是“用不用 TreeWalker”，而是怎么用才不出错：
- 必须限定根节点：
document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false)，别直接扫document.body，否则会污染<script></script>、<style></style>、<textarea></textarea> - 循环中加三重过滤：
if (!node.textContent.trim()) continue（跳空白）、if (node.parentElement?.tagName === 'SCRIPT' || node.parentElement?.tagName === 'STYLE' || node.parentElement?.tagName === 'TEXTAREA') continue（跳敏感区域）、if (node.parentNode?.nodeType !== Node.ELEMENT_NODE) continue（防注释节点干扰） - 匹配前必须转义关键词：
keyword.replace(/[.*+?^${}()|[]]/g, '\$&')，否则keyword = "a.b"会变成/a.b/gi，匹配所有字符而非字面量 - 替换后立即调用
node.parentNode.normalize()，否则相邻文本节点分裂，下次搜索会重复高亮同一段文字
mark 元素插入的两种安全路径
不能拼字符串，也不能用 range.surroundContents() 盲插——它对节点类型极其敏感，遇到 Text 跨多个元素（如 <strong>React</strong> Native）会报 InvalidNodeTypeError。稳妥做法只有两种：
- 用
node.splitText(offset)切开原节点，再用node.parentNode.insertBefore(markEl, node.nextSibling)插入，适合已知精确偏移位置的场景 - 更通用的是：创建
document.createElement('mark')，设置markEl.textContent = matchedText，然后node.parentNode.replaceChild(markEl, node)整个替换，再调normalize() - 务必用
<mark></mark>标签，不是<span class="highlight"></span>—— 前者语义正确、屏幕阅读器可识别、搜索引擎理解上下文，后者只是视觉模拟
大规模文本下的性能与边界陷阱
当容器内文本超 10 万字符或嵌套层级深（比如 Markdown 渲染后带大量 <em></em>、<code>），以下三点最容易被忽略：
- 不要在每次输入就全量重高亮：用
debounce控制触发频率，且高亮前先container.querySelectorAll('mark').forEach(el => el.remove())清旧标记，比重建快得多 - 中文匹配要加 Unicode 边界：
new RegExp(`(?，否则搜“人工”会命中“人工智能”里的“人工”，但需注意 Safari 对 <code>p{L}支持不一，生产环境建议 fallback 到空格/标点分隔 - 动态渲染内容（Vue/React/AJAX）必须手动触发高亮：DOM 就绪后调用你的高亮函数，别指望自动扫描；若用
mark.js，必须传{ element: 'mark', exclude: ['script', 'style', 'textarea'] }，否则默认行为会钻进<script></script>里执行 XSS
normalize()、漏了 textContent.trim() 判断、或把 mark 写成 span 后发现无障碍测试失败。这些点不显眼，但一旦出问题，就是整个搜索功能不可用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
