正規表現：パターン一致結果の参照数

Question

大きいhtmlファイルを編集中です。<p></p>タグに<span id="%d"></span>（一致する数字は%d）を挿入する必要があります。私は結果と一致するように、次の正規表現を使う<p></p>一致させるために

<p><span class="class" id="f=1">stack</p> 
<p><span class="class" id="f=2">overflow</p> 

：

サンプル入力：

<p>stack</p> 
<p>overflow</p> 

所望の出力その後 <p>(.*?)<\/p>

を、マッチはsuです次の文字で置換されます： <p><span class="class" id="f=???">$1</span></p>

パターンマッチの数は参考になりますか？ （ "F = ???"）

Answer 1

正規表現を使用してHTMLを解析することを推奨していない：

代わり

RegEx match open tags except XHTML self-contained tags

Using regular expressions to parse HTML: why not?

---

、コンテンツや更新にDOM要素を生成pタグ

var str = `<p>stack</p> 
 
<p>overflow</p>`; 
 

 
// generate a temporary div element 
 
var temp = document.createElement('div'); 
 
// set html content 
 
temp.innerHTML = str; 
 

 
// get all p tags and convert into array 
 
// for older browser use [].slice.call(.....) 
 
Array.from(temp.querySelectorAll('p')) 
 
    // iterate over the elements 
 
    .forEach(function(ele, i) { 
 
    // update the content 
 
    ele.innerHTML = '<span class="class" id="f=' + (i + 1) + '">' + ele.innerHTML + '</span>'; 
 
    }); 
 

 
// get the html content 
 
console.log(temp.innerHTML);

Answer 2

あなたはJavaScriptでその部分を行う必要があると思いますので、正規表現は、マッチをカウントすることはできません。

var input = "<p>stack</p>\n<p>overflow</p>" 
 

 
const regex = /<p>(.*?)<\/p>/g; 
 

 
var count = 0; 
 
var result = input.replace(regex, function(match, contents) { 
 
    ++count; 
 
    return '<p><span class="class" id="f=' + count + '">' + contents + '</span></p>'; 
 
}); 
 

 
console.log(result);

console.log(result)もたらすであろう：

<p><span class="class" id="f=1">stack</span></p> 
<p><span class="class" id="f=2">overflow</span></p>