标签需配显式CSS、文本节点遍历和关键词转义才可靠：高对比度模式清空背景、Outlook忽略默认样式、全局重置规则覆盖背景色，必须声明background-color/color、padding/border-radius；动态高亮须遍历textNode、双重转义关键词、按长度降序匹配；服务端渲染后需清除旧mark；深色模式与ARIA属性不可少。
直接用 标签不会稳定高亮，必须配显式 CSS、文本节点遍历和关键词转义——否则在 Outlook、高对比度模式、深色主题或服务端渲染后全失效。
为什么
浏览器默认的黄色背景在三种常见场景下会彻底消失：Windows 高对比度模式强制清空所有 UA 背景；Outlook 邮件客户端忽略全部默认样式；项目里用了 * { background: transparent } 这类重置规则， 的 background-color 就被干掉了。
- 必须同时声明
background-color和color，否则禁用 UA 样式时文字可能变透明或黑底黑字 - 加
padding: 2px 4px和border-radius: 3px是刚需，原生紧贴文字，边缘生硬易误读 - 别写
background: none—— 它不等于清空背景色，应写background-color: transparent
动态关键词高亮必须遍历文本节点
用 innerHTML.replace() 替换关键词是高危操作：正则元字符未转义会报错；含 <script></script> 的搜索词触发 XSS；原文有 console.log()
- 只处理纯文本节点：
node.nodeType === 3，跳过所有元素节点 - 关键词要双重转义：HTML 实体转义（
[&"'`=/]→&）+ 正则转义（[.*+?^${}()|[\]]→\$&） - 匹配后创建新节点：
const mark = document.createElement('mark'); mark.textContent = match;，再用node.parentNode.replaceChild(mark, node)
多关键词高亮顺序不能错
同时高亮 "JavaScript" 和 "Script" 时，若先匹配短词，会导致嵌套 JavaScript。浏览器虽自动修正为两个独立 ，但语义断裂、CSS 样式错位、无障碍提示丢失。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 必须按关键词长度降序排序后再遍历，确保长词优先匹配
- 若关键词含 Unicode（如中文混英文），用
Intl.Collator排序更稳妥，避免字节序错乱 - 服务端渲染页面，前端 JS 再次高亮前，先清除已有
，防止嵌套残留
深色模式和可访问性不能漏
在深色主题下若只设黄色背景，极易变成黑底黄字甚至不可读；而屏幕阅读器对纯视觉高亮无感知，除非你补上 ARIA 属性。
- 用
@media (prefers-color-scheme: dark)单独定义深色模式下的background-color和color - 给每个
加role="mark"，并配合aria-label描述高亮意图（如aria-label="搜索关键词：React"） - 禁用动画过渡（
transition: none）—— 高亮是语义标记，不是动效，且部分辅助技术会忽略带 transition 的节点
最常被忽略的是：高亮不是“让字变黄”，而是“告诉用户这段文本为什么被挑出来”。关键词转义、节点遍历、语义属性、主题适配，缺一不可。写一行 就上线，等于把可访问性和跨环境兼容性全扔了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
