本文介绍如何用 javascript 灵活高亮字符串中**不连续、非相邻的关键词**（如将 "from windows to linux" 中的 "from" 和 "linux" 同时高亮），核心在于正确构造支持多词“或匹配”的正则表达式，而非默认的完整短语匹配。
在实际开发中，搜索高亮功能常需支持用户输入多个关键词（如 "from linux"），并期望在原文中独立匹配每个词（无论是否相邻、顺序如何），而非仅匹配连在一起的子串。原始实现：
function highlightSearchTerm(string, substring) {
const regex = new RegExp(`(${substring})`, 'ig');
return string.replace(regex, '<mark>$1</mark>');
}调用 highlightSearchTerm("From Windows to Linux", "from linux") 会生成正则 /^(from linux)$/i，它试图匹配整个短语 "from linux"（含空格），而原文中 "from" 和 "linux" 被 "Windows to" 隔开，自然无法命中。
✅ 正确解法是将空格分隔的关键词转换为正则中的 |（OR）分隔符，即把 "from linux" → "from|linux"，从而生成 /^(from|linux)$/i —— 这样正则引擎会分别查找 "from" 或 "linux"，完全忽略它们在原文中的位置与顺序。
以下是健壮、可直接使用的增强版函数：
立即学习“Java免费学习笔记（深入）”；
function highlightSearchTerm(string, substring) {
// 将空格分隔的关键词转为正则 OR 表达式，并对特殊字符转义
const terms = substring
.trim()
.split(/s+/)
.filter(term => term.length > 0)
.map(term => term.replace(/[.*+?^${}()|[]\]/g, '\$&')); // 转义正则元字符
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 world"));
// → "<mark>Hello</mark> <mark>world</mark>! Welcome to <mark>JS</mark>."? 关键注意事项：
- 必须转义正则元字符：若搜索词含 ., *, +, ( 等（如 "C++ tutorial"），不转义会导致正则语法错误或意外匹配。上述代码使用 replace(/[.*+?^${}()|[]\]/g, '\$&') 安全转义。
- 空格处理：使用 split(/s+/) 而非 split(' ')，可兼容多个空格、制表符或换行符分隔的关键词。
- 大小写不敏感：'i' 标志确保 "FROM"、"Linux" 等大小写变体也能被匹配。
- 不支持短语匹配：本方案专注「单词级独立高亮」；如需同时支持 "windows to" 这类短语，需额外解析引号包裹内容（如 ""windows to" linux"），属于进阶需求，不在本文范围。
总结：跨词高亮的本质是语义匹配 → 正则逻辑转换。只要将用户输入的关键词列表转化为 term1|term2|term3 形式的正则分支，并做好安全转义，即可在任意文本中精准、高效、无序地高亮所有目标词汇。
