当 JS 大猪蹄子遇到 HTML 小姐姐

阅读文本大概需要 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」即可获取最新编程资源。