使用 cheerio 解析 HTML

简介:

cheerio 是一个HTML解析器,cheerio实现了核心jQuery的子集。常用来解析采集来的HTML数据。


安装:

npm install cheerio


基础使用:

const cheerio = require('cheerio');

var htmlString = `<ul id="fruits">
 <li class="apple">苹果</li>
 <li class="orange">橙子</li>
 <li class="pear">梨</li>
</ul>`;
$ = cheerio.load(htmlString);

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

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

$('li[class=orange]').html()
//=> 橙子



选择器

cheerio和jQuery选择器的实现几乎是相同的,所以API非常相似。

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

selector 在 root 的范围内搜索 context 。selector和context可以是一个字符串表达式,DOM元素,DOM元素的数组,或cheerio对象。root 通常是HTML文档字符串。


属性

获取和修改属性的方法。

.attr( name, value )

获取和设置属性的方法。在匹配集合中只能获取的第一个元素的属性值。如果你把属性值设置为空,就会删除该属性。你也可以像jQuery函数一样通过传递键值 和 函数来设置。


.data( name, value )

获取和设置数据属性的方法。获取或设置仅在匹配集合中的第一个元素的数据属性值。


.val( [value] )

获取和设置input, select, and textarea的值的方法。注:对于传递键值,函数的支持尚未实现。


.hasClass( className )

检查任何一个匹配的元素中是否有className。


.addClass( className )

在所有匹配的元素中添加类。也像jQuery函数一样接受函数。


.removeClass( [className] )

从选定的元素中删除一个或多个空格分隔的class。如果removeClass函数的className是未定义的(即未传参数),所有的class值会被删除。也像jQuery函数一样接受函数。


查询

.find(selector)

通过选择器、jQuery对象或元素来过滤,获取每个匹配元素的后代。


.parent([selector])

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

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


.parents([selector])

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

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


.next([selector])

获取他的下一个兄弟节点。

$('.apple').next().hasClass('orange')

//=> true


.nextAll([selector])

获取在他的后面的所有兄弟节点。


.prev([selector])

获取选定元素的前一个兄弟节点,可以选择一个选择器筛选。


.prevAll([selector])

获取在指定元素的前面的所有兄弟节点。


.siblings([selector])

获取选定元素的所有兄弟,不包括它自己(可以通过传入class改变筛选结果)。


.children([selector])

获取选定元素的孩子元素。


.contents()

获取匹配元素集合中的每个元素的孩子元素,包括文本和注释节点。


.each( function(index, element) )

迭代一个cheerio对象,为每个匹配元素执行一个函数。当回调函数执行后,该函数所处的环境是DOM element,所以this指向当前元素,这相当于函数的参数element。要提前打破的each循环,那么返回false。

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


.map( function(index, element) )

通过每个在匹配函数产生的匹配集合中的匹配元素,产生一个新的包含返回值的cheerio对象。

.filter( function(index) )

遍历一个cheerio对象,降低通过选择器匹配的元素,或传递函数的测试的选择器元素组。


.not( selector )

结果中不匹配选择器的元素将被包含在该结果中。

选择器:

$('li').not('.apple').length;


.has( selector )

匹配一个拥有指定孩子元素的父元素。相当于.filter(':has(selector)')。


.first()

选择一个cheerio的对象的第一个元素

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


.last()

选择一个cheerio对象的最后一个元素

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


.eq( i )

根据索引(0开始)来确定元素。使用 .eq(-i) 的则是倒过来计数。


.add( selector [, context] )

在匹配元素集合中添加元素。


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

插入内容为每个选定元素的 last 孩子。

$('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>
.appendTo( target )


.insertAfter( target )

将每一个元素插入匹配元素集合中的目标后。


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

在匹配元素集合的元素前插入元素。


.remove( [selector] )

将匹配的元素集合从DOM和他们的孩子节点中删除。


.html( [htmlString] )

获取第一个选中元素的HTML内容字符串。如果htmlstring被指定,那么选中元素的内容被新内容所取代。


.text( [textString] )

获取元素集合中的每个元素的合并文本内容,包括它们的后代。如果 textString 指定文本字符串,每个元素的内容被新的内容替换。


.css( [propertName] )

得到一个匹配元素的style属性值或者设置匹配元素的css属性。


参考:

https://github.com/cheeriojs/cheerio/wiki/Chinese-README

修改时间 2022-02-28

真诚赞赏,手留余香
赞赏
随机推荐
Photoshop 手绘常用快捷键
JavaScript判断变量是否为undefined两种方式差异
express文件上传中间件Multer使用说明
ffmpeg 下载加密的切片视频 m3u8
PHP curl示例
JavaScript从数组中删除指定值元素的方法
windows mysql 自动备份的几种方法
ffmpeg 推送流到nginx服务器,生成m3u8 地址
iconfont 字体生成原理
CentOS 8 安装 MySQL 5.7 或 MySQL 8
QQ号

微信联系我

夜间模式切换
回到顶部