影片連結：https://www.youtube.com/watch?v=jpZMmr7nHBs
YouTube 頻道：https://www.youtube.com/c/kaochenlong

在上一集，我們介紹了怎麼抓取比較有結構的資料，像是 JSON、RSS 格式。接下來這一集，我們要來處理比較沒有那麼有格式的東西 - HTML 網頁。

當網站沒有提供結構化資料怎麼辦？沒關係，我們就用 HTTP Request 把它抓回來之後，再來想辦法處理它。

基礎知識：認識 CSS Selector

在開始抓資料之前，我們得先認識一些名詞。

什麼是 HTML？

HTML 這個詞大家可能聽過，它就是網頁的標籤語言，就是我們開瀏覽器去看的網頁，只是平常你可能不會關注它長什麼樣子。

CSS Selector 是什麼？

在抓取網頁資料的時候，我們需要學一點點跟網頁有關係的技術，不用太多一點點就好！

因此有個專業名詞可能需要得學一下，叫做 CSS 選取器（CSS Selector）。CSS 選取器可以幫我們在網頁裡面去抓到資料，去挑選到我們要的那一段資料。

CSS 選取器其實很複雜，要學的東西也非常非常多。但沒關係，我們就抓幾個簡單的重點：

• 井字號（#）：如果你要抓的標籤有 id 的話，用井字號
• 點（.）：如果是用 class 的話，就用點

先記得就好！# 字號跟 .，id 用 # 字號，class 用 .。這個有什麼道理嗎？有啦，它有它的道理在，但我們這個系列不是要教大家怎麼寫 CSS 選取器的。

如果有興趣的話，各位可以到 YouTube 上面去搜尋我們的講師朋友 Amos，他在 YouTube 上面拍了一系列關於教怎麼樣去寫 HTML CSS 的影片叫做「金魚都能懂的網頁設計入門」，如果想要做前端、想要學 HTML 的話可以看一下，他的影片拍得蠻好的。

實作範例：抓取天瓏書局排行榜

來看看怎麼抓！我用我一個很常去的網站，天瓏書局，我想要知道說我的書在排行榜第幾名：

https://www.tenlong.com.tw/zh_tw/recent_bestselling?range=7

假設我想要抓到這一頁所有書的書名，例如什麼 Google Cloud、Ollama 這些書的書名，該怎麼辦？一般網站並不會提供 RSS，有的話就要心懷感謝，沒有也正常。以天瓏書局來說，它並沒有提供這樣的資料，那怎麼辦？

步驟 1：檢查網頁結構

首先，我們需要觀察網頁的結構。這是很多工程師都會做的事情，但我們沒有要當工程師，我只簡單教大家怎麼去看這個結構：

1. 在網頁上按右鍵
2. 選擇「檢查」
3. 會出現一個看起來有點像檢視原始碼的東西

這裡這麼多我怎麼看？我怎麼知道哪個是哪個？教各位一個技巧：

1. 在你想要的元素上按右鍵（例如某本書）
2. 選擇「檢查」這個選項
3. 它就會在開發者工具中亮起來

稍微滑鼠移動一點，你可以看到整個結構：

• single-book - 這大概就是一本書
• 這就是一個結構，這一排
• 往上看 ul 大概就是這整片
• 這整片都是書

再看仔細一點，在 single-book 裡面：

• 有個 title
• 裡面有個 a 標籤

所以結構變成是：在 single-book 裡面的 title 裡面的 a。

還記得剛才教的小秘訣嗎？如果是 class 的話用 .，所以 CSS 選取器大概這樣寫：

.single-book .title a

步驟 2：在 n8n 中建立工作流

1. 建立新工作流

   • 命名為「天瓏書局排行榜」

2. 加入手動觸發節點

   • 選擇「Trigger manually」

3. 加入 HTTP Request 節點

   • Method 選擇「GET」
   • 貼上天瓏書局的網址
   • 執行後會拿到一大坨 HTML（哇塞，這什麼東西！）

步驟 3：解析 HTML 資料

拿到這一坨 HTML 之後，然後呢？這坨根本就不像剛剛的 JSON，JSON 有很漂亮格式啊！這個沒有，所以這時候就要再處理一下：

1. 加入 HTML Extract 節點

   • 點擊加號，搜尋「HTML」
   • 會看到幾個選項，選擇「Extract HTML Content」（從 HTML 內容把東西摘出來）

2. 設定 CSS Selector

   • 在 CSS Selector 欄位填入：.single-book .title a
   • 給它一個名字，例如「books」
   • 執行，就能看到書名了！

但怎麼只有一筆？對，因為一開始這個寫法只會抓到一筆。如果要抓多筆的話：

• 把「Return Array」打開
• 再執行一次，就拿到 30 筆了！

其實我覺得這個名字命得不好，Array 這個東西是技術名詞，是一個陣列，這是工程師在講的東西，對新手不太友善。不過它的用途就是要把一堆東西拿回來，不只拿一個，只要符合的全部拿回來。

步驟 4：處理陣列資料

現在拿到的 30 筆資料全部放在同一個盒子裡面，如果想要逐筆處理怎麼辦？

1. 加入 Split Out 節點
   • 搜尋「array」
   • 選擇「Split Out」（把東西拆開）
   • 把 books 欄位拖拉到設定區
   • 執行後就變成 30 筆獨立的資料了！

步驟 5：過濾特定書籍

又來玩寶可夢遊戲了！假設我想知道目前這些書裡面，哪一本書跟 Python 有關：

1. 加入 Filter 節點
   • 拖拉書名欄位到條件設定區
   • 條件選擇「contains」（包含）
   • 值填入「Python」

注意大小寫！如果想要不管大小寫：

• 點擊「Add Option」
• 選擇「Ignore Case」
• 這樣大寫小寫都會符合

話說，以後看到 Add Option 的時候可以把它點開看一下，有時候會有些驚喜！

這樣就拿到書了！例如《為你自己學 Python》就在這個地方（置入一下）。

進階技巧：User Agent 設定

在抓資料的時候，有些事情得要注意一下。

注意事項 1：版權問題

雖然說網頁是公開的，例如天瓏書局的排行榜是公開的，每個人都可以上去看。但是不代表你可以隨便抓回來做別的事情，這是兩回事。

它讓你在網站上面去瀏覽是一回事，但如果你今天寫爬蟲、寫程式把資料抓回來另外去做其他用途，天瓏書局可能不會怎麼樣，但其他網站可能會告你侵權之類的。所以在使用上要很注意是不是有授權許可的問題，不然一個不小心可能會惹上官司。

注意事項 2：被擋的問題

這個比較少見，但我們之前上課的時候有同學遇到這情況：有些網站你開瀏覽器可以看，沒問題，但你用 n8n 去抓就抓不到。

我們的經驗是：有些網站的伺服器會去擋一些爬蟲，因為爬蟲太煩了。所以只要認為你是爬蟲，只要認為你不是瀏覽器，我就把你擋掉。有些網站的管理員會這麼做，為了避免一些不必要流量。

解決方法：設定 User Agent

如果我們很想要那個資料，而且也只是想要善意的利用，那要怎麼把它抓回來？一個比較簡單而且通常也有效的方法，就是設定 User Agent。

什麼是 User Agent？User Agent 是指每個瀏覽器的「名字」。我們設定 User Agent 的目的，就是希望可以告訴 n8n 裡的那顆藍色地球說：「你就是 Firefox、你就是 Chrome、你就是 Safari」，催眠它！

怎麼設定？

1. 找到 User Agent 字串

   • 搜尋「User Agent Chrome」
   • 會找到類似這樣的字串：

   Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
   

2. 在 n8n 中設定

   • 在 HTTP Request 節點點開
   • 找到「Send Headers」選項
   • 新增一個 Header：
     • Name: User-Agent
     • Value: 貼上剛才複製的字串

也就是說，我們可以假裝在 header 裡面塞一個 User Agent 說「我是 Chrome，你不要擋我」，通常這樣子就可以騙過去了。

流程總結

整個流程跟上一集其實差不多：

1. n8n 開始 → HTTP 請求 → HTML 解析 → 後續處理

差別只在於資料來源比較麻煩一點點，它並沒有提供一個好處理、直接可以處理的資料來源而已。

所以下次遇到這種沒有提供 JSON、沒有提供 RSS、沒有提供比較結構化資料的網站，但你又很想把它拿回來，可以試試看類似這樣的手法：

1. 找藍色地球開一個 HTTP 請求把它抓回來
2. 用 HTML 解析節點處理
3. 學一點點 CSS 選取器（.single-book .title 這種）

大概學怎麼樣去看你要的資料在哪一個結構的什麼地方，這應該不會很難的，可能就學一下下就可以了。

萬一學不會怎麼辦？其實你也可以把網頁貼給 AI，跟它說「你幫我找一下那個選取器在什麼地方」，有時候它會給你正確答案。

下集預告

這一集大概就到這個地方，下一集我們要來處理最麻煩的動態資料。這個是真的有點麻煩，我們可能還需要一些外掛的幫忙。