正则表达式：引用匹配模式的结果计数

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>