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

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

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

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

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

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

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

基本步骤

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

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

得到标签的id或者class

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

实例1

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

1. 打开www.baidu.com，

搜索：自在园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一下，深入学习。

结果，如下图

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

打开http://www.bejson.com/

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

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

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

有问题可以留言哈