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>被word取代，效果很好。

现在说我们有<whitespace>word<whitespace>word<whitespace>。第一次运行后，我们有wordword。由于在第二个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$2'：第一个$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>

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

2 个答案: