如何用JavaScript正则表达式高效提取HTML中所有class为“template_content”且包含data-template属性的div标签及其内容？-html教程-PHP中文网

如何用JavaScript正则表达式高效提取HTML中所有class为“template_content”且包含data-template属性的div标签及其内容？

花韻仙語

发布： 2025-03-01 19:06:14

原创

483人浏览过

高效提取html中特定数据：javascript正则表达式应用

本文介绍如何利用JavaScript正则表达式，从HTML字符串中高效提取特定数据。我们将解决如何提取所有class为“template_content”且包含data-template属性的div标签及其内容。示例HTML如下：

<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正则表达式高效提取HTML中所有class为“template_content”且包含data-template属性的div标签及其内容？

解决方案：

使用JavaScript正则表达式实现这一目标。以下代码片段展示了如何提取data-template属性值和对应的div内容：

Lumen5

一个在线视频创建平台，AI将博客文章转换成视频

105

查看详情

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="...">结构，并使用两个捕获组分别提取<code>data-template属性值和div标签内的内容。然后，使用exec()方法循环查找所有匹配项，并将结果添加到data数组中。最后，console.log(data)输出提取的结果，这是一个二维数组，每个元素包含一个data-template属性值和其对应的div内容。请注意，此正则表达式假设div内容不包含<字符。对于更复杂的HTML结构，可能需要更复杂的正则表达式或使用DOM解析器。

立即学习“Java免费学习笔记（深入）”；

以上就是如何用JavaScript正则表达式高效提取HTML中所有class为“template_content”且包含data-template属性的div标签及其内容？的详细内容，更多请关注php中文网其它相关文章！