Cheerio, a server side jQuery like tool to help work with HTML in nodejs

I have been making some personal projects that have to do with working with html in a nodejs environment. Often I am in a situation in which I end up generating html from markdown using something liked marked, or looping over actual html files, in ether case I have raw html that I want to work with in javaScript.

I have written a post recently on another node.js solution for this sort of thing called html-to-json, however in this post I will be writing about cheerio. Which is a server side implementation of core jQuery.

Basic usage example

So I just need to do the usual npm install with the package name cheerio in a test folder.

1
$ npm install cheerio

And my basic basic.js file looks like this:

1
2
3
4
var cheerio = require('cheerio'),
$ = cheerio.load('<p>cheerio!</p>');
console.log($('p').get(0).children[0].data);

So that when I call my basic.js file from the command line I get the innerText of the paragraph element.

1
2
$ node basic
cheerio!

Selectors

Selectors work in very much the same way as in jQuery. The ushual selection by tag, class, and id work in very much the same fashion.

1
2
3
4
5
6
7
8
9
10
11
12
var cheerio = require('cheerio'),
$ = cheerio.load('<p>cheerio!<\/p><p class=\"foo\">foo text<\/p><p id=\"name\">Dustin</p>');
$('p').each(function (i, el) {
console.log(el.children[0].data); // 'cheerio!', 'foo text', 'Dustin'
});
console.log( $('.foo')[0].children[0].data); // 'foo text'
console.log( $('#name')[0].children[0].data); // 'Dustin'

hasClass method

There are many methods that can be used with a collection, picking one at random there is hasClass that can be used to find if a collection is using a certain class or not.

1
2
3
4
5
var cheerio = require('cheerio'),
$ = cheerio.load('<p class=\"red\">red<\/p><p class=\"red big\">red and big<\/p><p class=\"red\">red</p>');
console.log( $('.red').hasClass('big') ); // true
console.log( $('.red').hasClass('little') ); // false

each method

A method that I actualy use often is for course the each method that loops over all elements in a collection.

1
2
3
4
5
$('p').each(function(index, el){
console.log(el.children[0].data);
});

The method that I pass to each will give me each index, and a reference to the corresponding element in a collection.