js 提取 html内容

Question

let html = '<div class="template_content" data-template="template1">...<div>内容1aaa</div><div>内容1bbb</div>...</div><h3 style="color:#0676D3;background:url(/Views/gjp/images/h3t1.png) left center no-repeat;background-size:25px auto;padding-left:35px;line-height:40px">标题1</h3><div class="template_content" data-template="template2"><p>内容2</p></div><h3 style="color:#0676D3;background:url(/Views/gjp/images/h3t3.png) left center no-repeat;background-size:25px auto;padding-left:35px;line-height:40px">标题2</h3><div class="template_content" data-template="template3"><p>内容3</p></div><h3 style="color:#0676D3;background:url(/Views/gjp/images/h3t4.png) left center no-repeat;background-size:25px auto;padding-left:35px;line-height:40px">标题3</h3><div class="template_content" data-template="template4"><p>内容4</p></div>';

上面是原文件，我要实现的功能是提取

<div class="template_content" data-template="(提取内容1)">(提取内容2)</div>

有几组，就提取几组，对应的内容1和内容2

Answer 1

let html = '<div class="template_content" data-template="template1">...<div>内容1aaa</div><div>内容1bbb</div>...</div><h3 style="color:#0676D3;background:url(/Views/gjp/images/h3t1.png) left center no-repeat;background-size:25px auto;padding-left:35px;line-height:40px">标题1</h3><div class="template_content" data-template="template2"><p>内容2</p></div><h3 style="color:#0676D3;background:url(/Views/gjp/images/h3t3.png) left center no-repeat;background-size:25px auto;padding-left:35px;line-height:40px">标题2</h3><div class="template_content" data-template="template3"><p>内容3</p></div><h3 style="color:#0676D3;background:url(/Views/gjp/images/h3t4.png) left center no-repeat;background-size:25px auto;padding-left:35px;line-height:40px">标题3</h3><div class="template_content" data-template="template4"><p>内容4</p></div>';
let rule = '<div class="template_content" data-template="(.*?)">(.*?)<\/div>';
let data = html.match(new RegExp(rule,"g")).map(str=>{
    let data = str.match(new RegExp(rule));
    return [
        data[1],
        data[2]
    ]
});
console.log(data)

Answer 2

还可以用 DOM Parser

const parser = new DOMParser()
const el = parser.parseFromString(html, 'text/html')
const target = el.querySelectorAll('.template_content[data-template]')
const result = Array.from(target).map(el => [el.getAttribute('data-template'), el.textContent])

Answer 3

cheerio可以nodejs后段处理，
前端直接放到一个不插入的dom里面，用jquery不就行了？