score 使用正则表达式匹配字符串中的 scoreb

Question

我试图在 div 中突出显示匹配的字符串。这里遇到的问题是我应该在字符串中出现的任何地方突出显示字符串 'score' 。但它与字符串 'scoreboard' 匹配并突出显示 'scoreb' 字符串。

var res = $("#div").text();
console.log(res);

var regex = new RegExp("(^|\s)score(\s|<\/span>|$|,|\.)", "ig");

res = res.replace(regex, function(match) {
  match = match.replace(/^\s/g, "");
  match = match.replace(/\s$/g, "");
  return ' <span style="background-color:#bebef8;color:#000;">' + match + '</span> ';
});

console.log(res);
$("#div").html(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div" style="border:1px solid #000" contenteditable="true">
  The total score on the scoreboard is +3 points.
</div>

Answer 1

问题是因为您没有转义 RegExp 字符串中的所有 \ 个字符；你错过了最后两个：

var regex = new RegExp("(^|\s)score(\s|<\/span>|$|,|\.)", "ig");

另请注意，您可以通过使用 Regex 文字来完全避免对它们进行转义：

var regex = /(^|\s)score(\s|<\/span>|$|,|\.)/ig;

var res = $("#div").text();
var regex = /(^|\s)score(\s|<\/span>|$|,|\.)/ig;

res = res.replace(regex, function(match) {
  match = match.replace(/^\s/g, "");
  match = match.replace(/\s$/g, "");
  return ' <span style="background-color:#bebef8;color:#000;">' + match + '</span> ';
});
$("#div").html(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div" style="border:1px solid #000" contenteditable="true">
  The total score on the scoreboard is +3 points.
</div>

Answer 2

为什么不保持简单？

匹配 score 的任何出现：

const str = 'The total score on the scoreboard is +3 points.'

document.write(str.replace(/(score)/g, "<span></span>"))

span {
  background: yellow;
}

匹配任何被空格包围的 score 的出现：

const str = 'The total score on the scoreboard is +3 points.'

document.write(str.replace(/(\s+)(score)(\s+)/g, "<span></span>"))

span {
  background: yellow;
}

score 使用正则表达式匹配字符串中的 scoreb

score matches scoreb in string using regex

javascript

regex

jquery

highlight