首先安装 cheerio 库
npm install cheerio
下面先给出一段代码,再对代码进行解释 cheerio 库的用法。对博客园首页进行分析,然后提取每一页中文章的标题。
首先对博客园首页进行分析。如下图:
对 html 源代码进行分析后,首先通过 .post_item
获取所有标题,接着对每一个 .post_item
进行分析,使用 a.titlelnk
即可匹配每个标题的 a 标签。下面通过代码进行实现。
const req = require('request'); const cheerio = require('cheerio'); req.get({ url: 'https://www.cnblogs.com/' }, (err, res, body) => { if (!err && res.statusCode == 200) { let cnblogHtmlStr = body; let $ = cheerio.load(cnblogHtmlStr); $('.post_item').each((index, ele) => { let title = $(ele).find('a.titlelnk'); let titleText = title.text(); let titletUrl = title.attr('href'); console.log(titleText, titletUrl); }); } });
当然,cheerio 库也支持链式调用,上面的代码也可改写成:
let cnblogHtmlStr = body; let $ = cheerio.load(cnblogHtmlStr); let titles = $('.post_item').find('a.titlelnk'); titles.each((index, ele) => { let titleText = $(ele).text(); let titletUrl = $(ele).attr('href'); console.log(titleText, titletUrl);
上面的代码非常简单,就不再用文字进行赘述了。下面总结一点自己认为比较重要的几点。
使用 find()
方法获取的节点集合 A,若再次以 A 集合中的元素为根节点定位它的子节点以及获取子元素的内容与属性,需对 A 集合中的子元素进行 $(A[i])
包装,如上面的$(ele)
一样。在上面代码中使用 $(ele)
,其实还可以使用 $(this)
但是由于我使用的是 es6 的箭头函数,因此改变了 each
方法中回调函数的 this 指针,因此,我使用 $(ele)
; cheerio 库也支持链式调用,如上面的 $('.post_item').find('a.titlelnk')
,需要注意的是,cheerio 对象 A 调用方法 find()
,如果 A 是一个集合,那么 A 集合中的每一个子元素都调用 find()
方法,并放回一个结果结合。如果 A 调用 text()
,那么 A 集合中的每一个子元素都调用 text()
并返回一个字符串,该字符串是所有子元素内容的合并(直接合并,没有分隔符)。
最后在总结一些我比较常用的方法。
first() last() children([selector]): 该方法和 find 类似,只不过该方法只搜索子节点,而 find 搜索整个后代节点。