实现多关键词高亮需按语义区分匹配项：为各关键词绑定唯一css类，按长度降序匹配防嵌套，仅操作文本节点保dom结构，并对用户输入双重转义防xss与正则崩溃。

在前端搜索结果中用 <mark></mark> 实现多关键词高亮，关键不是“堆多个 mark”，而是**按语义区分匹配项、避免样式冲突、防止 DOM 错乱**。浏览器默认不区分不同关键词的高亮颜色，所以必须靠 CSS 类 + 正确匹配逻辑来实现视觉与语义的双重区分。

明确每个关键词对应独立 CSS 类

不要只用 <mark></mark> 原生标签，而是为不同关键词绑定唯一类名，比如：

• <mark class="mark-keyword-1">React</mark>
• <mark class="mark-keyword-2">TypeScript</mark>
• <mark class="mark-keyword-3">Vite</mark>

再配合 CSS 定义不同背景色和文字色，确保可访问性（如对比度 ≥ 4.5:1）：

mark.mark-keyword-1 { background-color: #4caf50; color: white; padding: 0.1em 0.25em; border-radius: 2px; }
mark.mark-keyword-2 { background-color: #2196f3; color: white; padding: 0.1em 0.25em; border-radius: 2px; }
mark.mark-keyword-3 { background-color: #ff9800; color: #212121; padding: 0.1em 0.25em; border-radius: 2px; }

按长度降序匹配，避免关键词嵌套或截断

如果用户搜了 “script” 和 “JavaScript”，必须先匹配长词 JavaScript，再匹配短词 script。否则正则可能把 JavaScript 拆成 Java<mark>script</mark>，破坏原意。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

推荐做法是：将关键词数组按字符串长度从长到短排序，再逐个执行安全替换。

只操作纯文本节点，不破坏 HTML 结构

直接对 innerHTML 用 replace() 会切开已有标签（比如把 <strong>JS</strong> 变成 <str>ong>JS</str>）。正确方式是：

• 用 TreeWalker 或递归遍历，只定位 nodeType === 3（文本节点）
• 对每个文本节点的 nodeValue 做关键词匹配
• 用 document.createElement('mark') 创建新节点，再用 splitText() 和 insertBefore() 插入，保持 DOM 完整

用户输入必须转义，防 XSS 和正则崩溃

关键词来自 URL 参数或搜索框时，必须做两层处理：

• 正则转义：防止 +、.、[ 等字符破坏 RegExp 构造 —— 用 keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')
• HTML 实体转义：防止 <script></script> 执行 —— 用 textContent 创建临时节点取 nodeValue，或手动转义 &、"、'、、<code>>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！