不能用 innerHTML.replace() 高亮，因其会重建 DOM 导致事件丢失、XSS 风险、中文跨字拆分；应使用 TreeWalker 遍历文本节点，手动转义关键词并用 mark 包裹，确保语义、安全与可访问性。
直接用 innerHTML.replace() 做搜索关键词高亮，页面大概率会崩——表单值清空、事件监听器丢失、<script></script> 被污染、中文词被跨字拆开，甚至触发 XSS。必须只操作文本节点，用 TreeWalker 遍历 + mark 元素包裹 + 手动转义关键词，才是安全可落地的方案。
为什么不能用 innerHTML.replace() 动态高亮
这不是“写法不够优雅”的问题，而是结构性风险：
- 浏览器解析
innerHTML时会重建整个子树，<input value="已输入内容">瞬间变空 - 所有通过
addEventListener绑定的事件（包括自定义指令、React/Vue 的内部监听）全部失效 - 用户搜
<script>alert(1)</script>或cat[0]，正则未转义直接抛错，或拼出非法 HTML 导致后续标签错位 - 中文无空格分隔，
/服务/gi会把“微服务”“服务器”全匹配，且无法区分词边界 -
<mark></mark>被插进<textarea></textarea>或<style></style>内容里，破坏原始语义和渲染
怎么用 TreeWalker 安全遍历并替换文本节点
这是原生、零依赖、IE9+ 兼容的核心路径，关键在「只让正则碰纯文本」：
- 调用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false)创建遍历器，它天然跳过元素、注释、脚本节点 - 循环中加过滤：
if (!node.textContent.trim()) continue，跳过换行、缩进等空白文本节点 - 手动排除禁用区域：
node.parentElement?.tagName === 'SCRIPT' || node.parentElement?.tagName === 'STYLE' || node.parentElement?.tagName === 'TEXTAREA' - 对每个有效
node.nodeValue构造正则：new RegExp(`(?，用 Unicode 边界模拟中文词边界 - 匹配后不用字符串拼接，而是：
const mark = document.createElement('mark'); mark.textContent = matchedText; node.parentNode.replaceChild(mark, node); - 每次替换后立即调用
node.parentNode.normalize()，合并相邻文本节点，防止重复高亮
关键词转义和大小写处理怎么写才不出错
用户输入不可信，正则元字符和大小写混用是高频崩溃点：
立即学习“前端免费学习笔记（深入）”；
- 必须提前转义关键词中的正则特殊字符：
keyword.replace(/[.*+?^${}()|[\]]/g, '\$&')（注意[和]在字符类里要双写转义） - 若需保留原始大小写（如页面显示 “React”，用户搜 “react”），别用
replace(str, '<mark>$&</mark>')—— 它会把匹配结果强制小写；改用函数回调：.replace(regex, (match) => { const m = document.createElement('mark'); m.textContent = match; return m; }) - 忽略大小写但不破坏 DOM 文本大小写，只靠
RegExp的i标志即可，无需额外处理textContent - 空格要转为
\s+：用户搜 “web api”，应做keyword.replace(/\s+/g, '\s+')，否则无法跨单词匹配
mark 标签的样式和可访问性为什么不能省
它不是视觉装饰，而是语义标记。浏览器、读屏器、搜索引擎都依赖这个信号：
- 默认黄色背景在 Safari 阅读模式、Windows 高对比度、Outlook 邮件客户端中基本不可见，必须显式声明：
mark { background-color: #ffeb3b; color: #212121; padding: 0 2px; } - 深色主题下，
#ffeb3b与深灰背景对比度低于 WCAG AA（≥4.5:1），建议用color-scheme: light;或动态检测主题切换色值 - 禁止嵌套：
<mark>点击<mark>这里</mark></mark>是无效 HTML，会导致解析异常 - 禁止包裹交互元素：
<mark><button>提交</button></mark>会让读屏器误判上下文，应改为仅包裹纯文本 - 移动端需加
user-select: none;，否则安卓长按易触发文字选择框，干扰点击行为
最易被忽略的点是：高亮后光标位置错乱、选区消失、以及中文词边界正则没覆盖全角标点（如“服务。”里的句号）。这些不会报错，但会让用户感觉“搜到了却看不到”或“点一下就跳到别处”。务必在真实文档里用含标点、含表单、含脚本的混合 HTML 测试三轮以上。
