本文讲解如何用 javascript 精确高亮字符串中**不连续出现的多个关键词**（如将 "from windows to linux" 中的 "from" 和 "linux" 同时高亮），关键在于将空格分隔的搜索词转换为支持 `|`（or）逻辑的正则表达式。
默认实现中，highlightSearchTerm("From Windows to Linux", "from linux") 失败，是因为原函数直接将 "from linux" 作为整体构造正则 /(from linux)/ig——它只匹配连续出现的短语，而非分别匹配 "from" 和 "linux" 两个独立词。
要支持跨位置多词高亮，需将搜索字符串预处理：将空格替换为正则中的 |（或运算符），并转义特殊字符以防正则注入。以下是优化后的健壮实现：
function highlightSearchTerm(string, substring) {
// 将空格分隔的关键词拆分为数组，逐个转义正则特殊字符
const terms = substring
.trim()
.split(/s+/)
.filter(term => term.length > 0)
.map(term => term.replace(/[.*+?^${}()|[]\]/g, '\$&')); // 转义正则元字符
// 构建形如 (word1|word2|word3) 的捕获组
const pattern = `(${terms.join('|')})`;
const regex = new RegExp(pattern, 'ig');
return string.replace(regex, '<mark>$1</mark>');
}
// ✅ 正确使用示例：
console.log(highlightSearchTerm("From Windows to Linux", "From Linux"));
// → "<mark>From</mark> Windows to <mark>Linux</mark>"
console.log(highlightSearchTerm("Hello world! Welcome to JS.", "hello js"));
// → "<mark>Hello</mark> world! Welcome to <mark>JS</mark>."⚠️ 注意事项：
- 该方案不依赖词序或相邻性，"Linux From" 和 "From Linux" 效果完全相同；
- 自动转义 .、*、(、| 等正则特殊字符，避免因用户输入（如 "C++ React"）导致语法错误；
- 若需支持完整单词匹配（避免匹配 "react" 中的 "act"），可将正则升级为 \b(${terms.join('|')})\b（ 表示单词边界）；
- 如需保留原始空格语义（例如匹配短语 "to Linux" 同时也支持单个词），建议扩展为混合模式（如用 , 分隔短语与单词），但本例以简洁通用性为优先。
总结：核心思想是把空格语义从“连接符”转变为“逻辑或”，借助正则 | 实现灵活、安全、高效的多关键词独立高亮。
立即学习“Java免费学习笔记（深入）”；
