javascript - 我如何突出显示 n 个序列字符串单词

Question

这是我的脚本，用于突出显示文本字符串中的特定单词，我唯一的问题是当我想突出显示三个序列单词时，它只突出显示第一个单词，然后第二个仍然没有突出显示，然后第三个突出显示

* 是一个 chop 并且运行良好

• 这是一个突出显示 n 序列词的示例:

var row = {
  "Abstract": "This reference is to serve test as a useful reference for testing whether the styling of reference works or not. Adtest all occurrences of 'reference' should be given a color of red tests" 
};

//here i need to highlighte "reference" "is" "to" "serve" "test*" (n sequnence words)

var wordsToHighlight = 'reference is to serve test*';
var result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  word = word.replace(/\*/g, '\\S*');
  result = result.replace(new RegExp('((?:\\s|^)' + word + '(?:\\s|$))', "g"),'<span style="color: red;">$1</span>');
});
document.querySelector("#result").innerHTML = result;

<div id="result"></div>

我的目标是高亮段落中的所有单词

正在寻找您的建议。

Answer 1

它只突出显示每个第二个单词的原因在于正则表达式和替换字符串。您的正则表达式匹配前后有空格的每个匹配项。

所以 <whitespace>word<whitespace>被替换为 <span style="color: red;">word</span> ，效果很好。

现在假设我们有 <whitespace>word<whitespace>word<whitespace> .第一次运行后我们有 <span style="color: red;">word</span>word .因为第二个 word 之前没有空格, 正则表达式无法匹配它。

一个简单的解决方案是用空格包围您的替换字符串，但这仍然会给我们留下 'reference'失败，但这是由于正则表达式本身。