在windows高对比度模式、outlook邮件客户端及css重置环境下会失效，必须显式声明background-color和color；动态高亮需遍历文本节点并双重转义关键词；多词匹配须按长度降序处理；语义上仅用于上下文相关高亮，不可滥用且需适配深色模式与可访问性。
直接写 <mark></mark> 会失效的三种典型场景
别信浏览器默认黄色背景能稳定工作。Windows 高对比度模式下它被强制重置为纯黑；Outlook 邮件客户端忽略所有 UA 样式，<mark></mark> 变成透明；CSS 重置规则（比如 * { background: transparent }）会清空默认背景。这三类环境里，没显式样式就等于没高亮。
常见错误现象包括：<mark></mark> 在深色主题中变成黑底黑字、读屏器对高亮内容“静默无提示”、服务端渲染后前端 JS 二次包裹导致嵌套 <mark><mark>xxx</mark></mark>。
-
background-color和color必须同时声明，否则禁用 UA 样式的环境里文字可能消失 - 避免只写
background: none—— 它不会清空background-image，应写background-color: transparent -
padding和border-radius是刚需，原生<mark></mark>紧贴文字，边缘生硬易误读
动态高亮关键词必须遍历文本节点，不能碰 innerHTML
直接 el.innerHTML = el.innerHTML.replace() 会在三处翻车：用户搜 [a-z] 不转义正则元字符 → 报错中断；搜 <script>alert(1)</script> → XSS；原文含 <code>console.log() → 替换后撕开标签，DOM 解析失败。
- 正确路径是只操作纯文本节点（
node.nodeType === 3），跳过所有元素节点 - 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取全部文本节点 - 对每个节点调用
textContent.replace()，但匹配前必须双重转义：
HTML 转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)
正则转义：keyword.replace(/[.*+?^${}()|[\]]/g, '\$&') - 匹配后创建新节点：
const mark = document.createElement('mark'); mark.textContent = match;，再用node.parentNode.replaceChild(mark, node)
多关键词高亮要按长度降序处理，否则语义断裂
同时高亮 "JavaScript" 和 "Script" 时，若先匹配短词，会导致 <mark>Java<mark>Script</mark></mark> 这类非法嵌套。浏览器虽会自动修正为两个独立 <mark></mark>，但语义已断裂、CSS 样式错位、读屏器播报混乱。
- 解决方案很简单：把关键词数组按字符串长度从长到短排序后再遍历匹配
- 排序逻辑：
keywords.sort((a, b) => b.length - a.length) - 中文场景无天然词界，整段比对更稳妥，不依赖
\b锚点
<mark></mark> 的语义边界和可访问性硬约束
<mark></mark> 是唯一向读屏器传达“此处为上下文相关高亮”的语义标签，但它不是强调重要性，也不是语气变化。滥用在警告文案、按钮文字或广告标语上，会让辅助技术丢失真正需要聚焦的内容。
- 它只能包裹纯文本或其它行内元素（如
<em></em>、<a></a>），不能直接包<p></p>或<div> <li>深色模式必须手动适配：<code>@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 别只靠颜色区分：色觉障碍用户可能无法识别黄底，建议搭配轻微
box-shadow: inset 0 -2px 0 #007acc或加粗（注意行高）
