【nodeJs】cheerio
cheerio是什么?
cheerio(https://github.com/cheeriojs/cheerio ) 大家可以理解成一个 Node.js 版的 jquery,用来从网页中以 css selector 取数据,使用方式跟 jquery 一样一样的。
var cheerio = require('cheerio'),$ = cheerio.load('<h2 class="title">Hello world</h2>');$('h2.title').text('Hello there!');
$('h2').addClass('welcome');$.html();
//=> <h2 class="title welcome">Hello there!</h2>
安装
npm install cheerio
API
我们将用到的示例
- Apple
- Orange
- Pear
Loading
首先你需要加载HTML。通过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也很相似。
选择器在 Context 范围内搜索,Context又在Root范围内搜索。selector 和context可是是一个字符串表达式,DOM元素,和DOM元素的数组,或者chreeio对象。root 是通常是HTML 文档字符串。
$(selectior,[context],[root])$('.apple', '#fruits').text()
//=> Apple$('ul .pear').attr('class')
//=> pear$('li[class=orange]').html()
//=> <li class="orange">Orange</li>
Attributes
获得和修改属性
获得和修改属性。在匹配的元素中只能获得第一元素的属性。如果设置一个属性的值为null,则移除这个属性。你也可以传递一对键值,或者一个函数。
.attr(name,value)$('ul').attr('id')
//=> fruits$('.apple').attr('id', 'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>
.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>
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对象,为每个匹配元素执行一个函数
var fruits = [];$('li').each(function(i, elem) {fruits[i] = $(this).text();
});
.map(function(index,element))迭代一个cheerio对象,为每个匹配元素执行一个函数。
$('li').map(function(i, el) {// this === elreturn $(this).attr('class');
}).join(', ');
//=> apple, orange, pear.filter(selector).filter(function(index))迭代一个cheerio对象,滤出匹配选择器或者是传进去的函数的元素。如果使用函数方法,这个函数在被选择的元素中执行,所以this指向的手势当前元素。Selector:$('li').filter('.orange').attr('class');
//=> orangeFunction:$('li').filter(function(i, el) {// this === elreturn $(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>默认的,html会让一些标签保持开标签的状态.有时候你想呈现一个有效的XML文档.例如下面这个:$ = cheerio.load('<media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>');然后为了呈现这个XML,你需要使用xml这个函数:$.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()
摘自Cnode社区:https://cnodejs.org/topic/5203a71844e76d216a727d2e
【nodeJs】cheerio相关推荐
- 【NodeJS】如何安装淘宝cnpm
工具官网 Node.js 淘宝 NPM 镜像 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm ...
- 【NodeJS】运行在服务端的JavaScript
[一. 什么是NodeJS] JS,从最初的理论学习到后来的项目实践,我们都很熟悉了.而本篇博客的主题NodeJS,简单地说,它其实是运行在服务端的JavaScript.下面是具体介绍: ...
- 【NodeJS】安装
nodejs 介绍 nodejs是运行在服务端的JavaScript:一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非 ...
- 【nodejs】初学者之路
需有基础:javascript.ES6 [书籍]朴灵<深入浅出nodejs>.<nodejs实战> [学习网站]官网:https://nodejs.org/en/ 中文node ...
- 【Nodejs】Nodejs入门必知
https://i5ting.github.io/How-to-learn-node-correctly/#1 1.3.2. 安装Node.js环境 3m安装法 nvm(node version ma ...
- 【Nodejs 】Nodejs常见全局对象之模块对象全解析_02
目录 一.模块 二.模块分类 三.npm和包 四.查询字符串模块(querystring) 五.URL模块 六.Timer模块 定时器 1.一次定时器 2.周期性定时器 3.立即执行的定时器 七.文 ...
- nodejs全局变量第一次没赋值要第二次才有是为什么_【NodeJS】async 和 await 的本质...
对于许多新接触 NodeJS 的人而言,async 和 await 的原理是比较难理解的.本文将从零"构建"出 async 和 await 关键字,从而帮助理清 async 和 a ...
- 【Nodejs】记一次图像识别的冒险
笔者的团队最近接到了一个有关图像识别的需求,本来应该由后端团队提供能力,native提供容器,前端团队仅负责一些"外围的形式工作",不过由于各种各样的原因,最后的结果变成了前端团队 ...
- 【nodejs】让nodejs像后端mvc框架(asp.net mvc)一orm篇【如EF般丝滑】typeorm介绍(8/8)...
文章目录 前情概要 在使用nodejs开发过程中,刚好碰到需要做一个小工具,需要用到数据库存储功能.而我又比较懒,一个小功能不想搞一个nodejs项目,又搞一个后端项目.不如直接在nodejs里面把对 ...
最新文章
- 纯c语言贪吃蛇,纯C语言贪吃蛇 求助
- Codeforces round 1100
- 1130-host ... is not allowed to connect to this MySql server登录失败
- matlab中的reshape函数用法
- 安装和卸载C#写的 windows service
- java ee各类组件_在Java EE组件中使用骆驼路线
- Java-数据结构与算法-二分查找法
- 190515每日一句
- OneNote 2016代码编写插件 安装
- 食品进销存十大品牌排行榜新鲜出炉,来看看哪个最适合你
- mysql 双机备份_Mysql双机热备份
- 【观察】智能门锁:弱水三千,谁能先取一瓢?
- 仿京东的注册页面, 使用jQuery进行表单验证
- 广州高清卫星地图 用百度卫星地图server下载 含标签、道路数据叠加 可商用
- 第二章:计算机中的数据
- DevOps名言警句 - 2021
- 《崩坏:星穹铁道》游戏遇到打不开/闪退/黑屏怎么办?
- 经济与金融大数据挖掘——知识点总结回顾
- 论文阅读-Boosting Data-driven Evolutionary Algorithm with Localized Data Generation
- 基于Android的家校互动系统app