使用DOMParser解析HTML字符串

我正在使用 WP Rest API 插件 将 WordPress 博客中的内容访问到 Ionic 2 应用程序中。 WP Rest API 会为帖子的内容返回一个 HTML 字符串，这可能会使其难以处理。 不过幸运的是，DOMParser Web API 可以轻松地将 html 字符串解析为完整的 DOM。

首先，您实例化一个新的 DOMParser 实例并使用 parseFromString() 将您的 HTML 字符串传递给它。 对于此示例，假设我们将 HTML 字符串存储在名为 htmlContent 的变量中：

let parser = new DOMParser();
let parsedHtml = parser.parseFromString(htmlContent, 'text/html');

现在 parsedHtml 是一个可以与之交互的 DOM 对象。 让我们从中提取一些东西：

// The src of the first image:
let firstImg = parsedHtml.images[0].src;

// The li elements of the second ul element:
let liElements = parsedHtml.getElementsByTagName("ul")[1].children;

以带有 li 元素的第二个示例为例，让我们更进一步，用每个元素的内部 HTML 填充一个数组：

let rawLiElements = parsedHtml.getElementsByTagName("ul")[1].children;
let liElements = [];

👉 DOMParser 仍处于试验阶段，因此其实现可能会发生变化，并且支持可能会受到限制。