使用 jQuery 进行简单的屏幕抓取答案

【问题标题】：Simple Screen Scraping using jQuery使用 jQuery 进行简单的屏幕抓取
【发布时间】：2011-08-05 18:56:36
【问题描述】：

我一直在尝试使用使用 jQuery 的简单屏幕抓取工具的想法，我想知道以下是否可行。

我有一个简单的 HTML 页面，并且正在尝试（如果可能的话）从另一个页面获取所有列表项的内容，如下所示：

主页：

<!-- jQuery -->
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON("[URL to other page]",
  function(data){

    //Iterate through the <li> inside of the URL's data
    $.each(data.items, function(item){
      $("<li/>").value().appendTo("#data");
    });

  });
});
</script>

<!-- HTML -->
<html>
    <body>
       <div id='data'></div>
    </body>
</html>

其他页面：

//Html
<body>
    <p><b>Items to Scrape</b></p>   
    <ul>
        <li>I want to scrape what is here</li>
        <li>and what is here</li>
        <li>and here as well</li>
        <li>and append it in the main page</li>
    </ul>
</body>

那么，是否可以使用 jQuery 从外部页面中提取所有列表项内容并将它们附加到 div 中？

【问题讨论】：

也可以用JavaScript获取当前页面的文字（不带标签）：stackoverflow.com/questions/5321739/…

标签： javascript jquery screen-scraping

【解决方案1】：

使用$.ajax 将另一个页面加载到变量中，然后创建一个临时元素并使用.html() 将内容设置为返回的值。循环遍历 nodeType 1 的元素的子元素并保留它们的第一个子元素的 nodeValues。如果外部页面不在您的 Web 服务器上，您需要使用您自己的 Web 服务器代理该文件。

类似这样的：

$.ajax({
     url: "/thePageToScrape.html",
     dataType: 'text',
     success: function(data) {
          var elements = $("<div>").html(data)[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
          for(var i = 0; i < elements.length; i++) {
               var theText = elements[i].firstChild.nodeValue;
               // Do something here
          }
     }
});

【讨论】：

您能否详细说明“代理文件”的含义？
@AdamYoungers：“代理文件”几乎是一个完整的描述。向您自己的服务器发出请求；让您自己的服务器从目标获取请求的页面。在 Nginx 中，它将是 proxy_pass。如果你想用 PHP 来做，你可以使用<?php echo file_get_contents($_GET['proxy']); ?>。
请确保将代理资源的 Content-Type 列入白名单；添加并检查指示 XHR 的自定义标头；避免制作开放代理；尽可能使用 CORS，并将代理放在不同的域中。

【解决方案2】：

$.get("/path/to/other/page",function(data){
  $('#data').append($('li',data));
}

【讨论】：

嗨@Fareesh 这两者有什么区别？ .append($('li',data)) 和 .append(data)

【解决方案3】：

如果这是针对同一个域，那么没问题 - jQuery 解决方案很好。

但是，否则您将无法访问任意网站的内容，因为这被认为存在安全风险。见same origin policy。

当然有服务器端的解决方法，例如 Web 代理或CORS headers。如果你幸运的话，他们会支持 jsonp。

但是，如果您希望客户端解决方案能够与任意网站和 Web 浏览器一起使用，那么您就不走运了。有一个proposal to relax this policy，但这不会影响当前的网络浏览器。

【讨论】：

访问域外内容的方法有很多。例如： • jsonp • 代理
同源策略在 Safari 和正确初始化的 Chrome 上不是问题
@LukeMcneice 你能解释一下 safari 和 chrome 中的同源策略吗？还有正确初始化是什么意思？
@hnovick - 我的帖子是针对任意网页的客户端解决方案。增加了对特定案例解决方案的确认。

【解决方案4】：

使用 YQL 或 Yahoo 管道对原始页面 html 内容进行跨域请求。 yahoo 管道或 YQL 查询会将其返回为 JSON，可由 jquery 处理以提取和显示所需的数据。

缺点：YQL 和 Yahoo 管道 OBEY 目标域的 robots.txt 文件如果页面太长，Yahoo Pipes 正则表达式命令将不会运行。

【讨论】：

【解决方案5】：

您可能需要考虑 pjscrape：

http://nrabinowitz.github.io/pjscrape/

它允许您使用 javascript 和 jQuery 从命令行执行此操作。它通过使用 PhantomJS 来做到这一点，这是一个无头 webkit 浏览器（它没有窗口，它只存在于您的脚本使用中，因此您可以加载使用 AJAX 的复杂网站，它就像一个真正的浏览器一样工作） .

这些示例一目了然，我相信这适用于所有平台（包括 Windows）。

【讨论】：

【解决方案6】：

使用 jQuery 进行简单的抓取...

// Get HTML from page
$.get( 'http://example.com/', function( html ) {

    // Loop through elements you want to scrape content from
    $(html).find("ul").find("li").each( function(){

        var text = $(this).text();
        // Do something with content

    } )

} );

【讨论】：

【解决方案7】：

我相信您在很多情况下都会遇到请求的 CORS 问题。来自 here 尝试解决 CORS 问题。

var name = "kk";
var url = "http://anyorigin.com/go?url=" + encodeURIComponent("https://www.yoursite.xyz/") + name + "&callback=?";
$.get(url, function(response) {
  console.log(response);
});

【讨论】：