javascript - 使用正则表达式仅通过 h1 标签拆分带有 html 的字符串

Question

我需要从通过 ajax 获取的字符串中仅检索 h1 标记。该字符串返回使用 file_get_contents 的 php 文件的整个页面。显示外国页面。

我完美地恢复了字符串，我想用 h1 标签拆分字符串。有没有办法返回一个只有 <h1> 的数组？标签？我正在使用我基于 underscore.js 编写的过滤器，但它实际上不起作用:

var h1 = toolbelt.filter(textArr, function(element){
        return element.search('<h1') !== -1;
      });

这确实带回了所有 <h1> 的数组标签，但只有标签，我想取回所有 h1 标签的数组以及内容示例输出:

['<h1>sample text here</h1>','<h1 id="someId">Some ID here in h1</h1>]

我需要能够使用纯 vanilla javascript 来完成此操作，因为它是针对不允许使用 underscore.js 以外的库的学校项目。

谢谢!

Answer 1

使用 DOMParser :

var someHTML = '<div><h1>First</h1></div><h1>Second</h1>';

var parser = new DOMParser();
var doc = parser.parseFromString(someHTML, 'text/html');

var output = Array.prototype.slice.call(
    doc.querySelectorAll('h1')
).map(el => el.outerHTML);

console.log(output); // ["<h1>First</h1>", "<h1>Second</h1>"]