Regexがすべての発生と一致していません

Question

テンプレートのリテラル内ですべての出現を<% anything %>と一致させようとしています。 正規表現の設定は次のようになります。私のテンプレートは、この

`<div class="tile"> 
     <span><%ENTRY_NUMBER%></span> 
     <span><%NAME%> , <%CLASS%> , <%GENDER%> , <%AGE%></span> 
</div>` 

のように見える場合

process(template : string , data: Object) { 
    let re = /<%([^%>]+)?%>/g, match; 
    while (match = re.exec(template)) { 
     template = template.replace(match[0], data[match[1]]); 
    } 
    return template; 
} 

それはその後、別の出現を選んでおくだけで罰金最初の出現と一致します。 htmlタグ内に1つのマッチがある場合はうまく動作しますが、2番目のspan要素のような倍数を使用すると、別のオカレンスが欠けてしまいます。私はそれが<と>と関係があると思います。

以下のようにコンマの代わりに<>でこれらのオカレンスを区切っても問題ありません。

<span><%NAME%> <> <%CLASS%> <> <%GENDER%> <> <%AGE%></span> 

結果、この

<span> john <> biology <> male <> 17 </span> 

ように私は正規表現を複数回調べたが、無駄にしています。

Answer 1

問題は、re.lastIndex店templateの前の値の正しいではありませんが、あなたはtemplate値を変更するのでre.lastIndexが変更された文字列のために、もはや正しい値。 、

let template = `<%ENTRY_NUMBER%><%NAME%><%CLASS%><%GENDER%><%AGE%>`; 
 
let re = /<%(.+?)%>/g, match; 
 
let data = { 'NAME':'John', 'CLASS':'A3', 'GENDER':'Male', 'AGE':'19' }; 
 
while (match = re.exec(template)) { 
 
    console.log(re.lastIndex); 
 
    template = template.replace(match[0], data[match[1]]); 
 
    console.log(template); 
 
} 
 
console.log(template); 
 

 
// Iteration 1: re.lastIndex = 16 
 
// undefined<%NAME%><%CLASS%><%GENDER%><%AGE%> 
 
// Index is now between <%NAME% and > -> this match will be skipped 
 
// and so on...

したがって、彼らが発見されたら、すべての一致が置き換えられてしまいますので、交換するコールバックの内側にその場で文字列を変更した方がよい：

は、以下の簡単な例を参照してください。検索する場所のインデックスをトラッキングする必要はありません。

使用

process(template : string , data: Object) { 
    return template.replace(/<%(.+?)%>/g, function($0, $1) { 
       return data[$1] ? data[$1] : $0; 
      }); 
} 

注<%(.+?)%>試合<%こと、そしてできるだけ少ないとしてグループ1に、改行文字以外の任意の1つの以上の文字をキャプチャして、%>と一致します。このようにして、%と>を含む値も一致させます（dataにそのようなキーが含まれている場合は重要です）。

Answer 2

問題が一致しなくなるまで、何度も繰り返し表現を再実行becuaseあなたはグローバルフラグgを必要としないですが、複数行フラグm

let s = `<div class="tile"> 
 
     <span><%ENTRY_NUMBER%></span> 
 
     <span><%NAME%> , <%CLASS%> , <%GENDER%> , <%AGE%></span> 
 
</div>`; 
 
const re = /<%([^\%]+)?%>/, 
 
    data = { 
 
    ENTRY_NUMBER: '1977', 
 
    NAME: 'Blue', 
 
    CLASS: 'Vertebrates', 
 
    GENDER: 'Male', 
 
    AGE: '40' 
 
    }; 
 

 

 
let k = 0; 
 
while (re.test(s) && k++ < 1000) { 
 
    match = re.exec(s); 
 
    if (match) s = s.replace(match[0], data[match[1]]); 
 
} 
 
console.log(s);