Node.js的學習--使用cheerio抓取網頁數據

打算要寫一個公開課網站，缺乏數據，就決定去網易公開課去抓取一些數據。

前一陣子看過一段時間的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的兼容性。

 

今天就到這裏了~~有機會把前面的小程序完善成一個網頁爬蟲~~