閱讀文字大概需要 5 分鐘。
JS 都是大豬蹄子
昨天讀者群有位水友發了這麼一條訊息，說這樣的網站頁面資訊要如何提取 td 的內容，聊天截圖顯現的頁面是在瀏覽器上看到的程式碼。
那時候我剛下班，日常水下群。然後看到這條訊息，心裡就想這個簡單啊，寫個 xpath、寫個 bs4、寫個正則匹配下，輕輕鬆鬆就可以獲取到，然而事情並沒有想象中的那麼簡單。
隨後水友就提到了關鍵資訊：當水友實際用 Python 請求時，返回的內容卻是 JS 程式碼。
我明明在瀏覽器上看到的是一個個很有層次的貌美如花的小姐姐 HTML 程式碼，怎麼用程式碼請求就成了晦澀難懂的大豬蹄子 JS 程式碼啊？我要小姐姐！
一時間水友不知所措，怎麼提取也提取不到自己想要的內容。隨後群裡有些水友提出要不用 bs4 試試，或者用正則匹配，各有說辭，聊的不亦悅乎。
身為爬蟲老司機的我，爬過的網站雖然沒有成千，但至少也快上百了，大大小小的坑基本都遇到過。當我接到一個新的爬蟲任務時，首選第一步就是分析下網頁資料請求的流程。很多時候會有很簡單的辦法就可以獲取到網頁的資料。
所以在水友找到我的時候，我首先看下網站長的什麼樣子，水友需要的資訊是各大區的名稱。
網站地址：
https://xyq.cbg.163.com/
第一眼看到這個網站，心裡的印象是這個網站結構不復雜，資訊不難提取。但因為有了之前群裡訊息的鋪墊，我就懂了這個網頁是 JS 程式碼渲染出來的。
JS 渲染網頁
JS 渲染網頁是爬蟲裡很常見的一種網頁型別，這類的網站有個特點，即如果你不是帶有瀏覽器環境資訊進行請求，伺服器是不會把正確的資料返回給你。普通的請求只能獲取到大豬蹄子 JS 程式碼，晦澀又難懂。
針對這種情況，你想要看到小姐姐真正的盛世美顏，有兩種辦法，1 利用 selenium 自動化框架，2 解析具體的 JS 程式碼。
selenium 就像一個彪形大漢，直接模擬一個真實的瀏覽器環境，簡單粗暴的就可以獲取到真實的資料，跟真正的瀏覽器發生請求是一樣的。但這樣的粗暴方式帶來的後果就是效率非常低下。
所以我們可以嘗試第二種方法：通過解析具體的 JS 程式碼，出淤泥而不染的輕輕的看到小姐姐的容顏。
隨後我熟練的開啟瀏覽器控制檯，檢視了下網頁請求的過程，把具體的 JS 請求部分找出來。大致看了下所有的 JS 檔案，找到了一個名為 server_list_data.js 檔案，這個檔案中有個 list_data 欄位，非常有可能是儲存了一些資料。所以我點開這個檔案進行具體的檢視。
果不其然在這個檔案中看到了很多 unicode 編碼的內容，隨後我再找了一個編碼轉換網站進行驗證。
這些 unicode 編碼正是網頁上顯示的內容，接下來我們要做的就是用程式請求下這個 JS 連結，解析下返回的內容，把 unicode 碼轉換成中文即可。
程式程式碼
import requests
import re
def parse_js():
url = "https://cbg-xyq.res.netease.com/js/server_list_data.js"
headers = {"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"}
html = requests.get(url, headers=headers)
patten = re.compile(r"(.*)var server_data =(.*)", re.S)
data = re.findall(patten, html.text)
server_data = eval(data[0][1][:-1])
for i in server_data:
for j in server_data[i]:
print(j)
if __name__ == '__main__':
parse_js()複製程式碼輸出結果：
多麼美妙的小姐姐啊，呸，多麼工整的資料啊。
本文首發於公眾號「痴海」，公眾號後臺回覆「1024」即可獲取最新程式設計資源。
