使用 DOMParser 解析 HTML 字符串

我正在使用 WP Rest API 插件来访问来自WordPress博客的内容到Ionic 2应用程序中。WP Rest API 返回了文章内容的HTML字符串,这可能会使其难以处理。

首先,您会实例化一个新的 DOMParser 实例,然后通过 parseFromString() 传输到您的 HTML 字符串中,例如,我们将 HTML 字符串存储在名为 htmlContent 的变量中:

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

现在,parsedHtml是一个可以交互的DOM对象,让我们从中提取几点:

1// The src of the first image:
2let firstImg = parsedHtml.images[0].src;
3
4// The li elements of the second ul element:
5let liElements = parsedHtml.getElementsByTagName("ul")[1].children;

以 li 元素为第二个例子,让我们走得更远,并填充每个元素的内部 HTML 数组:

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

👉 DOMParser 仍然是实验性的,因此其实施可能发生变化,支持可能会受到限制。