首页
学习
活动
专区
工具
TVP
发布

当 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 码转换成中文即可。

程序代码

importrequests

importre

defparse_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[][1][:-1])

foriinserver_data:

forjinserver_data[i]:

print(j)

if__name__ =='__main__':

parse_js()

输出结果:

多么美妙的小姐姐啊,呸,多么工整的数据啊。

最后最近公众号又双改版了,大家可以把我的公众号标记成星标,这样就可以第一时间接收到消息,每天为大家推送有趣又有用的 Python 知识。

人必有痴,而后有成

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180927A0FNCX00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券