當 JS 大豬蹄子遇到 HTML 小姐姐

閱讀文本大概須要 5 分鐘。

JS 都是大豬蹄子

昨天讀者羣有位水友發了這麼一條消息，說這樣的網站頁面信息要如何提取 td 的內容，聊天截圖顯現的頁面是在瀏覽器上看到的代碼。

那時候我剛下班，平常水下羣。而後看到這條消息，內心就想這個簡單啊，寫個 xpath、寫個 bs四、寫個正則匹配下，輕輕鬆鬆就能夠獲取到，然而事情並無想象中的那麼簡單。

隨後水友就提到了關鍵信息：當水友實際用 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」便可獲取最新編程資源。