在瀏覽器客戶端進行爬蟲開發

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生成器函數來實現一下即可

 

 

更多的用法自行去發掘吧