不能用 innerHTML.replace() 高亮标签，因其会破坏 HTML 结构、误匹配属性和注释；必须仅操作文本节点，按标签长度降序匹配，并用 TreeWalker 安全遍历。
直接用 innerHTML.replace() 批量高亮标签，90% 的情况会把 HTML 结构搞崩——<script></script> 被截断、
a 被误包、中文词被切开、事件监听器丢失。必须只操作文本节点，且标签需按长度降序匹配，否则 #tag 会先于 #tagAgain 被替换，导致后者残缺。
为什么不能用 innerHTML.replace() 处理标签高亮
浏览器把 #tag #taginnerHTML 当纯字符串，但里面混着标签、属性、JS 逻辑。搜 #tag，可能把 data-tag-id="123" 或 href="#tag" 也一起包进去；搜 . 或 [，正则直接报错；更危险的是，p，就可能产出非法嵌套如 p>#tagp>，页面白屏。
- 所有匹配必须限定在
Node.TEXT_NODE内，跳过元素、注释、脚本节点 - 用户输入的关键词含
.?[等正则元字符时，必须先用keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')转义 -
textContent是安全提取纯文本的唯一可靠方式；innerText会吞掉display: none内容，但保留换行缩进，导致位置计算偏移
用 TreeWalker 安全遍历并高亮文本标签
这是原生、零依赖、IE9+ 兼容的方案，核心是只让正则碰真正的人类可读文本。先提取所有待高亮标签，按长度降序排列，再逐个在文本节点中查找替换。
- 调用
document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false)创建遍历器 - 循环中加过滤：
if (!node.textContent.trim()) continue，跳过空文本节点（如换行、缩进产生的空白） - 构造正则时务必加
g和i标志：new RegExp(escapedTag, 'gi') - 匹配后用
document.createElement('span')包裹，设置style.color = tagColors[tag]，再用node.parentNode.replaceChild(spanEl, node)替换 - 每次替换后立即调用
node.parentNode.normalize()，合并相邻文本节点，防止下次高亮重复包裹
标签优先级怎么处理：长标签必须先匹配
如果 tagColors 同时包含 "#tag": "#00ccff" 和 "#tagAgain": "#ff0808"，不排序就会先匹配 #tag，导致 #tagAgain 被拆成 #tagAgain，颜色错乱、语义失效。
- 提取键名后必须排序：
Object.keys(tagColors).sort((a, b) => b.length - a.length) - 排序后数组为
["#tagAgain", "#tag"]，确保长标签优先命中 - 若标签间无包含关系（如
#user和#post），排序影响不大；但只要存在子串关系，就必须排序 - 不建议用
Object.entries()直接遍历对象，因对象属性顺序在 JS 中不保证稳定
批量操作多个容器时避免重复高亮和性能陷阱
一个页面可能有多个 div.content 需要独立高亮，若共用同一套逻辑，容易在第二次执行时把已高亮的 #tag 当作原始文本再次处理，造成嵌套 #tag，样式错乱且难以清除。
- 每次高亮前，先清理目标容器内已有高亮：
container.querySelectorAll('span[data-highlight]').forEach(el => el.remove()) - 给生成的
span加统一属性，如data-highlight="true"，便于精准识别和清理 - 不要对
document.body全局操作，应限定容器：const walker = document.createTreeWalker(container, ...) - 高频触发场景（如输入框实时搜索）需加防抖，且每次执行前清空旧高亮，避免 DOM 节点爆炸式增长
最易被忽略的是：高亮后未调用 normalize()，导致文本节点碎片化；以及没给高亮元素加 data- 属性，后续无法干净卸载。这两点一旦出问题，调试成本远高于实现本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
