网页如何实现局部高亮文本 Mark标签快速标记重点内容

<mark>标签是HTML5新增的语义化标签，专用于标记与当前上下文相关的内容（如搜索关键词、引用重点、法律条款），需配合CSS定制样式以保障可访问性，不可用于纯装饰性高亮。

<mark> 标签是语义化标记高亮内容最直接的方式，但它不是“万能高亮按钮”——用错位置、忽略样式或混用场景，反而会让高亮失效或破坏可访问性。

什么时候该用 <mark> 而不是 CSS class？

它专为“文档中需要突出显示的、与当前上下文相关的内容”设计，比如搜索结果中的关键词、引用中的重点句、或用户当前关注的段落。不是所有“看起来要黄底”的地方都适合用 <mark>。

• ✅ 推荐：用户搜索后匹配出的关键词（

  <mark>React</mark> 生态常用工具）</li><li>✅ 推荐：法律条文中被援引的关键条款（<code><mark>第37条</mark> 规定……）</li><li>❌ 避免：纯装饰性高亮（如标题副标、广告标语），应改用 <code>class="highlight"

  + CSS 控制
• ❌ 避免：动态 JS 插入大量 <mark> 后又频繁移除，会触发 DOM 重排，卡顿明显

<mark> 的默认样式和必须覆盖的 CSS 属性

浏览器对 <mark> 有默认背景色（通常是黄色），但这个颜色在暗色主题、高对比度模式或印刷场景下可能完全不可读。

• 必须设置 background-color，不能依赖默认值
• 必须配对设置 color，否则深色背景上文字发灰看不清
• 建议加 padding: 2px 4px，避免文字紧贴边缘
• 可选 border-radius: 3px，但别超过 4px，否则在小字号下圆角会吞掉文字
• 不要设 font-weight 或 font-size，它只是强调，不是结构层级变更

正则替换时容易踩的坑：转义 + 全局匹配 + 大小写

用 JS 动态插入 <mark> 时，如果直接拼接用户输入的关键词，keyword.replace(/abc/g, '...') 会崩在 +、.、( 这类正则元字符上。

• 必须先转义：用 keyword.replace(/[.*+?^${}()|[]]/g, '$&')
• 必须加 gi 标志：new RegExp(pattern, 'gi')，否则大小写不敏感就失效
• 避免跨文本节点匹配：一个 <p> 里含 <strong>，正则可能切开标签，导致 HTML 损坏
• 更稳妥的做法是用 TreeWalker 遍历纯文本节点，再对每个节点做 nodeValue 替换

比 <mark> 更现代的选择：CSS Custom Highlight API

如果你需要高亮但不想污染 DOM（比如编辑器里多人协作标注、PDF 渲染页内搜索结果），CSS Custom Highlight API 是目前唯一无侵入方案，但注意兼容性：

• Chrome / Edge 105+ 支持完整，Firefox 需开启 layout.css.highlight-api.enabled 标志
• Safari 完全不支持（截至 2026 年 4 月）
• 它不生成新元素，只靠 document.highlightRegistry.set() 和 ::highlight() 伪类联动
• 无法用 JS 直接获取高亮区域的 offsetTop 等布局信息，调试困难

真正难的从来不是“怎么加黄底”，而是判断“该不该加”、以及“加完之后别人还能不能顺畅阅读”。<mark> 是语义锚点，不是视觉开关。