我试图编写一些JavaScript代码(特别是Chrome扩展程序),它执行以下操作:
我有1)和3)工作,但我在以合理的方式完成步骤2)时遇到了一些麻烦。
我目前有2)通过jQuery(htmlString)
实现,然后使用普通的jQuery选择器等来提取我想要的数据。问题是jQuery实际上将检索到的HTML添加到当前页面,加载并执行流程中的所有外部资源/脚本。这显然很糟糕。
所以我正在寻找一种方法来获取HTML字符串中某些标签中的文本和HTML,而不是:
我相信我可以使用jsdom和jQuery实现我想要的,因为jsdom有一个FetchExternalResources
选项,可以设置为false
。但是,jsdom似乎只适用于NodeJS,而不适用于浏览器。
有没有合理的方法可以做到这一点?
答案 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);
});
上
您还可以查看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();
上