Cheerio is a fast, flexible jQuery core implementation specially customized for the server.

For example

const cheerio = require('cheerio');
const $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there! ');
$('h2').addClass('welcome');

$.html();
//=> Hello there! 
Copy the code

features

Similar syntax: Cheerio includes a subset of the jQuery core. Cheerio removes all the DOM inconsistencies and browser awkwardness from the jQuery library and reveals its really elegant API.
Lightning block: Cheerio works on top of a very simple, consistent DOM model. Parsing, manipulation, and rendering all become incredibly efficient. The basic end-to-end benchmark shows Cheerio to be about eight times faster (8x) than JSDOM.
Flexibility: Cheerio encapsulates compatible HTMLParser. Cheerio can parse almost any HTML and XML document.

The installation

npm install cheerio
Copy the code

Initialize the

First you need to load the HTML. With Cheerio, we need to pass in the HTML document.

const cheerio = require('cheerio');
const $ = cheerio.load('
      
       ... 
      
');
Copy the code

Commonly used API

Cheerio’s selector works almost the same as jQuery, so the API is very similar.

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

The selector searches the Context scope, which in turn searches the Root scope. Selector and context can be a string expression, a DOM element, an array of DOM elements, or a Cheerio object. Root is usually an HTML docstring.

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

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

$('li[class=orange]').html()
//=> <li class="orange">Orange</li>
Copy the code

attr(name,value)

Get and modify properties. Only the attributes of the first element can be obtained from matched elements. If an attribute is set to NULL, the attribute is removed. You can also pass a pair of keys, or a function.

$('ul').attr('id')
//=> fruits

$('.apple').attr('id'.'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>
Copy the code

value([value])

Get and modify values for input, SELECT, and textarea.

$('input[type="text"]').val()
=> input_text

$('input[type="text"]').val('test').html()
=> <input type="text" value="test"/>
Copy the code

removeAttr(name)

Delete attributes by name

$('.pear').removeAttr('class').html()
//=> <li>Pear</li>
Copy the code

hasClass( className )

Checks if the matched element has the given class name

$('.pear').hasClass('pear')
//=> true

$('apple').hasClass('fruit')
//=> false

$('li').hasClass('pear')
//=> true
Copy the code

addClass(className)

Add class(es) to all matched elements. You can also pass functions

$('.pear').addClass('fruit').html()
//=> <li class="pear fruit">Pear</li>

$('.apple').addClass('fruit red').html()
//=> <li class="apple fruit red">Apple</li>
Copy the code

removeClass([className])

Removes one or more classes separated by Spaces from selected elements. If the className is not defined, all classes will be removed and the function can be passed.

$('.pear').removeClass('pear').html()
//=> <li class="">Pear</li>

$('.apple').addClass('red').removeClass().html()
//=> <li class="">Apple</li>
Copy the code

is.(selector) , is(function(index))

Return true for any element that matches selector. If you use a decision function, the decision function is executed on the selected element, so this refers to the current element.

find(selector)

Gets a descendant filtered by the selector in the matched element.

$('#fruits').find('li').length
/ / = > 3
Copy the code

parent([selector])

Gets the parent of each matched element, optionally filtered by selector.

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

closest([selector])

For each element in the collection, the first matching element is obtained by testing that element against the ancestor element in the DOM hierarchy.

$('.orange').closest()
/ / = > []
$('.orange').closest('.apple')
/ / = > []
$('.orange').closest('li')
// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')
// => [<ul id="fruits"> ... </ul>]
Copy the code

next()

Gets the sibling element after the first element

Copy the code

$('.apple').next().hasClass('orange')
//=> true
Copy the code

nextAll()

Get all sibling elements after this element

$('.apple').nextAll()
//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]
Copy the code

prev()

Gets the first sibling element before this element

$('.orange').prev().hasClass('apple')
//=> true
Copy the code

preAll()

Get all sibling elements up to this element

$('.pear').prevAll()
//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]
Copy the code

slice(start,[end])

Gets the elements in the selected range

$('li').slice(1).eq(0).text()
//=> 'Orange'

$('li').slice(1.2).length
/ / = > 1
Copy the code

siblings(selector)

Get the selected sibling element, remove itself?

$('.pear').siblings().length
/ / = > 2

$('.pear').siblings('.orange').length
/ / = > 1
Copy the code

children(selector)

Gets the children of the selected element

$('#fruits').children().length
/ / = > 3

$('#fruits').children('.pear').text()
//=> Pear
Copy the code

each(function(index, element))

Iterating over a Cheerio object, performing a function for each matched element. When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element. To break out of the loop early, return false.

var fruits = [];

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

fruits.join(', ');
//=> Apple, Orange, Pear
Copy the code

map(function(index, element))

Iterating over a Cheerio object, performing a function for each matched element. The Map returns an array of iteration results. the function is fired in the context of the DOM element, so this refers to the current element, Which is equivalent to the function parameter element.

$('li').map(function(i, el) {
  // this === el
  return $(this).attr('class');
}).join(', ');
//=> apple, orange, pear
Copy the code

filter(selector), filter(function(index))

Iterating over a Cheerio object, filtering out elements that match the selector or function passed in. If the function method is used, the function is executed on the selected element, so this points to the current element.

// Selector
$('li').filter('.orange').attr('class');
//=> orange

// Function
$('li').filter(function(i, el) {
  // this === el
  return $(this).attr('class') = = ='orange';
}).attr('class')
//=> orange
Copy the code

first()

The first element of the chreeio object is selected

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

last()

The last element of the chreeio object is selected

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

eq(i)

Filter matched elements by index. Use.eq(-i) to count forward from the last element.

$('li').eq(0).text()
//=> Apple

$('li').eq(-1).text()
//=> Pear
Copy the code

Append (content, [the content… )

Insert a child element at the end of each element

$('ul').append('<li class="plum">Plum</li>')
$.html()
//=> 
      
// Apple
// Orange
// Pear
// Plum
// 
Copy the code

The prepend (the content, the content,… )

Insert a child element at the beginning of each element

$('ul').prepend('<li class="plum">Plum</li>')
$.html()
//=> 
      
// Plum
// Apple
// Orange
// Pear
// 
Copy the code

After (the content, the content,… )

Insert an element after each matched element

$('.apple').after('<li class="plum">Plum</li>')
$.html()
//=> 
      
// Apple
// Plum
// Orange
// Pear
// 
Copy the code

Before (the content, the content,… )

Insert an element before each matched element

$('.apple').before('<li class="plum">Plum</li>')
$.html()
//=> 
      
// Plum
// Apple
// Orange
// Pear
// 
Copy the code

remove( [selector] )

Removes matching elements and their children from the DOM. Selectors are used to filter the elements to be deleted.

$('.pear').remove()
$.html()
//=> 
      
// Apple
// Orange
// 
Copy the code

replaceWith( content )

Replace the matched elements

var plum = $('<li class="plum">Plum</li>'The $()'.pear').replaceWith(plum)
$.html()
//=> <ul id="fruits">
// Apple
// Orange
// Plum
// 
Copy the code

empty()

Empties an element, removing all child elements

$('ul').empty()
$.html()
//=> 
      
Copy the code

html( [htmlString] )

Gets the HTML string of the element. If htmlString has any content, it will replace HTML.

$('.orange').html()
//=> Orange

$('#fruits').html('<li class="mango">Mango</li>').html()
//=> <li class="mango">Mango</li>
Copy the code

text( [textString] )

Gets the text content of the element, including child elements. If a textString is specified, the text content of each element is replaced.

$('.orange').text()
//=> Orange

$('ul').text()
//=> Apple
// Orange
// Pear
Copy the code

toArray()

Get all the elements in the DOM and convert them into arrays.

$('li').toArray()
//=> [{...}, {...}, {...}]
Copy the code

clone()

Clone the Cheerio object

const moreFruit = $('#fruits').clone()
Copy the code

$.root

Sometimes you want to find the top root element, so $.root() gets it:

$.root().append('<ul id="vegetables"></ul>').html();
//=> 
      
       ... 
      
      
Copy the code

$.contains( container, contained )

Check to see if the contained element is a child of the Container element

$.parseHTML( data [, context ] [, keepScripts ] )

Parse strings into DOM node arrays. The context parameter has no meaning for Chreeio, but is used to maintain APi compatibility.

Cheerio tutorial

Hello there!