使用正則表達式 匹配 HTML 標簽內的內容

使用正則表達式 匹配 HTML 標簽內的內容

正則表達式如下

/(?<=((<[a-zA-Z-]+?){0,1}>))([\s\S]+)(?=([\s]{0,1}<\/[a-zA-Z-]+(>{0,1})))/g

測試例子：

var regexp = /(?<=((<[a-zA-Z-]+?){0,1}>))([\s\S]+)(?=([\s]{0,1}<\/[a-zA-Z-]+(>{0,1})))/g

// （以下都是常見的格式化后的代碼）

// 例子1
var str1 = `<div>hello</div>`
console.log(str1.match(regexp))
// ['hello']

// 例子2
var str2 = `<div>
  hello
</div>`
console.log(str2.match(regexp))
// ['\n  hello\n']

// 例子3
var str3 = `<div
>hello</div>`
console.log(str3.match(regexp))
// ['hello']

// 例子4
var str4 = `<div
>hello</div
>`
console.log(str4.match(regexp))
// ['hello']

// 例子5
var str5 = `<div
  class="test"
  id="test"
  onClick="fns"
>
  hello
</div>`
console.log(str5.match(regexp))
// ['\n  hello\n']

介紹

其中，這個正則表達式分為三個部分

1. (?<=((<[a-zA-Z-]+?){0,1}>))
2. ([\s\S]+)
3. (?=([\s]{0,1}<\/[a-zA-Z-]+(>{0,1})))

第一部分用來匹配 開始標簽 或者 換行的開始標簽的最后一個字符 >
第二部分就是標簽內的內容
第三部分是標簽的 結束標簽 或者 </ 加 標簽名

第一部分 (?<=y)x 和第三部分 x(?=y) 用到了零寬斷言，感興趣的可以看這里正則表達式 零寬斷言

最后

vscode里面使用正則表達式搜索的話，可以把零寬斷言去掉，即：

(((<[a-zA-Z-]+?){0,1}>))([\s\S]+)(([\s]{0,1}<\/[a-zA-Z-]+(>{0,1})))