标签必须显式设置background-color和color才能保障可访问性，否则在高对比度模式、Outlook邮件客户端及CSS重置后全部失效；动态高亮需遍历文本节点并双重转义关键词，多词匹配须按长度降序处理以避免语义断裂。
mark 标签不是“加个黄底”的快捷方式，不配 CSS 就上线，高亮在 Outlook、高对比度模式、CSS 重置后全失效。
为什么直接写 关键词 会失效
浏览器默认黄色背景在三种常见场景下完全不可见：Windows 高对比度模式 强制清空背景色；Outlook 邮件客户端 忽略所有 UA 样式；第三方 CSS 重置规则（如 * { background: transparent }）会抹掉默认样式。更隐蔽的问题是：mark > strong 里文字可能变黑（父级 color 覆盖子元素），深色主题下变成黑底黑字，可访问性直接归零。
必须同时声明 background-color 和 color，否则禁用 UA 样式的环境里文字可能消失；background: none 不等于清空背景——它不处理 background-image，应写 background-color: transparent。
动态高亮必须遍历文本节点，不能碰 innerHTML
直接 el.innerHTML = el.innerHTML.replace() 是线上事故高发操作：
- 用户搜
a.b?c，正则元字符未转义 →Invalid regular expression中断执行 - 搜
<script>alert(1)</script>→ XSS 漏洞 - 原文含
console.log()console.log()
正确做法是只操作纯文本节点：document.createTreeWalker(element, NodeFilter.SHOW_TEXT) 获取全部文本节点；对每个节点的 textContent 做匹配；关键词先双重转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)（HTML 转义） + .replace(/[.*+?^${}()|[]\]/g, '$&')（正则转义）；匹配后创建 document.createElement('mark')，设 textContent，再用 node.parentNode.replaceChild(markEl, node) 替换。
多关键词高亮要按长度降序处理
同时高亮 "JavaScript" 和 "Script" 时，若先匹配短词，会导致 JavaScript 这类非法嵌套。浏览器虽自动修正为两个独立 mark，但语义断裂、CSS 样式错位（比如圆角/内边距叠加异常），搜索结果页对盲人用户也“静默无提示”。
提取关键词后必须排序：Object.keys(tagColors).sort((a, b) => b.length - a.length)；处理顺序决定语义完整性，这不是性能优化，是语义保真刚需。
暗色模式和可访问性不能靠“顺带适配”
@media (prefers-color-scheme: dark) { mark { background-color: #ffcc00; color: #111; } } 必须显式写，不能指望默认值；mark 的语义价值在于被屏幕阅读器识别为“上下文相关标记”，但若颜色对比度低于 WCAG AA 标准（如 #ffcc00 在白底上对比度仅 1.4:1），视觉障碍用户仍无法识别。
容易被忽略的是：高亮后需调用 node.parentNode.normalize() 合并相邻文本节点，否则重复高亮或 DOM 结构膨胀；mark 不能替代 strong 或 em——它不表示重要性或语气，只表示“与当前上下文相关”，滥用会稀释语义信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
