使用 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

修改时间 2021-05-03

真诚赞赏,手留余香
赞赏
随机推荐
PDO 使用预处理 LIMIT
apache和php5.4无法开启curl
JavaScript 数据验证模块 joi validator
PSR规范
macOS卸载Android Studio
Nginx 如何配置 Basic Auth 认证
Sequelize 批量导入和批量更新数据
FTP over TLS加密传输 Filezilla
You Don't Need jQuery
Koa.js 中间件 koa-session