如何用JavaScript正则表达式高效提取HTML中指定div元素的属性值和内容？-html教程-PHP中文网

如何用JavaScript正则表达式高效提取HTML中指定div元素的属性值和内容？

聖光之護

发布： 2025-03-01 19:24:20

原创

413人浏览过

使用javascript正则表达式高效提取html中指定div元素属性值和内容

本文介绍如何利用JavaScript正则表达式从HTML字符串中提取特定div元素的属性值和内容。假设HTML包含多个<div class="template_content">元素，我们需要提取每个div元素的<code>data-template属性值及其内部HTML内容。

问题描述：我们需要从以下HTML字符串中，提取所有<div class="template_content">元素的<code>data-template属性值及其包含的内容：

<div class="template_content" data-template="template1">...</div><div>内容1aaa</div><div>内容1bbb</div>...
</div><h3>标题1</h3>
<div class="template_content" data-template="template2">内容2</div><h3>标题2</h3>
<div class="template_content" data-template="template3">内容3</div><h3>标题3</h3>
<div class="template_content" data-template="template4">内容4</div>

登录后复制

解决方案：JavaScript正则表达式可以高效解决此问题。以下代码演示如何使用正则表达式匹配并提取所需信息：

let html = '<div class="template_content" data-template="template1">...</div><div>内容1aaa</div><div>内容1bbb</div>...<h3>标题1</h3><div class="template_content" data-template="template2">内容2</div><h3>标题2</h3><div class="template_content" data-template="template3">内容3</div><h3>标题3</h3><div class="template_content" data-template="template4">内容4</div>';
let rule = /<div class="template_content" data-template="([^"]*)">([^<]*)<\/div>/g;
let data = [];
let match;
while ((match = rule.exec(html)) !== null) {
  data.push([match[1], match[2]]);
}
console.log(data);

登录后复制

这段代码首先定义了一个正则表达式rule，它匹配<div class="template_content" data-template="(.*?)">(.*?)</div>模式的字符串，并分别捕获data-template属性值和div元素的内部内容。这里使用了更精确的正则表达式，避免了不必要的匹配。然后，使用exec()方法循环查找所有匹配项，并将属性值和内容添加到data数组中。最后，console.log(data)打印出提取的结果。