搜索高亮失败主因是直接正则替换innerHTML导致标签截断，正确做法是遍历文本节点、避开script/style/textarea等节点，并用normalize()合并文本节点、escapeRegExp()处理特殊字符。
搜索高亮为什么没包住关键词？
常见现象是页面搜索后，innerHTML 替换出错，比如关键词被截断在标签中间（如 <span class="highlight">搜</span>索<b><span class="highlight">关</span></b>键词），导致样式失效或 DOM 损坏。根本原因是直接对整个 innerHTML 做正则替换，没避开 HTML 标签内容。
正确做法是只遍历文本节点（nodeType === 3），跳过元素节点和注释节点。用 TreeWalker 或递归 childNodes 都可以，但必须过滤掉 script、style、textarea 这类不该高亮的节点。
- 别用
document.body.innerHTML = ...粗暴替换，会销毁事件监听器、表单状态、动态组件 - 高亮前先
normalize()文本节点，避免因 DOM 拆分产生多个相邻文本节点漏匹配 - 正则要加
g和i标志，关键词含特殊字符（如.、?）得先escapeRegExp()
怎么让搜索关键词不区分大小写又精准匹配单词边界？
用户搜 js，你不该把 javascript 或 json 里的 js 也高亮——这是典型误匹配。靠 单词边界不够，因为中文没有空格分隔， 对中文无效。
更可靠的做法是：对英文部分用 (?，对中文用前后检查是否为非中文字符（<code>(?），再合并成一个正则。实际中建议拆开处理：先用 <code>textContent 提取纯文本做匹配定位，再回 DOM 找对应文本节点做包裹。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
innerText获取文本，它会忽略display: none但保留换行缩进，影响位置计算 - 关键词含空格（如
web api）时，正则需转义空格并用\s+兼容多空格/换行 - 移动端 Safari 对
RegExp().flags支持不全，new RegExp(pattern, "gi")比字面量更稳妥
高亮后滚动到第一个匹配位置怎么不跳错？
element.scrollIntoView() 直接调用常因 CSS transform、position: sticky 或父容器 overflow: hidden 导致偏移。更稳的方式是用 getBoundingClientRect() 计算相对于 viewport 的真实坐标，再手动 window.scrollTo()。
- 别在高亮完成前就调
scrollIntoView()，DOM 更新未生效会导致top为0 - 用
requestAnimationFrame()包一层，确保样式已重排（reflow） - 如果匹配项在折叠的
details或display: none区域，先触发open或临时设visibility: hidden而非display，避免布局抖动
React/Vue 项目里直接操作 DOM 高亮会出什么问题？
在 React 中直接改 ref.current.innerHTML，下次 re-render 会清掉你的 <mark></mark> 标签；Vue 的响应式更新也会覆盖手动插入的节点。这不是“不能做”，而是时机和方式必须配合框架生命周期。
React 推荐用 useEffect + ref，在 searchTerm 变化后延迟执行（setTimeout 或 useLayoutEffect），并记录上次高亮的 Range 对象，re-render 前先 range.deleteContents() 清理。Vue 3 的 onUpdated 钩子比 watch 更准，因为能确保 DOM 已更新完毕。
- 永远不要在
render函数里做 DOM 操作，会触发无限循环 - SSR 场景下，
typeof window === 'undefined'时跳过高亮逻辑，否则服务端报错 - 若用
dangerouslySetInnerHTML渲染搜索结果，高亮必须在服务端或useEffect外完成，不能混入渲染逻辑
最麻烦的不是怎么高亮，而是怎么在不破坏语义、不干扰交互、不引发内存泄漏的前提下，让高亮“刚好出现”又“刚好消失”。尤其是带富文本编辑、代码块、数学公式的内容，textContent 和视觉呈现的偏差会悄悄吃掉你一整天。
