счет соответствует счету в строке, используя регулярное выражение

Question

Я пытаюсь выделить подходящие строки в div.Проблема, с которой здесь сталкиваются, заключается в том, что я должен выделять строку «счет» везде, где она встречается в строке.Но он совпадает со строкой «табло» и выделяет строку «табло».

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

Почему бы просто не сделать это простым?

Соответствует любому вхождению score:

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

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

span {
  background: yellow;
}

Соответствует любому вхождению score в окружении пробелов:

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

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

span {
  background: yellow;
}

Answer 2

Проблема в том, что вы не экранируете все символы \ в строке 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>