javascript - 在 JavaScript 中解析通过 AJAX 检索的 HTML

Question

我正在尝试编写一些执行以下操作的 JavaScript 代码(特别是 Chrome 扩展):

1. 通过 AJAX 检索某些网页的内容。
2. 通过定位 HTML 字符串内的某些元素并获取其内容，从该页面获取一些内容。
3. 利用这些数据做一些事情。

我已经完成了 1) 和 3) 的工作，但我在以合理的方式实现步骤 2) 时遇到了一些困难。

我目前有2)通过jQuery(htmlString)实现，然后使用普通的jQuery选择器等来提取我想要的数据。问题是 jQuery 实际上将检索到的 HTML 添加到当前页面，加载并执行进程中的所有外部资源/脚本。这显然是不好的。

所以我正在寻找一种方法来获取 HTML 字符串中某些标记中的文本和 HTML，而无需:

• 加载或执行 HTML 字符串中引用的任何脚本或资源(图像、CSS 等)。
• 尝试使用正则表达式删除外部资源，因为我们都知道当您 parse [X]HTML with regex 时会发生什么.

我相信我可以使用 jsdom 实现我想要的目标和 jQuery，因为 jsdom 有一个 FetchExternalResources 选项，可以将其设置为 false。然而，jsdom 似乎只能在 NodeJS 中工作，而不能在浏览器中工作。

有什么合理的方法可以做到这一点吗？

Answer 1

您可以使用document.implementation.createHTMLDocument

This is an experimental technology

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes

Feature         Chrome  Firefox (Gecko) Internet Explorer   Opera   SafariBasic support   (Yes)   4.0 (2.0) [1]   9.0                (Yes)    (Yes)[1] The title parameter has only been made option in Firefox 23.

Javascript

$.ajax("http://www.html5rocks.com/en/tutorials/").done(function (htmlString) {
    var doc = document.implementation.createHTMLDocument("");

    doc.write(htmlString);

    console.log(doc.getElementById('siteheader').textContent);
});

关于jsFiddle

您还可以查看DOMParser和 XMLHttpRequest

使用 XMLHttpRequest 的示例

XMLHttpRequest originally supported only XML parsing. HTML parsing support is a recent addition.

Feature Chrome  Firefox (Gecko) Internet Explorer   Opera   Safari (WebKit)Support 18      11              10                  ---     Not supported

Javascript

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    console.log(this.responseXML.getElementById('siteheader').textContent);
};

xhr.open("GET", "http://www.html5rocks.com/en/tutorials/");
xhr.responseType = "document";
xhr.send();

关于jsFiddle