RegExは最初の一致の直後に2番目の一致を無視するのはなぜですか？

Question

私は文字列：'4 0 13 0 0 30 32 0 14 9 27 0 27 20 4 0 22 0'を持っています。 RegExで見つけたい値は、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>

クリックした後、あなたが値"30"前"0"に気づかない "REPLACE"：ここでは基本的なコードはありますか？私のRegEx は逃しましたこの値。これを修正するためにコードを変更するにはどうすればよいですか？

注：My RegEx Miss すべての値は最初の一致の直後に一致する必要があります。

Answer 1

あなたのregexは、数字の前と数字の後ろのスペースを一致させようとします。 2つの数字の間にスペースが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>

Answer 2

初めてあなたが一致して「0」、それは次のために使用することはできません、すぐので、それを次のスペースを消費します「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>