用RegEx来匹配带空格的短语

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));

这个regex就像 (^|\W)(Hello World|or)(?!\w) 并将匹配 Hello World 或 or 字为整字。由于你有特殊字，你需要 异体字 中的关键词，并使用 明确的字界, (^|\W) 和 (?!\w)，这需要特定的替换模式，即： $1<span...>$2</span>因为如果匹配的话，我们不想截断捕捉到的非字字符到组1中。如果您有两个 Hello World 和 Hello world 而你要先处理较长的关键词。