JavaScript 中实现跨单词高亮匹配的正则表达式技巧

聖光之護 2026-01-14 00:00:00 次阅读

本文讲解如何用 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, '$1');
}

// ✅ 正确使用示例：
console.log(highlightSearchTerm("From Windows to Linux", "From Linux"));
// → "From Windows to Linux"

console.log(highlightSearchTerm("Hello world! Welcome to JS.", "hello js"));
// → "Hello world! Welcome to JS."

⚠️ 注意事项：

该方案不依赖词序或相邻性，"Linux From" 和 "From Linux" 效果完全相同；
自动转义 .、*、(、| 等正则特殊字符，避免因用户输入（如 "C++ React"）导致语法错误；
若需支持完整单词匹配（避免匹配 "react" 中的 "act"），可将正则升级为 \\b(${terms.join('|')})\\b（\b 表示单词边界）；
如需保留原始空格语义（例如匹配短语 "to Linux" 同时也支持单个词），建议扩展为混合模式（如用 , 分隔短语与单词），但本例以简洁通用性为优先。

总结：核心思想是把空格语义从“连接符”转变为“逻辑或”，借助正则 | 实现灵活、安全、高效的多关键词独立高亮。