html搜索高亮需先剥离标签在纯文本中匹配并记录位置，再回溯dom插入语义化标签；直接innerhtml.replace()会破坏结构，textcontent提取虽可靠但丢失格式，跨标签关键词须遍历文本节点映射位置。
HTML 搜索高亮本身不依赖“关键词”这个概念，它只负责视觉呈现；真正决定哪些文字该被高亮的，是 JavaScript 或后端传来的匹配逻辑 —— 也就是你实际搜索的词、正则、或语义判断结果。
为什么不能直接用 innerHTML.replace() 高亮？
因为 innerHTML 包含标签，比如 <img src="a.jpg"> 或 <span class="meta">2025-03</span>。如果对整个 HTML 字符串做 replace()，可能把 src 里的 "a"、class 名里的 "meta" 也替换成 <mark>a</mark>，导致标签结构损坏、图片不显示、JS 报错。
常见错误现象：Uncaught DOMException: Failed to execute 'replaceChild' on 'Node'，或页面突然空白、样式错乱。
- 必须先剥离 HTML 标签，只在纯文本中做匹配
- 匹配时记录每个关键词在原始文本中的起始/结束位置
- 再回溯到 DOM 文本节点，按位置切分并插入
<mark></mark> - 避免用
font或span替代<mark></mark>—— 它们没有语义，影响可访问性和 SEO
用 textContent 提取纯文本再高亮，靠谱吗？
靠谱，但有局限：它会丢弃所有格式（如换行、 、内联样式），且无法还原原始 DOM 结构。适合内容以段落为主、无复杂嵌套的场景。
实操建议：
- 用
document.querySelectorAll('p, li, div.content')精确选取目标容器，别用body全局操作 - 对每个元素调用
node.textContent，再用document.createElement('mark')创建节点 - 用
node.replaceChild()替换原文本节点，而不是拼接字符串再赋值innerHTML - 多词搜索时，先
keyword.toLowerCase()，再对textContent.toLowerCase()做 indexOf 匹配，避免大小写漏命
跨标签关键词（比如“前端开发”横跨 前端开发）怎么高亮？
这是最易出错的点：DOM 中文本被多个标签切割，单靠 textContent 只能拿到完整字符串，但不知道每个字属于哪个节点。强行包裹会破坏结构。
正确做法是遍历所有文本节点（node.nodeType === 3），收集它们的 nodeValue 和位置偏移，拼成一个带映射关系的数组。例如：
[
{ node: textNode1, start: 0, end: 12, value: "JavaScript 是" },
{ node: textNode2, start: 13, end: 20, value: "一门脚本语言" }
]
然后在拼接后的字符串里查找关键词，再根据起止位置反查归属哪个文本节点、切多少字符、插在哪。
性能提示：超过 200 条数据时，务必加防抖（setTimeout + clearTimeout），否则用户连打几个字就触发多次重排，页面卡顿。
mark 标签的样式和语义为什么不能省？
浏览器默认给 <mark></mark> 加黄色背景，但这只是视觉 fallback。真正关键的是它的语义：告诉屏幕阅读器“这部分和当前上下文相关”，搜索引擎也会加权。
如果你用 <span class="highlight"></span> 替代，CSS 再像，也无法传递这层含义。
自定义样式时注意：
- 别只改
background-color，记得设color保证可读性（比如深色背景上用浅色字） - 加
padding和border-radius提升视觉辨识度，但别设display: inline-block—— 会破坏行内流 - 避免在
<mark></mark>里嵌套其他交互元素（如<button></button>），会导致焦点逻辑混乱
最常被忽略的一点：高亮后没清空旧标记，用户换关键词搜索，旧 <mark></mark> 还留在 DOM 里 —— 必须在每次新搜索前，用 container.querySelectorAll('mark').forEach(el => el.replaceWith(el.textContent)) 彻底还原。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
