正则实例 回溯匹配html标签

首先构造一个html文本

let str =
`/*<div>
<h1>123</h1>
<h2>234</h2>
<h2>error</h3>
<H2>345</H2>
</div>>*/`

然后去除首位的/**/

let str =
`/*<div>
<h1>123</h1>
<h2>234</h2>
<h2>error</h3>
<H2>345</H2>
</div>*/`

let pat = /^\/\*([^]+)\*\/$/
let res = str.match(pat)[1]
console.log(res)

众所周知，<h2>只能与</h2>匹配，不能<H2>与</H3>匹配， 按照常规的配置方式，显然是做不到的，这里需要用到回溯引用

通过\1引用第一个子表达式的内容，接着改造代码

let str =
`/*<div>
<h1>123</h1>
<h2>234</h2>
<h2>error</h3>
<H2>345</H2>
</div>*/`

let pat = /^\/\*([^]+)\*\/$/
let res = str.match(pat)[1]
let pat1 = /<[hH]([1-6])>([^]*?)<\/[hH]\1>/
// console.log(res)
let dd = res.match(pat1)
console.log(dd)


//-------------控制台结果------------------
0: "<h1>123</h1>"
1: "1"
2: "123"
groups: undefined
index: 6
input: "<div>↵<h1>123</h1>↵<h2>234</h2>↵<h2>error</h3>↵<H2>345</H2>↵</div>"

另外同样H与h需要区分大小写，同样适用回溯，前后一致

let str =
`/*<div>
<h1>123</h1>
<h2>234</h2>
<h2>error</h3>
<H2>345</H2>
</div>*/`

let pat = /^\/\*([^]+)\*\/$/
let res = str.match(pat)[1]
let pat1 = /<([hH])([1-6])>([^]*?)<\/\1\2>/g
// console.log(res)
let dd = res.match(pat1)
console.log(dd)

此时把匹配改为全局匹配，看效果

//-----------控制台输出--------------
0: "<h1>123</h1>"
1: "<h2>234</h2>"
2: "<H2>345</H2>"

更我们想象的一致，后面再把数组再次提取 数据，就OK啦

先溜了溜了，太困了