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

时间:2014-07-17 21:00:41

标签: javascript html ajax

我试图编写一些JavaScript代码(特别是Chrome扩展程序),它执行以下操作:

  1. 通过AJAX检索一些网页内容。
  2. 通过查找HTML字符串中的某些元素并获取其内容,从该页面获取一些内容。
  3. 用这些数据做事。
  4. 我有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,而不适用于浏览器。

    有没有合理的方法可以做到这一点?

1 个答案:

答案 0 :(得分:3)

您可以使用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

您还可以查看DOMParserXMLHttpRequest

使用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