Node.js的学习--使用cheerio抓取网页数据 - 疯狂的原始人

标签： node js 学习 | 发表时间：2014-04-19 00:55 | 作者：疯狂的原始人
出处：

打算要写一个公开课网站，缺少数据，就决定去网易公开课去抓取一些数据。

前一阵子看过一段时间的Node.js，而且Node.js也比较适合做这个事情，就打算用Node.js去抓取数据。

关键是抓取到网页之后如何获取到想要的数据呢？然后就发现了cheerio，用来解析html非常方便，就像在浏览器中使用jquery一样。

使用如下命令安装cheerio

      npm install cheerio

Cheerio安装完成， 我们就可以开始工作了。 首先让我们来看一段javascript代码 这段代码可以下载任意一个网页的内容。将其放入到curl.js中，并导出。

var http = require("http");

// Utility function that downloads a URL and invokes
// callback with the data.
function download(url, callback) {
http.get(url, function(res) {
var data = "";
res.on('data', function (chunk) {
data += chunk;
});
res.on("end", function() {
callback(data);
});
}).on("error", function() {
callback(null);
});
}

exports.download = download;

然后是使用cheerio解析html，找到想要的数据。

我们先来自己分析一下页面。我们要抓取 http://v.163.com/special/opencourse/englishs1.html这个页面中的视频，视频的地址都在下载的按钮里。其中一个下载按钮的html的代码如下：

<a class="downbtn" href="http://mov.bn.netease.com/mobilev/2013/1/F/G/S8KTEF7FG.mp4" id="M8KTEKR84" target="_blank"></a>

我们取到其中的href属性，只需要进行如下选择即可

$("a.downbtn").attr("href");

在是现实，我们可以在index.js中写入如下代码

var cheerio = require("cheerio");
var server = require("./curl");

var url = "http://v.163.com/special/opencourse/englishs1.html"

server.download(url, function(data) {
if (data) {
//console.log(data);

var $ = cheerio.load(data);
$("a.downbtn").each(function(i, e) {
console.log($(e).attr("href"));
});

console.log("done");
} else {
console.log("error");
}
});

然后执行

      node index.js

这样就可以在命令框里面打印出页面上所有的视频地址。如下图

 

cheerio中文API [ 参考]

我们将用到的标记示例

<ul id="fruits">
<li class="apple">Apple</li>
<li class="orange">Orange</li>
<li class="pear">Pear</li>
</ul>

这是我们将会在所有的API例子中用到的HTML标记

Loading

首先你需要加载HTML。这一步对jQuery来说是必须的，since jQuery operates on the one, baked-in DOM。通过Cheerio,我们需要把HTML document 传进去。

这是首选:

var cheerio =require('cheerio'),
$ = cheerio.load('<ul id="fruits">...</ul>');

或者通过传递字符串作为内容来加载HTML:

$ =require('cheerio');
$('ul','<ul id="fruits">...</ul>');

Or as the root:

$ =require('cheerio');
$('li','ul','<ul id="fruits">...</ul>');

你也可以传递一个额外的对象给.load()如果你需要更改任何的默认解析选项的话:

$ = cheerio.load('<ul id="fruits">...</ul>',{
ignoreWhitespace:true,
xmlMode:true});

这些解析选项都是直接来自htmlparser ，因此任何在htmlparser里有效的选项在Chreeio里也是行得通的。默认的选项如下:

{
ignoreWhitespace:false,
xmlMode:false,
lowerCaseTags:false
}

Selectors

Cheerio的选择器用起来几乎和jQuery一样，所以API也很相似。

$(selectior,[context],[root])

选择器在 Context 范围内搜索，Context又在Root范围内搜索。selector 和context可是是一个字符串表达式，DOM元素，和DOM元素的数组，或者chreeio对象。root 是通常是HTML 文档字符串。

$('.apple','#fruits').text()
//=> Apple

$('ul .pear').attr('class')
//=> pear

$('li[class=orange]').html()
//=> <li class="orange">Orange</li>

Attributes

获得和修改属性

.attr(name,value)

获得和修改属性。在匹配的元素中只能获得第一元素的属性。如果设置一个属性的值为null，则移除这个属性。你也可以传递一对键值，或者一个函数。

$('ul').attr('id')
//=> fruits

$('.apple').attr('id','favorite').html()
//=> <li class="apple" id="favorite">Apple</li>

.val([value])

获得和修改input,select,textarea的value.注意: 对于传递键值和函数的支持还没有被加进去。

$('input[type="text"]').val()
//=> input_text

$('input[type="text"]').val('test').html()
//=><input type="text" value="test"/>

.removeAttr(name)

通过name删除属性

$('.pear').removeAttr('class').html()
//=> <li>Pear</li>

.hasClass( className )

检查匹配的元素是否有给出的类名

$('.pear').hasClass('pear')
//=> true

$('apple').hasClass('fruit')
//=> false

$('li').hasClass('pear')
//=> true

.addClass(className)

增加class(es)给所有匹配的elements.也可以传函数。

$('.pear').addClass('fruit').html()
//=> <li class="pear fruit">Pear</li>

$('.apple').addClass('fruit red').html()
//=> <li class="apple fruit red">Apple</li>

.removeClass([className])

从选择的elements里去除一个或多个有空格分开的class。如果className 没有定义，所有的classes将会被去除，也可以传函数。

$('.pear').removeClass('pear').html()
//=> <li class="">Pear</li>

$('.apple').addClass('red').removeClass().html()
//=> <li class="">Apple</li>

.toggleClass( className, [switch] )

添加或删除class，依赖于当前是否有该class.

$('.apple.green').toggleClass('fruit green red').html()
//=> <li class="apple fruit red">Apple</li>

$('.apple.green').toggleClass('fruit green red', true).html()
//=> <li class="apple green fruit red">Apple</li>

.is( selector )

.is( element )

.is( selection )

.is( function(index) )

有任何元素匹配selector就返回true。如果使用判定函数，判定函数在选中的元素中执行，所以this指向当前的元素。

Traversing

.find(selector)

获得一个在匹配的元素中由选择器滤过的后代。

$('#fruits').find('li').length
//=> 3

.parent([selector])

获得每个匹配元素的parent,可选择性的通过selector筛选。

$('.pear').parent().attr('id')
//=> fruits

.parents([selector])

获得通过选择器筛选匹配的元素的parent集合。

$('.orange').parents().length
// => 2
$('.orange').parents('#fruits').length
// => 1

.closest([selector])

对于每个集合内的元素，通过测试这个元素和DOM层级关系上的祖先元素，获得第一个匹配的元素

$('.orange').closest()// => []
$('.orange').closest('.apple')// => []
$('.orange').closest('li')// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')// => [<ul id="fruits"> ... </ul>]

.next()

获得第一个本元素之后的同级元素

$('.apple').next().hasClass('orange')
//=> true

.nextAll()

获得本元素之后的所有同级元素

$('.apple').nextAll()
//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]

.prev()

获得本元素之前的第一个同级元素

$('.orange').prev().hasClass('apple')
//=> true

.preAll()

$('.pear').prevAll()
//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]

获得本元素前的所有同级元素

.slice(start,[end])

获得选定范围内的元素

$('li').slice(1).eq(0).text()
//=> 'Orange'

$('li').slice(1,2).length
//=> 1

.siblings(selector)

获得被选择的同级元素，不包括本身

$('.pear').siblings().length
//=> 2

$('.pear').siblings('.orange').length
//=> 1

.children(selector)

获被选择元素的子元素

$('#fruits').children().length
//=> 3

$('#fruits').children('.pear').text()
//=> Pear

.each(function(index,element))

迭代一个cheerio对象，为每个匹配元素执行一个函数。When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element.要提早跳出循环，返回false.

var fruits =[];

$('li').each(function(i, elem){
fruits[i]= $(this).text();});

fruits.join(', ');
//=> Apple, Orange, Pear

.map(function(index,element))

迭代一个cheerio对象，为每个匹配元素执行一个函数。Map会返回一个迭代结果的数组。the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element

$('li').map(function(i, el){
// this === el
return $(this).attr('class');
}).join(', ');
//=> apple, orange, pear

.filter(selector)

.filter(function(index))

迭代一个cheerio对象，滤出匹配选择器或者是传进去的函数的元素。如果使用函数方法，这个函数在被选择的元素中执行，所以this指向的手势当前元素。

Selector:

$('li').filter('.orange').attr('class');
//=> orange

Function:

$('li').filter(function(i, el){
// this === el
return $(this).attr('class')==='orange';
}).attr('class')
//=> orange

.first()

会选择chreeio对象的第一个元素

$('#fruits').children().first().text()
//=> Apple

.last()

$('#fruits').children().last().text()
//=> Pear

会选择chreeio对象的最后一个元素

.eq(i)

通过索引筛选匹配的元素。使用.eq(-i)就从最后一个元素向前数。

$('li').eq(0).text()
//=> Apple

$('li').eq(-1).text()
//=> Pear

Manipulation

改变DOM结构的方法

.append(content,[content...])

在每个元素最后插入一个子元素

$('ul').append('<li class="plum">Plum</li>')
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// <li class="plum">Plum</li>
// </ul>

.prepend(content,[content,...])

在每个元素最前插入一个子元素

$('ul').prepend('<li class="plum">Plum</li>')
$.html()
//=> <ul id="fruits">
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// </ul>

.after(content,[content,...])

在每个匹配元素之后插入一个元素

$('.apple').after('<li class="plum">Plum</li>')
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="plum">Plum</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// </ul>

.before(content,[content,...])

在每个匹配的元素之前插入一个元素

$('.apple').before('<li class="plum">Plum</li>')
$.html()
//=> <ul id="fruits">
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// </ul>

.remove( [selector] )

从DOM中去除匹配的元素和它们的子元素。选择器用来筛选要删除的元素。

$('.pear').remove()
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// </ul>

.replaceWith( content )

替换匹配的的元素

var plum = $('<li class="plum">Plum</li>')
$('.pear').replaceWith(plum)
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="plum">Plum</li>
// </ul>

.empty()

清空一个元素，移除所有的子元素

$('ul').empty()
$.html()
//=> <ul id="fruits"></ul>

.html( [htmlString] )

获得元素的HTML字符串。如果htmlString有内容的话，将会替代原来的HTML

$('.orange').html()
//=> Orange

$('#fruits').html('<li class="mango">Mango</li>').html()
//=> <li class="mango">Mango</li>

.text( [textString] )

获得元素的text内容，包括子元素。如果textString被指定的话，每个元素的text内容都会被替换。

$('.orange').text()
//=> Orange

$('ul').text()
//=> Apple
// Orange
// Pear

Rendering

如果你想呈送document，你能使用html多效用函数。

$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// </ul>

如果你想呈送outerHTML,你可以使用 $.html(selector)

$.html('.pear')
//=> <li class="pear">Pear</li>

By default, html will leave some tags open. Sometimes you may instead want to render a valid XML document. For example, you might parse the following XML snippet:

$ = cheerio.load('<media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>');

... and later want to render to XML. To do this, you can use the 'xml' utility function:

$.xml()//=> <media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>

Miscellaneous

不属于其它地方的DOM 元素方法

.toArray()

取得所有的在DOM元素，转化为数组、

$('li').toArray()
//=> [ {...}, {...}, {...} ]

.clone()

克隆cheerio对象

var moreFruit = $('#fruits').clone()

Utilities

$.root

Sometimes you need to work with the top-level root element. To query it, you can use $.root().

$.root().append('<ul id="vegetables"></ul>').html();
//=> <ul id="fruits">...</ul><ul id="vegetables"></ul>

$.contains( container, contained )

查看cotained元素是否是container元素的子元素

$.parseHTML( data [, context ] [, keepScripts ] )

将字符串解析为DOM节点数组。context参数对chreeio没有意义，但是用来维护APi的兼容性。

 

今天就到这里了~~有机会把前面的小程序完善成一个网页爬虫~~


本文链接： Node.js的学习--使用cheerio抓取网页数据，转载请注明。

相关 [node js 学习] 推荐：

node js 断点调试

- - Web前端 - ITeye博客
大部分基于 Node.js 的应用都是运行在浏览器中的,. 例如强大的调试工具 node-inspector. node-inspector 是一个完全基于 Node.js 的开源在线调试工具,提供了强大的调试功能和友好. 的用户界面,它的使用方法十分简便. 首先,使用 npm install -g node-inspector 命令安装 node-inspector,然后在终.

什么是Node？

- We_Get - 博客园新闻频道
译者按：前不久Oreilly出了一本小册子“What is Node?”，扼要的讲解了Node的身世和所适用的场景，作者文笔轻松流畅、内容充实，是非常难得的学习资料. 　　译文全文：http://jayli.github.com/whatisnode/index.html. 　　作者：Brett McLaughlin ，原文：What is Node?.

Node入门

- - CSDN博客编程语言推荐文章
作者：  Manuel Kiessling. 翻译：  goddyzhao &  GrayZhang &  MondayChen. 本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识. 本书绝不是一本“Hello World”的教程. 你正在阅读的已经是本书的最终版.

浅析Hadoop Secondary NameNode，CheckPoint Node，Backup Node

- - CSDN博客云计算推荐文章
Hadoop SecondaryNameNode并不是Hadoop 第二个NameNode，它不提供NameNode服务，而仅仅是NameNode的一个工具. 这个工具帮助NameNode管理Metadata数据. NameNode的HDFS文件信息（即Metadata）记录在内存中，client的文件写操作直接修改内存中的Metadata，同时也会记录到硬盘的Edits文件，这是一个Log文件.

[译]什么是Node？

- blacktulip - Taobao UED Team
译者按：前不久Oreilly出了一本小册子“What is Node?”，扼要的讲解了Node的身世和所适用的场景，作者文笔轻松流畅、内容充实，是非常难得的学习资料. 译文全文：http://jayli.github.com/whatisnode/index.html. 作者：Brett McLaughlin ，原文：What is Node?.

用node作桌面开发

- InterMa - CNode社区
node的定位是，server-side javascript. 但程序员最爱做的事，就是把一个东西用在不该用的地方. 那么，可以把node用在桌面开发上吗. 把Javascript用在桌面开发上，早有先例，比如GTK+的gjs，还有Qt的QML（顺带一提，QML代表着桌面开发的另一个方向，a promising way），GNOME3中，也用javascript作为桌面插件的开发语言.

Vercel 部署 Node 服务

- - 掘金 前端
之前在写 面试常客：HTTP 缓存时，曾经就强缓存和协商缓存写过两个demo，但缓存要在服务端做，只能贴上代码，不能在网页上感受（虽然我贴了gif）. 笔者的所有 demo 例子都放在 github page 上，其特点是不需要服务器即可部署静态资源，但它不具备部署服务端应用能力. 最近笔者在了解 CI/CD 方面的知识点，想起了 Vercel，就想着能否将服务端应用架在 vercel 上呢.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

無痛安裝 NodeJS 和 Node Framework Express

- Hming - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
直接到官網下載 Stable 的版本吧，目前是 node-v0.4.10.tar.gz，也可以先看看 API Document. 安裝 Ububtu 相關套件. 下面會使用最原始的編譯方式，所以必須安裝 g++ 套件，否則下 ./configure 的時候，會吐出來沒有安裝過的套件. 兩種方法：1.用 apt-get install nodejs 2.