mark是唯一语义正确、可访问且被原生支持的高亮方案；但仅用标签不加css会因高对比度模式、邮件客户端或全局样式重置导致文字不可见，必须显式声明background-color和color。
mark 是唯一语义正确、可访问、且被现代浏览器原生支持的文字突出显示方案；其他标签如 span + CSS 或 strong 都无法传达“上下文相关高亮”的语义，也不被屏幕阅读器识别为标记行为。
为什么不能只写 <mark>文本</mark> 就完事？
直接使用 mark 标签但不加 CSS，在真实环境中极易失效：
– Windows 高对比度模式下，UA 默认黄色背景被强制重置为纯黑，文字可能完全不可见；
– Outlook 等邮件客户端忽略所有 UA 样式，mark 变成无样式普通文本；
– 项目中若存在全局 * { background: transparent } 重置规则，mark 的背景色会被清空，只剩文字“悬空”。
必须显式声明 background-color 和 color，否则在禁用 UA 样式的环境里，文字可能因继承父级透明背景或错误颜色而消失。
如何安全地高亮用户输入的搜索词？
常见错误是直接对 innerHTML 做正则替换：el.innerHTML = el.innerHTML.replace(/keyword/g, '<mark>$&</mark>')。这会在三处崩坏：
– 用户搜 a.b?c，未转义正则元字符 → RegExp 构造失败报错；
– 用户搜 <script>alert(1)</script> → XSS 注入；
– 原文含 <code>console.log() → 替换后变成 <code>console.<mark>log</mark>()，DOM 解析撕裂。
正确做法是只操作文本节点：
– 用 document.createTreeWalker(element, NodeFilter.SHOW_TEXT) 获取全部纯文本节点；
– 对每个节点的 textContent 执行匹配，关键词需双重转义：先 HTML 转义（keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)），再正则转义（.replace(/[.*+?^${}()|[]\]/g, '$&')）；
– 匹配后调用 document.createElement('mark') 创建新节点，设 textContent，再用 node.parentNode.replaceChild(mark, node) 替换原节点。
多关键词高亮时，为什么顺序很重要？
同时高亮 "JavaScript" 和 "Script" 时，若按数组原始顺序处理，短词会先被匹配，导致嵌套污染：<mark>Java<mark>Script</mark></mark>。虽然浏览器会自动展平为两个独立 mark，但语义已断裂——读屏器播报混乱，CSS :nth-child 选择器错位，深色模式适配失效。
解决方案极简：
– 将关键词数组按长度降序排列：keywords.sort((a, b) => b.length - a.length)；
– 再逐个遍历匹配；
– 中文场景同理，如同时匹配 "人工智能" 和 "智能"，必须先处理四字词。
真正稳定的高亮不是“加个黄底”，而是把 mark 当作语义容器、把文本节点遍历当作操作边界、把关键词转义当作安全前提——漏掉任一环，上线后都可能在某个用户设备上彻底失焦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
