最稳动态渲染HTML文本匹配方案是用querySelectorAll定位容器后遍历文本节点，而非innerHTML字符串搜索；需过滤隐藏元素、转义正则元字符、归一化关键词，并用Range API或框架响应式数据结构实现安全高亮。
document.querySelectorAll() + textContent 匹配最稳
动态渲染的 HTML（比如 Vue/React 生成的、AJAX 加载后插入的）不能靠 innerHTML 字符串搜索，因为结构可能被框架管理，直接改会丢状态。用 querySelectorAll 定位容器，再遍历其文本节点才是安全路径。
常见错误是写 document.body.innerText.includes(keyword) ——它把所有文本扁平拼接，丢失位置信息，无法高亮，也搜不到隐藏元素（display: none 或 aria-hidden="true" 的内容）。
- 只查可见区域：加 CSS 选择器过滤，如
section.main article:not([hidden]) - 忽略脚本/样式块：在遍历前排除
script、style、textarea等节点 - 大小写不敏感匹配：用
textContent.toLowerCase().includes(keyword.toLowerCase())，比正则轻量且无转义风险 - 想支持模糊匹配？用
String.prototype.match()配合new RegExp(keyword, "gi")，但必须先转义元字符（见下一条）
关键词含 . ? * ( ) 时必须转义正则
用户输 “C++”、“a?b”、“file.txt”，直接塞进 new RegExp(keyword) 会报错或漏匹配——+、?、.、(、) 是正则元字符，得加反斜杠变成字面量。
别手写一堆 replace(/./g, '\.').replace(/?/g, '\?')...，统一用这个函数：
立即学习“前端免费学习笔记（深入）”；
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}然后：const regex = new RegExp(escapeRegExp(keyword), 'gi');
- 没转义就执行
"x.y".match(/x.y/)→ 匹配xanyy，不是x.y - 用户输入空格、全角标点、换行符？建议提前
keyword.trim().replace(/s+/g, ' ')归一化 - 只匹配完整词？加单词边界：
new RegExp('\b' + escaped + '\b', 'gi')
高亮时别碰 innerHTML，用 Range + splitText()
对动态内容做高亮，element.innerHTML = element.innerHTML.replace(...) 是高危操作：会销毁事件监听器、清空表单值、重置 Vue/React 组件状态，刷新后高亮还在但交互全废。
正确做法是只动文本节点，用浏览器原生 Range API：
- 用
node.nodeType === 3过滤出纯文本节点 - 对每个文本节点调
node.textContent.matchAll(regex)拿到所有匹配起止偏移 - 倒序处理（避免
splitText()改变后续索引），用node.splitText(start)切开，再parent.insertBefore(markEl, nextNode) -
mark元素要加role="note"和aria-label，否则屏幕阅读器读不出“此处为搜索结果”
Vue/React 里别用 v-html 或 dangerouslySetInnerHTML
框架内直接插带 <mark></mark> 的 HTML 字符串，等于放弃响应式和生命周期管理。Vue 的 v-html 不触发更新，React 的 dangerouslySetInnerHTML 会让组件脱离 diff 流程。
应该把高亮逻辑拆成数据结构，让框架控制渲染：
- Vue 3：用
computed返回一个数组，如[{ type: 'text', value: 'hello ' }, { type: 'mark', value: 'world' }]，模板里v-for渲染不同<span></span>或<mark></mark> - React：用
useMemo拆分字符串，返回ReactNode[]，每个<mark key="{i}">{match}</mark>单独包裹 - 关键点：原始文本不能被框架当“静态 HTML”吞掉，得保留为可响应的数据项
最常被跳过的细节是：没清理上一次的 <mark></mark>。重复搜索不先 document.querySelectorAll('mark').forEach(el => el.replaceWith(el.textContent))，就会嵌套 <mark><mark>xxx</mark></mark>，样式崩、语义乱、DOM 节点泄漏。
