在瀏覽器客戶端進(jìn)行爬蟲(chóng)開(kāi)發(fā)

JS是個(gè)神奇的語(yǔ)言，借助Node.js的后端環(huán)境，我們可以進(jìn)行相應(yīng)的爬蟲(chóng)開(kāi)發(fā)，如這篇 基于Node.js實(shí)現(xiàn)一個(gè)小小的爬蟲(chóng)

但搭建后臺(tái)環(huán)境始終略為麻煩，拿到一臺(tái)新電腦，不用配環(huán)境，可不可以直接在瀏覽器客戶端直接實(shí)現(xiàn)呢？

可以可以，這里就簡(jiǎn)單地說(shuō)一下在瀏覽器客戶端實(shí)現(xiàn)的爬蟲(chóng)抓取頁(yè)面數(shù)據(jù)

 

一、概念理解

爬蟲(chóng)，簡(jiǎn)單地說(shuō)就是發(fā)一個(gè)請(qǐng)求，然后按一定邏輯解析獲取到的數(shù)據(jù)。

在Node環(huán)境下，可以用Request模塊請(qǐng)求一個(gè)地址，得到返回信息，再用正則匹配數(shù)據(jù)，或者用Cheerio模塊包裝-方便定位相關(guān)的標(biāo)簽項(xiàng)

在瀏覽器環(huán)境下，也類似，可以用標(biāo)簽的src屬性或Ajax請(qǐng)求一個(gè)地址，得到返回信息，再用正則匹配數(shù)據(jù)，或者用jQuery模塊包裝-方便定位相關(guān)的標(biāo)簽項(xiàng)

 

二、實(shí)現(xiàn)

實(shí)現(xiàn)的本質(zhì)都是打開(kāi)瀏覽器的開(kāi)發(fā)者工具，寫(xiě)一段JS代碼注入到頁(yè)面中，然后讓相關(guān)代碼自執(zhí)行地址請(qǐng)求，再通過(guò)代碼處理返回的數(shù)據(jù)

打開(kāi)Chrome瀏覽器的開(kāi)發(fā)者工具，選擇面板中的 sources 部分，選擇二級(jí)菜單的 script snippets 部分，然后右鍵新建一個(gè)腳本，在右方輸入想注入的代碼

然后右鍵script snippets腳本運(yùn)行（或者使用快捷鍵 Ctrl + Enter 運(yùn)行）就可以開(kāi)始注入，并可以在下方 console 部分看到相應(yīng)的結(jié)果

注入JS代碼的方式是使用一個(gè)script標(biāo)簽，定義src指向的腳本地址，或者在標(biāo)簽中直接定義JS代碼

 

在瀏覽器端的爬蟲(chóng)實(shí)現(xiàn)，這里分為兩個(gè)方面：一個(gè)是處理純頁(yè)面的請(qǐng)求，一個(gè)是處理Ajax的異步請(qǐng)求