02技能之谷歌Chrome爬虫 ｜数据爬取及可视化系列

　　02技能之谷歌Chrome爬虫 ｜数据爬取及可视化系列

　　上期我们研究了。

　　今天更新一篇《数据爬取及可视化系列》的技能相关的文章：爬虫技能。

　　前阵子研究了nodejs爬虫相关的内容，发现最好用的还是casperjs，一个基于Phantom JS的库。

　　Phantom JS是一个服务器端的API 的 WebKit。就是提供一个浏览器环境的命令行接口，你可以把它看作一个“虚拟浏览器”，除了不能浏览，其他与正常浏览器一样。它的内核是V8引擎，不提供图形界面，只能在命令行下使用，我们可以用它完成一些特殊的用途。

　　用casperjs做爬虫要编程呢。有点麻烦。

　　有没有更简单的方式呢？？？其实有的。

　　对于单页面的数据抓取，我建议直接采用谷歌浏览器的控制台来获取数据就行啦～简单又好用，今天分享下这一技巧。

　　基本步骤

　　通过谷歌浏览器访问目标网页

　　获取想要截取的数据的标签

　　得到标签的id或者class

　　谷歌浏览器控制台输入javascript代码

　　实例1

　　目标：获取百度搜索的标题内容

　　1. 打开，

　　搜索：自在园freeGarden，结果如下图

　　2.我想把这些标题的本文内容都截取下来，可以右击标题，然后选择“审查元素”，在弹出的窗体中，查看标题是属于哪个html标签的。

　　附一张动图的教程：

　　

　　3.发现原来是class为t的h3标签包含了这一标题内容

　　4.那么，我们可以通过innerText获取标签内的文本内容。

　　在console中输入：

　　$('.t').each(function(i,e){

　　console.log(e.innerText)

　　});

　　这一页的标题都获取出来啦，下图，然后拷贝出来就行了～

　　如果，想获取其他信息，可以通过修改类名t和innerText为其他的命令，获取诸如评价数量、链接地址等。

　　比如把.t改成.f3

　　$('.f13').each(function(i,e){

　　console.log(e.innerText)

　　})

　　把链接跟评价都获取出来了。

　　实例2

　　目标：获取搜狗搜索出来的微信公众号id

　　比如我搜索了一下大数据

　　想把这一页的微信号给保存下来，通过审查元素，找到微信号所在的html标签，控制台输入以下代码：

　　$('.txt-box').each(function(){

　　console.log($(this).children().first().next().text())

　　

　　})

　　结果，如下：

　　实例3

　　目标：获取中国知网的搜索结果

　　写论文的时候，用知网搜索出来的结果，以前我是一个个去复制黏贴保存下来的。现在利用谷歌浏览器，可以把标题、作者等信息保存下来，方便整理。

　　通过审查元素，知道搜索的结果是保存在iframe里的。

　　于是，编写了以下的代码

　　var articles=[]; $(window.frames["iframeResult"].document).find('.fz14').each(function(){ $(this).children().first().remove(); var zz=$(this).parent().next(); var title=$(this).text(); var ly=zz.next(); var date=ly.next(); var sj=date.next(); articles.push({ "作者": zz.text().replace(/\s{1,}|\n/g,''), "标题": title, "来源": ly.text().replace(/\s{1,}|\n/g,''), "发表日期": date.text().replace(/\s{1,}|\n/g,''), "数据库": sj.text().replace(/\s{1,}|\n/g,'') });});console.log(JSON.stringify(articles))

　　这边不一一解释代码啦，有兴趣可以google一下，深入学习。

　　结果，如下图

　　没有缩进不够美观，不要紧，拷贝出来，

　　打开

　　粘贴，点击校验，结果如下图

　　拷贝出来，存到文本里就行啦～

　　关于，谷歌浏览器爬取数据的其他应用方式，大家可以发挥脑洞～

　　有问题可以留言哈

　　设计+科技=

　　自在园O设计Mix科技实验室。

　　长按识别二维码即可获取更多～