必须显式声明background-color、color、padding三项css并用treewalker操作文本节点，否则存在样式失效、xss和dom崩溃风险。
直接写<mark></mark>就能高亮？先看默认行为是否可靠
浏览器确实会默认给 <mark></mark> 加黄色背景，但这个“开箱即用”只在最简场景下成立。真实项目里，它大概率失效——Safari 阅读模式剥离 UA 样式、Outlook 邮件客户端完全忽略、Windows 高对比度设置强制重置 background-color。别指望用户看到和你本地开发时一样的效果。
必须显式声明三项 CSS：background-color、color、padding。例如：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.25em;
}
深色模式要手动适配：@media (prefers-color-scheme: dark) 里重设 background-color 和 color，否则黄底黑字在暗色主题下对比度可能低于 WCAG AA 标准（≥4.5:1）。
动态插入<mark></mark>时为什么innerHTML.replace()是危险操作
用字符串替换整个容器的 innerHTML，等于同时打开三扇门：XSS、DOM 结构破坏、HTML 解析中断。
- 用户搜
<script>alert(1)</script>→ 拼进字符串后脚本执行 - 用户搜
cat[0]→new RegExp('cat[0]')报错，脚本中断 - 原文是
<code>console.log()→ 替换后变成<code>console.<mark>log</mark>()，<mark></mark>被撕开，DOM 解析失败 - 原文是
<img src="logo.png">→ 变成<img src="<mark>logo</mark>.png">，图片挂掉
安全高亮必须只操作文本节点，用TreeWalker遍历
核心路径是：遍历纯文本内容 → 匹配 → 创建 mark 元素 → 插入 DOM。不碰 HTML 字符串，绕过所有转义陷阱。
关键步骤：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取所有文本节点 - 跳过空节点：
node.textContent.trim() === '' - 对关键词双重转义：
— HTML 转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)
— 正则转义：keyword.replace(/[.*+?^${}()|[]]/g, '\$&') - 匹配后创建元素：
const mark = document.createElement('mark'); mark.textContent = match;，再用node.parentNode.replaceChild(mark, node)
<mark></mark>不是<span class="highlight"></span>的替代品
语义不可互换。<mark></mark> 是唯一被读屏器识别为 “marked text” 的原生标签，搜索引擎也据此理解上下文相关性；而 <span class="highlight"></span> 只是视觉装饰，辅助技术完全无视。
误用后果：
- 屏幕阅读器不会提示“此处为搜索命中”，用户无法感知高亮存在
- SEO 失去结构化信号，搜索词与文档相关性的语义链断裂
- IE9+ 全兼容，无需 polyfill；但若用
<span></span>再加 ARIA 模拟，维护成本陡增且仍不保真
真正容易被忽略的是：高亮逻辑本身不复杂，但“只操作文本节点”这一步，决定了你的高亮是能上线，还是上线即引发 XSS 或 DOM 崩溃。别跳过 TreeWalker，别拼 innerHTML，别信默认样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
