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

let 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>
`;

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);