正则表达式匹配带有空格的短语

Question

我在字符串中有一个关键字数组：

var keywords = ["Hello World", "or"];

我有一行文字，例如：

var text = "Hello World, Hello World";

我正在使用 RegEx 在文本中查找要突出显示的关键字，以便生成的 html 为：

<span class="highlight">Hello World</span>, <span class="highlight">Hello World</span>

但是，我的 RegEx 结果返回给我：

[
 0: "or"                          ----------> shouldn't it be "Hello World"?
 index: 7
 input: "Hello World, Hello World"
]

这是我的代码：

function searchFn(text, keywords) {
  regex = new RegExp(keywords.join("|");
  return regex.exec(text);
}

var text = "Hello World, Hello World";
var keywords = ["Hello World", "or"];

searchFn(text, keywords);

我的 RegEx 错了吗？

Answer 1

您需要按长度降序对关键字进行排序，使用明确的单词边界，全局修饰符来匹配所有出现并在String#replace 方法中使用它，如下所示：

function searchFn(text, rx) {
  return text.replace(rx, '$1<span class="highlight">$2</span>');
}

var text = "Hello World, Hello World,Hello (World)!";
var keywords = ["Hello World", "or", "Hello (World)"];
var regex = new RegExp(
	"(^|\\W)(" + 
	keywords
		.map(function(z) { return z.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); })
	.sort(function(a, b) { return b.length - a.length; })
	.join("|") +
")(?!\\w)", "g");
console.log(searchFn(text, regex));

正则表达式看起来像 (^|\W)(Hello World|or)(?!\w) 并将匹配 Hello World 或 or 单词作为整个单词。由于有特殊字符，需要在关键字中使用escape special characters，并使用明确的词边界、(^|\W)和(?!\w)，这需要特定的替换模式，即$1<span...>$2</span>，因为如果匹配，我们不想截断捕获到组 1 中的非单词字符。如果您同时拥有 Hello World 和 Hello / world 并且您想首先处理较长的关键字，则必须进行排序。