Login
Web Scraper using jQuery & YQL

Web Scraper using jQuery & YQL

Hallo sobat kali ini saya akan share tips & trik yang mudah2an bermanfaat, yaitu membuat web scraping menggunakan jQuery alias client side tanpa server side seperti PHP cURL, Python dll cukup menggunakan code javascript saja. Menarik bukan.. hehe meskipun cara ini terbatas sob, karena tidak bisa menscraping url yang menggunakan method post.

Sebenarnya kita bisa saja sih cuma menggunakan perintah .load() atau ajax untuk menampilkan html dari suatu website, tapi itu hanya akan berjalan jika kita meload atau melakukan request ajax, .post, .get ke halaman website yang host/domain.y masih dalam satu kesatuan (host A meload halaman dari host A) jika host A meload halaman website dari host B maka tidak akan bisa mendapatkan respons data html.y dikarenakan origin policy. Jadi kita tidak akan bisa menscraper suatu website yang berbeda host jika hanya menggunakan .load() atau ajax terkecuali ada website yang settingan origin.y di set * (public).

Maka dari itu sekarang saya akan coba untuk mengatasi biar bisa scraping suatu website yang berbeda host menggunakan jQuery. Caranya sangat mudah dan simple yaitu dengan menggunakan bantuan YQL. YQL adalah singkatan dari Yahoo Query Language merupakan tool yang dipastikan akan dapat mempercepat penyelesaian pekerjaan pada web development dan 100% gratis. :D

Ok langsung saja berikut contoh script.y:

Mendapatkan DOM HTML

var user_agent = "#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36",
    url_target = "http://ibacor.com/blog";
		
$.get("https://query.yahooapis.com/v1/public/yql", {
    q: "SELECT content FROM data.headers WHERE url=\"" + url_target + "\" and ua=\"" + user_agent + "\"",
    format: "xml",
    env: "http://datatables.org/alltables.env"
}).done(function(xml) {
    var html = $(xml).find("content").text();
    alert(html);
			
    // etc ...
		
});

Jika sudah mendapatkan data dom HTML.y tinggal kita olah mau di apaian. Contoh:

Find title

var title = $(html).filter("title").text();
alert(title);

Find meta tag

var meta = $(html).filter('meta[name="description"]').attr("content");
alert(meta);

Find all image src

var image = $(html).find("img");
$(image).each(function() {
    alert(this.src);
});

Find by selector

var selector = $(html).find("div.post p").html();
alert(selector);

Full code


Demo scraping website BMKG