必须用 mark 标签而非 span 或 class，因其具有明确语义，可被读屏器识别并播报“高亮文本”，提升可访问性与搜索引擎摘要精准度；安全插入需遍历纯文本节点、双重转义关键词后创建 mark 元素，并显式声明兼容多环境的样式。
标签是搜索结果页中高亮关键词的唯一语义正确方案
为什么必须用 mark 而不是 span 或 class
它不是视觉装饰，而是向浏览器、搜索引擎和读屏器明确传达“这段文本与当前搜索强相关”。读屏器会播报“高亮文本”，帮助视障用户快速定位命中项；搜索引擎可能据此生成更精准的摘要片段。用替代，等于主动放弃语义层支持——既不可访问，也不利于结构化数据提取。
安全插入 mark 的核心操作逻辑
绝不能直接对 innerHTML 做字符串替换，否则极易引发 XSS、DOM 解析中断或标签撕裂。正确路径是只操作纯文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历所有文本节点 - 跳过空内容或仅含空白符的节点（
node.textContent.trim() === ''） - 对关键词做双重转义：先 HTML 实体转义（
&→&），再正则元字符转义（[→\[） - 匹配后创建
mark元素：const m = document.createElement('mark');→m.textContent = matchedText;→node.replaceWith(m);
样式必须显式声明，且兼顾多环境
浏览器默认黄色背景在真实场景中基本不可靠：
- Safari 阅读模式下剥离 UA 样式，变成无背景纯文本
- Windows 高对比度模式强制重置未声明的 background-color
- 深色主题中默认 #ff0 与深灰背景对比度低于 WCAG AA 标准（
- Outlook 等邮件客户端完全忽略 UA 默认值
生产环境至少需写死：mark { background-color: #ffeb3b; color: #212121; padding: 0.1em 0.25em; border-radius: 2px; }，并建议补充暗色模式适配：@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } }
避免常见语义误用和结构风险
只适用于三类明确上下文：搜索关键词、文档引用术语、代码示例中的修改部分。以下属于误用：
- 按钮文案套 立即购买（应使用 ）
- 整段警告文字包裹 （语义错位，应加 class 控制样式）
- 嵌套 React（破坏语义且 CSS 难控）
- 在
<img alt="mark 标签在搜索结果页面高亮匹配关键词的应用" >属性值里匹配关键词（如src="logo.png"中搜 logo，会导致 DOM 结构损坏）
英文匹配建议加单词边界 \b 防止 “cat” 匹配到 “education”；中文无天然分词，需确保全角/半角一致，且不依赖 \b。
