如何从 url 检索 HTML 结构数据并使用 javascript 分析 DOM 特定数据

Question

我正在做一个 chrome 扩展。

此扩展将查询搜索引擎并以 HTML 表格格式获取每个关键字输出。

在获取到 HTML 文档后，JS 会分析 HTML DOM，并获取指定的数据，然后将数据显示在定义的选项卡中。

我研究过stackOverflow。

1. how can I retrieve an html document from a url from javascript? 这个，因为chrome扩展没有源问题，可以访问任何域。
2. How to scrape specific data from scrape with simple html dom parser 这个，我不用PHP写的。

我需要 JavaScript 解决方案。

经过2天的研究，我得到了一个使用jQuery解决这个问题的计划草案。

但我怀疑它是否是解决此问题的最佳解决方案。 希望专家有经验的建议。

问题是：

1) 使用Javascript请求一个url；
2) 使用 Javascript 获取响应数据并将数据保存到变量或某个临时文件中；
3) 使用 Javascript 从步骤 2 中检索特定数据，例如特定 tag_id 或类名标记元素。
4) 使用 Javascript 将数据写入 Chrome 浏览器中当前关注的网页标签。

提前致谢。

Answer 1

This jsFiddle 演示了如何从 url 获取一些数据并提取其中的一部分。这就是你要找的吗？

$.get('/').success(function(data){
    $(data).find('#home').appendTo('div');
});

Answer 2

你的意思是http://api.jquery.com/jQuery.get/

$.get("http://www.whatismyip.com/", function(response) {
     console.log ("Hey I found out " + $(response).find("#ip").text());
    });

这可能解决了 1) 2) 和 3) 如果您解决了 access-control-allow-origin 问题（可能是通过在您的服务器上安装一个代理来允许其 access-control-allow-origin 中的所有域。

至于 4）当您是 chrome 扩展程序时，您可以将任意 javascript 注入到任何加载的页面中，文档在这里http://code.google.com/chrome/extensions/tabs.html