web-dev-qa-db-ja.com

jQueryを使用した単純な画面スクレイピング

私は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内に追加することは可能ですか？

javascriptjqueryscreen-scraping
41
Rion Williams

_$.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
          }
     }
});
_
35
Ry-
$.get("/path/to/other/page",function(data){
  $('#data').append($('li',data));
}
6
Fareesh Vijayarangam

これが同じドメイン用である場合、問題ありません-jQueryソリューションは良好です。

ただし、そうしないと、セキュリティリスクと見なされるため、任意のWebサイトのコンテンツにアクセスできません。 同じオリジンポリシー を参照してください。

もちろん、Webプロキシや CORSヘッダー などのサーバー側の回避策があります。運がよければ、彼らはjsonpをサポートします。

しかし、クライアント側のソリューションを任意のWebサイトとWebブラウザーで動作させたい場合は、運が悪いです。 このポリシーを緩和する提案 がありますが、これは現在のWebブラウザーには影響しません。

5
hoju

Pjscrapeを検討することもできます。

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

JavascriptとjQueryを使用して、コマンドラインからこれを行うことができます。これは、ヘッドレスWebキットブラウザーであるPhantomJSを使用してこれを行います（ウィンドウはなく、スクリプトの使用のためにのみ存在するため、AJAXを使用する複雑なWebサイトをロードできます。実際のブラウザであるかのように）。

例は自明であり、これはすべてのプラットフォーム（Windowsを含む）で機能すると考えています。

5
Camilo Martin

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

    } )

} );
4
shramee

YQLまたはYahooパイプを使用して、rawページhtmlコンテンツのクロスドメインリクエストを作成します。 yahooパイプまたはYQLクエリは、これをJSONとして吐き出し、jqueryで処理して必要なデータを抽出および表示できます。

マイナス面：YQLとYahooはターゲットドメインのrobots.txtファイルをパイプし、ページが長くなるとYahoo Pipesの正規表現コマンドは実行されません。

1
Skizz

多くの場合、リクエストで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);
});
0
Kurkula