如何从HTML字符串中提取特定div元素的data-template属性值及其内容？

高效提取html字符串中的特定数据

本文介绍如何从一段HTML字符串中提取特定结构的数据。假设HTML包含多个<div>元素，每个元素都具有<code>class="template_content"和data-template属性。我们的目标是从这段HTML中提取这些<div>元素的<code>data-template属性值及其内容。

例如，我们有如下HTML字符串：

<div class="template_content" data-template="template1">
  ...<div>内容1aaa</div><div>内容1bbb</div>...
</div>
<h3>标题1</h3>
<div class="template_content" data-template="template2">
  <p>内容2</p>
</div>
<h3>标题2</h3>
<div class="template_content" data-template="template3">
  <p>内容3</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
<h3>标题3</h3>
<div class="template_content" data-template="template4">
  <p>内容4</p>
</div>

我们需要提取以下格式的数据：

{ "data-template": "(提取内容1)", "content": "(提取内容2)" }

其中，“提取内容1”对应data-template属性值，“提取内容2”对应<div>标签包含的内容。 <p>虽然可以使用正则表达式，但为了更稳健地处理HTML内容，建议使用DOM解析器。以下JavaScript代码演示了如何使用DOMParser实现这一目标：</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/942"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679998863788.png" alt="Operator"> </a> <div class="aritcle_card_info"> <a href="/ai/942">Operator</a> <p>OpenAI推出的AI智能体工具</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Operator"> <span>231</span> </div> </div> <a href="/ai/942" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Operator"> </a> </div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">let html = ` &lt;div class=&quot;template_content&quot; data-template=&quot;template1&quot;&gt; ...&lt;div&gt;内容1aaa&lt;/div&gt;&lt;div&gt;内容1bbb&lt;/div&gt;... &lt;/div&gt; &lt;h3&gt;标题1&lt;/h3&gt; &lt;div class=&quot;template_content&quot; data-template=&quot;template2&quot;&gt; &lt;p&gt;内容2&lt;/p&gt; &lt;/div&gt; &lt;h3&gt;标题2&lt;/h3&gt; &lt;div class=&quot;template_content&quot; data-template=&quot;template3&quot;&gt; &lt;p&gt;内容3&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;/div&gt; &lt;h3&gt;标题3&lt;/h3&gt; &lt;div class=&quot;template_content&quot; data-template=&quot;template4&quot;&gt; &lt;p&gt;内容4&lt;/p&gt; &lt;/div&gt; `; const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const divs = doc.querySelectorAll('div.template_content'); const extractedData = []; divs.forEach(div => { const template = div.getAttribute('data-template'); const content = div.innerHTML; extractedData.push({ "data-template": template, "content": content }); }); console.log(extractedData);</pre>