正則表達式：引用匹配模式的結果計數

Question

我在編輯大的html文件，並且需要將<span id="%d"></span>（其中%d是匹配數）插入到<p></p>標記中。

樣品輸入：

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

所需的輸出：

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

爲了匹配<p></p>我使用下面的正則表達式匹配的結果： <p>(.*?)<\/p>

之後，比賽是蘇用以下數值替代： <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>