目前 Medium 只有提供讀者一篇文章的大約閱讀時間資訊,但是對於作者而言他們更想知道自己這篇文章寫了多少字,這樣就能透過 Airtable 知道自己每篇文章/系列的文字產量;今天我們就來分析如何透過爬蟲計算出一篇文章的字數吧。
如果你對這個專案的起源感興趣,請參考:透過爬蟲讓 Airtable 管理你的 Medium 文章(上) — 遇到需求時的分析以及執行步驟
文章大綱:一、分析 Medium 網頁元素二、確認爬蟲能正確抓取目標文字三、設計字數統計的邏輯四、實測確認可完成文章字數統計五、未來展望
一、分析 Medium 網頁元素
為了提供爬蟲一個抓取文章的邏輯,我們要先了解 Medium 的網頁元素
STEP 1:按下 F12,了解文章會放在哪一個元素裡面
STEP 2: 分析文章中哪些 html tag 需要抓取
依據 Medium 文章的排版種類,以下是我們需要做字數統計的 tag:
- <h1>:大標題
- <h2>:小標題
- <p>:一般文字(包含粗體、斜體、連結)
- <span>:被包在 Block 裡面的文字(會被 html 的 pre tag 包住)
- <li>:列表的文字
- <figcaption>:照片的補充文字說明
二、確認爬蟲能正確抓取目標文字
如果你想培養完整爬蟲的程式能力,可以參考我在 IT邦幫忙鐵人賽的文章,本篇文章只單純提供演算法
STEP 1:在知道哪些網頁元素需要抓取後,我們就來嘗試看看能否抓到我們所希望的文字資訊
STEP 2:透過 console.log 的回饋,我們可以發現有一些資訊是不需要抓取的
STEP 3:分析 html 的組成將多餘的資訊過濾
只要在 span tag 抓取文字的地方先判斷其 parent 的元素即可過濾
三、設計字數統計的邏輯
STEP 1:文章抓下來的文字需要列入字數統計的有:中文、英文;其餘特殊字元不列入計算。
STEP 2:撰寫文字計算邏輯的 function
四、實測確認可完成文章字數統計
STEP 1:透過 console.log 印出列入計算的文字、計算出來的文字長度,確認是否與我們期望的相同
STEP 2:在 airtable 上面增加字數統計的爛位,將欄位的類型設定為number,確認匯入的資訊是否符合期望
五、未來展望
- 目前字數統計的功能只能給尚未爬蟲過的文章使用,故未來會考慮增加 update 舊文章資訊的 function
- 字數統計也許配合長條圖視覺話有更炫砲的效果,這塊也可以在考慮看看
完成的專案程式碼在這裡,歡迎有興趣的朋友自己動手玩玩看~
▶︎ 如果這篇文章有幫助到你1. 可以點擊下方「Follow」來追蹤我~
2. 可以對文章拍手讓我知道 👏🏻你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼▶︎ 如果你對工程師的職涯感到迷茫1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持,透過豐富的案例來重新檢視自己的職涯