JS是個神奇的語言,藉助Node.js的後端環境,我們可以進行相應的爬蟲開發,如這篇 基於Node.js實現一個小小的爬蟲 但搭建後臺環境始終略為麻煩,拿到一臺新電腦,不用配環境,可不可以直接在瀏覽器客戶端直接實現呢? 可以可以,這裡就簡單地說一下在瀏覽器客戶端實現的爬蟲抓取頁面數據 一、概念理解 ...
JS是個神奇的語言,藉助Node.js的後端環境,我們可以進行相應的爬蟲開發,如這篇 基於Node.js實現一個小小的爬蟲
但搭建後臺環境始終略為麻煩,拿到一臺新電腦,不用配環境,可不可以直接在瀏覽器客戶端直接實現呢?
可以可以,這裡就簡單地說一下在瀏覽器客戶端實現的爬蟲抓取頁面數據
一、概念理解
爬蟲,簡單地說就是發一個請求,然後按一定邏輯解析獲取到的數據。
在Node環境下,可以用Request模塊請求一個地址,得到返回信息,再用正則匹配數據,或者用Cheerio模塊包裝-方便定位相關的標簽項
在瀏覽器環境下,也類似,可以用標簽的src屬性或Ajax請求一個地址,得到返回信息,再用正則匹配數據,或者用jQuery模塊包裝-方便定位相關的標簽項
二、實現
實現的本質都是打開瀏覽器的開發者工具,寫一段JS代碼註入到頁面中,然後讓相關代碼自執行地址請求,再通過代碼處理返回的數據
打開Chrome瀏覽器的開發者工具,選擇面板中的 sources 部分,選擇二級菜單的 script snippets 部分,然後右鍵新建一個腳本,在右方輸入想註入的代碼
然後右鍵script snippets腳本運行(或者使用快捷鍵 Ctrl + Enter 運行)就可以開始註入,並可以在下方 console 部分看到相應的結果
註入JS代碼的方式是使用一個script標簽,定義src指向的腳本地址,或者在標簽中直接定義JS代碼
在瀏覽器端的爬蟲實現,這裡分為兩個方面:一個是處理純頁面的請求,一個是處理Ajax的非同步請求
1. 純頁面
要在當前頁面直接請求一個純頁面,我們可以用 iframe 標簽輔助,比如我想獲取博客園這個分類下的博文信息
找到這個頁面的鏈接 http://www.cnblogs.com/cate/108703/,這個博文標題對應的class為 .post_item
打開Chrome,在某個頁面中,打開開發者工具,在上述說的位置輸入這段代碼
var script = document.createElement('script'); script.type = 'text/javascript'; var iframe = document.createElement('iframe'); // 使用到了ES6的新字元串,方便看代碼 var script_code = ` var doc = document.getElementById('my_iframe').contentWindow.document; console.log($(doc).find('.post_item').length); `; // 插入代碼 function insertMyScript() { script.appendChild(document.createTextNode(script_code)); document.body.appendChild(script); } iframe.src = 'http://www.cnblogs.com/cate/108703/'; iframe.id = 'my_iframe'; iframe.onload = function() { insertMyScript(); }; document.body.appendChild(iframe);
代碼很簡單,直接先通過iframe的src載入需要的頁面,iframe的內容載入成功再插入進行數據解析的邏輯
預設開發者工具是不支持jQuery的,但假如當前頁面擁有jQuery,我們就可以直接使用了,如果沒有,可以先插入一段引用本地JQ庫的代碼
如此,已經可以解析到頁面內容
2. Ajax請求
Ajax的請求處理也類似
在分析頁面數據的獲取時,有時候會發現數據是通過Ajax的非同步JSON來獲取的,我們相應的也使用這種非同步方式
用原生的Ajax未免代碼量太多,可以直接藉助JQ的實現
比如這個頁面http://www.ciweishixi.com/forum/ins-407,評論數太多,進行了分頁。我們想找到包含某些關鍵字的頁,方便定位
這個頁面的分頁請求是非同步請求,所以註入代碼進行迴圈遍歷請求,解析返回的JSON數據即可
var script = document.createElement('script'); script.type = 'text/javascript'; var script_code = ` var url = 'http://www.ciweishixi.com/forum/comm-407-', keyWords = '廣州'; for (var i = 1; i < 200; ++i) { (function(_i) { $.ajax({ url: url + _i, type: 'post', success: function(re) { var str = 'Searching page ' + _i; if (re.indexOf(keyWords) !== -1) { str += ': found !'; } console.log(str); }, error: function(e) { console.log(e); } }); })(i); } `; script.appendChild(document.createTextNode(script_code)); document.body.appendChild(script);
至於這個錯亂的順序,是因為Ajax的非同步特點,想要按順序控制請求,可以加入一些Promise機制,或者用Generator生成器函數來實現一下即可
更多的用法自行去發掘吧