想來爬網頁:使用Node.js與cheerio爬??

這次要來說使用Node.js要怎麼爬蟲,以爬凱基銀行做為示範,來爬爬凱基銀行裡的公開資訊,將連結和文字都爬下來。


Node.js常使用到的工具有哪些?

nodejs有一個特別的套件管理工具叫做npm ,npm 全名為Node Package Manager

npm可以讓我們使用的Node.js,直接、擴充線上的第三方套件庫。

這次我們爬蟲用到需要npm的工具有:

Request: 是用來訪問網站用的,它能模擬 Client 訪問網站,作為撈取網頁資料的請求方式可以把整個網頁的 HTML 抓取下來(But github已經停止更新,所以改用Fetch)

Cherrio: cheerio 就等同於 jquery 一樣可以做標籤的擷取,只是寫法有一些不同。

Fetch:抓取資料或者串接 API

fs: node.js的檔案管理器,負責檔案讀取與寫入, 刪除檔案, 更改檔名, 查詢目錄或連結等功能全都包在裡面

在編譯器裡匯入:

npm install node-fetch
npm install cheerio

如何開始?

首先,先把我們需要的工具寫好:

const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
const cheerio = require('cheerio');
const fs = require('fs')

怎麼使用工具?

先找好目標網址'https://www.kgibank.com.tw/zh-tw/about-us/legal-disclaimer-and-announcement-info'

使用fetch把目標網主內容抓下來,將目標網址寫進fetch中

再使用.text(),將抓下來的資料變成文字檔

最後用fs存入成html(不一定要存,如果對方網站爬起來感覺怪怪的,再把它存下來)

const response = await fetch('https://www.kgibank.com.tw/zh-tw/about-us/legal-disclaimer-and-announcement-info');
const body = await response.text(); //body:內容
fs.writeFileSync('test.html', body)

怎麼選到我指定的內容?

這部分跟css seletor相似,使用cheerio.load(),這樣我們就可以爬全部的內容了

之後如果要爬只要輸入$(selector想選的範圍)就可以選中了,其實之後寫起來有點像query,都是用$(.)

const $ = cheerio.load(body);
const items = $('[data-section="Jumper5"] > div:nth-last-of-type(1) div.download-group__all.mt-48.mt-lg-72 > div.container.pb-lg-0 > div a') 

選完了,要怎麼輸出?

因為我們現在抓取的範圍有點像queryselectAll可能選到1個以上的內容,所以我們可以使用一個迴圈將我們要的東西一一印出。

>

值得注意的是,如果我們想爬html裡的屬性,可以使用attr('指定屬性'),就可以選到該屬性

for (const item of items) {
        const link = $(item).attr('href')//返回屬性值的href
        const title = $(item).find('.kgisStatic024__item-title').text().trim() //返回這裡面的text
        console.log(`<a href="https://www.kgibank.com.tw${link}">${title}</a>`)//輸出,看看使否選中想要的
}

這樣就成功選到想要的所有部分囉

當然後續也可以再用fs將我們爬到的資料存下來。