本文介绍如何使用 javascript 正则表达式，对源字符串中**不连续出现的多个关键词**（如 "windows linux"）进行独立高亮，生成 `` 包裹的 html，解决传统空格分隔匹配失败的问题。
要实现对非相邻关键词（例如 "From Windows to Linux" 中高亮 "Windows" 和 "Linux"）的灵活高亮，关键在于重构正则表达式逻辑：不能将搜索词当作完整短语匹配（如 /(Windows Linux)/i），而应将其拆解为多个独立可选的子模式，用正则中的 |（OR 操作符）连接。
原始函数的问题在于：
function highlightSearchTerm(string, substring) {
const regex = new RegExp(`(${substring})`, 'ig');
return string.replace(regex, '<mark>$1</mark>');
}当传入 "from linux" 时，正则实际为 /(from linux)/ig —— 它只匹配“from 后紧跟空格再跟 linux”的连续子串，而源文本中二者被“Windows to”隔开，自然无法命中。
✅ 正确做法是：将空格分隔的关键词转换为 | 分隔的正则分支，并对每个关键词做转义（防止特殊字符破坏正则结构），再整体包裹在非捕获组或括号中以支持 $1 引用。
立即学习“Java免费学习笔记（深入）”；
以下是增强版实现：
function highlightSearchTerm(string, substring) {
// 将空格分隔的关键词拆分为数组，逐个转义正则特殊字符
const terms = substring
.trim()
.split(/s+/)
.filter(term => term.length > 0)
.map(term => term.replace(/[.*+?^${}()|[]\]/g, '\$&')); // 转义正则元字符
// 构建形如 (word1|word2|word3) 的正则，启用全局 + 不区分大小写
const regex = new RegExp(`(${terms.join('|')})`, 'ig');
return string.replace(regex, '<mark>$1</mark>');
}
// ✅ 使用示例
console.log(highlightSearchTerm("From Windows to Linux", "Windows Linux"));
// → "From <mark>Windows</mark> to <mark>Linux</mark>"
console.log(highlightSearchTerm("From Windows to Linux", "from To linux"));
// → "<mark>From</mark> Windows <mark>to</mark> <mark>Linux</mark>"? 注意事项：
- 该方案默认忽略大小写（i 标志），且支持关键词间任意间隔（包括换行、标点、其他单词）；
- 若关键词本身含正则特殊字符（如 +, ., *, ( 等），replace(/[.*+?^${}()|[]\]/g, '\$&') 确保安全转义；
- 空格被视作分词符，不参与匹配逻辑 —— 因此 "from to" 会匹配 "From" 和 "to" 两个独立词，而非 "from to" 这一短语；
- 如需支持模糊匹配（如词干、前缀）、高亮重叠或避免嵌套标签（如 <mark>From</mark> <mark>from</mark>），需引入更复杂的 DOM 处理或使用 matchAll() + 手动插入逻辑。
总结：核心思想是「将多词搜索语义转化为正则中的逻辑或（|）」，配合恰当的转义与标志位，即可优雅支持跨位置关键词高亮，大幅提升文本搜索与展示的灵活性。
