JavaScript正则表达式匹配 div style标签

想要使用正则表达式来匹配HTML中的<div>、<style>标签，可以按照以下步骤进行：

1. 创建正则表达式对象

const regExp = /<div.*?>([\s\S]*?)<\/div>|<style.*?>([\s\S]*?)<\/style>/gi;

这个正则表达式使用了|符号来表示两种匹配方式，使用.*?来尽量少的匹配字符，使用[\s\S]*?来匹配包括换行符等在内的所有字符。

1. 对HTML字符串进行匹配

const htmlStr = '<div class="content">Hello World</div><style>body { background-color: white; }</style>';
const matches = htmlStr.match(regExp);
console.log(matches);

这里使用了String.prototype.match()函数来对HTML字符串进行正则匹配。输出结果如下：

[
  '<div class="content">Hello World</div>',
  '<style>body { background-color: white; }</style>'
]

1. 遍历匹配结果

for (const match of matches) {
  console.log(match);
}

这里遍历了两次匹配结果，输出结果如下：

<div class="content">Hello World</div>
<style>body { background-color: white; }</style>

下面是另一个示例：

const htmlStr = '<div class="content"><p>Hello World</p><a href="#">Click Here</a></div>';
const matches = htmlStr.match(regExp);
console.log(matches);

输出结果如下：

['<div class="content"><p>Hello World</p><a href="#">Click Here</a></div>']

这次只匹配到了一个<div>标签，而没有匹配到<style>标签。