Question

我试图编写一些JavaScript代码（特别是Chrome扩展程序），它执行以下操作：

通过AJAX检索一些网页内容。
通过查找HTML字符串中的某些元素并获取其内容，从该页面获取一些内容。
用这些数据做事。

我有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

这是一项实验技术

因为这项技术   规范尚未稳定，请检查兼容性表   在各种浏览器中使用的正确前缀。还要注意   实验技术的语法和行为可能会发生变化   在规范更改的未来版本的浏览器中

Feature         Chrome  Firefox (Gecko) Internet Explorer   Opera   Safari
Basic 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最初仅支持XML解析。 HTML解析支持是最近的补充。

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

上

解析通过JavaScript中的AJAX检索的HTML

1 个答案: