javascript - 如果正则表达式紧随第一个匹配之后，为什么会忽略第二个匹配？

Question

我有一个字符串:'4 0 13 0 0 30 32 0 14 9 27 0 27 20 4 0 22 0' 。我希望我的正则表达式找到的值包含在名为 targetValue 的变量中。 在这种情况下targetValue恰好等于 0我希望所有匹配项都替换为粗体文本。这是基本代码:

function startReplacing(){
  var targetValue = 0;
  var replacer = ' <b> ' + targetValue + ' </b> ';
  var re = new RegExp('\\s'+targetValue+'\\s','gi');

  var str = document.getElementById('string').innerHTML;
  str = str.replace(re, replacer);

  document.getElementById('string').innerHTML = str;
}

b{ font-size:125% }

<p id="string"> 4 0 13 0 0 30 32 0 14 9 27 0 27 20 4 0 22 0 </p>
<button onclick="startReplacing()">REPLACE</button>

点击“REPLACE”后，您是否注意到值“30”之前的“0”？我的正则表达式错过了这个值。如何更改代码来解决此问题？

注意:我的正则表达式遗漏了在第一次匹配后应立即匹配的所有值。

Answer 1

您的正则表达式尝试匹配数字之前和数字之后的空格。如果两个数字之间只有一个空格，则无法同时匹配它们。

我怀疑您根本不想匹配空格，而只需要检查是否没有其他数字。使用word boundary为此:

function startReplacing(){
  var targetValue = 0;
  var replacer = ' <b> ' + targetValue + ' </b> ';
  var re = new RegExp('\\b'+targetValue+'\\b','g');
//                     ^^^               ^^^

  var str = document.getElementById('string').innerHTML;
  str = str.replace(re, replacer);

  document.getElementById('string').innerHTML = str;
}

b{ font-size:125% }

<p id="string">4 0 13 0 0 30 32 0 14 9 27 0 27 20 4 0 22 0</p>
<!-- works without leading and trailing spaces even -->
<button onclick="startReplacing()">REPLACE</button>