<mark> 是语义化标签，表示需引起注意的文本，非纯视觉高亮；滥用损害无障碍与SEO；须防样式重置、XSS及嵌套块级元素问题。

mark 标签不是 CSS 高亮替代品，它有明确语义

<mark> 是 HTML5 的语义化标签，表示“文档中需要引起注意的文本”，比如搜索结果中的匹配词、引用中的强调部分。它默认浏览器样式是黄色背景，但这个样式可被覆盖——关键不是“怎么变黄”，而是“是否该用 <mark>”。滥用会导致无障碍问题（屏幕阅读器会读作“marked text”）和 SEO 语义污染。

• 适合场景：document.querySelector 搜索高亮、用户输入关键词匹配段落、法律条文中标注修订内容
• 不适合场景：纯视觉强调（如标题副标）、错误提示、按钮状态——该用 <strong>、<span class="highlight"> 或 ARIA 属性
• 默认样式在不同浏览器略有差异（Chrome 黄，Firefox 浅黄偏橙），不要依赖默认色值做设计判断

直接用 mark 标签时，样式容易被 CSS 重置覆盖

很多 CSS 重置库（如 Normalize.css、Tailwind 的 base styles）会清除 <mark> 的背景色。如果你写了 <mark>关键词</mark> 却没看到高亮，大概率是样式被干掉了。

• 检查开发者工具中 mark 元素的 computed background-color，常为 transparent 或继承父级
• 最简修复：加一行 CSS mark { background-color: #ff0; }（注意不是 !important，优先级足够）
• 若项目用 CSS-in-JS 或 Shadow DOM，<mark> 可能因作用域丢失样式，此时建议改用带 class 的 <span class="highlight">

动态插入 mark 标签时，正则替换要防 HTML 实体与边界问题

常见需求：把一段文本中所有 “React” 替换成 <mark>React</mark>。直接 str.replace(/React/g, '<mark>React</mark>') 会出错——原始文本若含 &、< 等字符，可能破坏结构；且 “Reactivity” 也会被误匹配。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 先对原始文本做 HTML 转义（如用 textContent 创建临时元素取 innerHTML），再替换，否则 XSS 风险
• 匹配加词边界：/React/g，避免匹配到单词内部
• 更安全做法：用 DOMParser 解析原文本，遍历文本节点，只在纯文本中查找替换，不碰已有标签
• 示例片段：

  const safeMark = (text, keyword) => {
    const escaped = text.replace(/[<>"&apos;&]/g, c => `&${{ '<': 'lt', '>': 'gt', '"': 'quot', '&apos;': '#39', '&': 'amp' }[c]};`);
    return escaped.replace(new RegExp(`\b${keyword}\b`, 'g'), '<mark>$&</mark>');
  };

mark 标签嵌套或包裹块级元素会触发 HTML 验证警告

<mark> 是**行内元素**（phrasing content），按规范不能直接包含 <p>、<div>、<h3> 等块级标签。虽然浏览器会自动容错渲染，但 W3C 验证器报错，SSR 渲染或某些解析器可能出问题。

立即学习“前端免费学习笔记（深入）”；

• 错误写法：<mark><p>这段文字</p></mark>
• 正确拆分：把 <mark> 放进每个段落内部，或用 CSS 类配合 <span> 实现跨段高亮逻辑
• 若必须语义化标记整段，考虑用 <aside role="note"> + 自定义样式，而非硬套 <mark>

实际用 <mark> 前，先问一句：这段高亮是“内容层面需要被标记”，还是“只是设计师想要个黄底”？前者用 <mark>，后者别碰它。