应转义正则元字符后构造RegExp，合并多关键词为单正则匹配，避免innerHTML重复操作污染DOM；对含HTML内容先提取文本，复杂场景用Range API安全包裹；CSS需兼顾可访问性、打印及暗色模式。
用 innerHTML + 正则动态包裹关键词，但必须转义特殊字符
直接对 innerHTML 做 replace() 最快，但正则里的 .、?、*、(、) 等会破坏匹配。比如筛选 “C++” 或 “a?b”，不转义就报错或漏匹配。
实操建议：
- 写个
escapeRegExp()函数，把字符串中所有正则元字符用\转义 - 用
new RegExp(keyword, "gi")构造全局不区分大小写的正则 - 替换时用
"<mark>$&</mark>"包裹，别用innerHTML += ...拼接，否则会重复高亮 - 如果内容含 HTML 标签（如
<span></span>），先提取纯文本再操作，否则replace()可能污染标签结构
多个条件同时生效时，别用多次 replace() 串行处理
连续对同一段 HTML 执行 3 次 replace()，第二次会把第一次加的 <mark></mark> 当原文本再匹配，导致嵌套标签或样式错乱。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 把所有关键词合并成一个正则：
new RegExp("(keyword1|keyword2|keyword3)", "gi") - 在
replace()回调里判断$&是哪个词，再决定是否高亮（比如只高亮完全匹配，忽略子串） - 如果需要不同颜色区分条件，用
data-keyword属性标记：<mark data-keyword="react">React</mark>，后续靠 CSS 控制
用 textContent 和 Range API 更安全，适合复杂 DOM
当筛选区域包含表单、图片、第三方组件时，直接改 innerHTML 可能重置输入框值或销毁事件监听器。
这时该换方案：
- 用
node.textContent获取原始文本，避免 HTML 干扰 - 用
document.createRange()和range.selectNodeContents()定位文本节点 - 遍历所有文本节点，对每个节点内容做关键词查找，用
range.surroundContents()包裹匹配段落 - 注意：
surroundContents()要求范围不能跨元素边界，得先拆分文本节点（splitText()）再包裹
CSS 高亮别只用 background-color，要考虑可访问性和阅读体验
<mark></mark> 默认样式在某些浏览器里对比度低，色弱用户看不清，打印时还可能消失。
稳妥写法：
- 显式定义
mark { background-color: #ffeb3b; color: #212121; padding: 0 2px; } - 加
box-decoration-break: clone防止换行时高亮断裂 - 用
@media print { mark { background: yellow; color: black; } }保证打印可用 - 如果页面开了暗色模式，补充
@media (prefers-color-scheme: dark) { mark { background-color: #333; } }
