是语义化高亮关键词的唯一标准方案，适用于搜索结果、文档引用和代码示例中的上下文标记；需正则转义、安全 DOM 操作、显式 CSS 样式及读屏器兼容处理。
用 <mark></mark> 实现搜索关键词高亮，核心是语义正确 + 样式可控 + 安全可靠。不能只靠浏览器默认黄色背景，也不能直接字符串拼接插入 HTML。
必须用 mark 的典型场景
只有在以下情况中，<mark></mark> 才不可替代：
- 搜索结果页中，将用户输入的关键词（如“Vue”）在正文里语义化标出
- 文档引用中临时突出与当前上下文强相关的术语（例如“请修改 package.json 中的 scripts 字段”）
- 代码示例里标记被新增或修改的值（如
const timeout = <mark>5000</mark>;），且需读屏器识别为“上下文标记”而非“重要强调”
安全动态高亮的实现要点
JavaScript 动态包裹关键词时，直接 innerHTML = text.replace(...) 极易引发 XSS 或破坏 DOM 结构。正确做法是：
- 对用户输入的关键词做正则元字符转义：
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 用
split()切分原始文本，避免跨标签匹配（比如关键词出现在<strong>React</strong>中间） - 对每个文本片段单独转义 HTML（如
&→&），再仅对匹配项创建<mark></mark>元素 - 最终用
document.createElement('mark')和document.createTextNode()组装，不拼接字符串
CSS 自定义样式必须写死的关键项
浏览器默认样式在暗色模式、阅读模式、邮件客户端或 CSS 重置后会失效。生产环境务必显式声明：
立即学习“前端免费学习笔记（深入）”；
-
background-color：推荐#ffeb3b（浅黄）或#4fc3f7（蓝，适配深色背景） -
color：必须配对设置，如深色背景配浅色文字（#212121），浅色背景配深色文字（#fff） -
padding：加0.1em 0.25em防止文字贴边，提升可读性 -
border-radius：设2px～3px即可，过大在小字号下会裁切文字
避免使用 margin（内联元素不响应垂直 margin），也不要只写 background: none —— 应写 background-color: transparent 确保清除背景。
辅助技术与兼容性提醒
<mark></mark> 是唯一向读屏器传达“此处为上下文相关高亮”的语义标签。但要注意：
- IE9+ 支持，旧版 Android WebView 渲染可能不一致，建议始终覆盖样式
- 它只能包裹纯文本或其它行内元素（如
<em></em>、<a></a>），不能直接包<p></p>或<div> <li>不要用于整段警告、按钮文案或广告标语——这些该用 <code><strong></strong>或 class 控制
