02技能之谷歌Chrome爬虫 ｜数据爬取及可视化系列
上期我们研究了01基于位置的用户画像初探。
今天更新一篇《数据爬取及可视化系列》的技能相关的文章：爬虫技能。
前阵子研究了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/
粘贴，点击校验，结果如下图
拷贝出来，存到文本里就行啦～
关于，谷歌浏览器爬取数据的其他应用方式，大家可以发挥脑洞～
有问题可以留言哈
设计+科技=
自在园O设计Mix科技实验室。