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

Question

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

* 它是一个截断并且运行良好

• 这是一个突出显示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' 失败，但这是由于正则表达式本身。

Answer 2

您应该将最后一个空白匹配组模式转换为非消耗模式，即正向前瞻：

result = result.replace(new RegExp('(\\s|^)(' + word + ')(?=\\s|$)', "g"),'$1<span style="color: red;">$2</span>');

例如，带有test 单词的模式看起来像/(\s|^)(test)(?=\s|$)/，并允许(\s|^) 匹配在上一次匹配中使用(?=\s|$) 测试的空格。

只有 2 个捕获组，因此替换应为 '$1<span style="color: red;">$2</span>'：第一个 $1 将插入前导空格（如果已捕获），$2 将插入匹配的单词。

见JSFiddle：

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"),'$1<span style="color: red;">$2</span>');
});
document.querySelector("#result").innerHTML = result;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>