Parsowanie HTML w Node.js czyli wstęp do Cheerio (jQuery dla Node.js)

Jak parsować HTML w Node.js? Umożliwia to biblioteka Cheerio dla Node.js. W artykule przedstawiam czym jest Cheerio i jak z jego pomocą parsować HTML, wyszukiwać elementy tak jak w jQuery. ✌

Czym jest Cheerio?

Cheerio to biblioteka dla Node.js, która parsuje kod HTML i pomaga zwrócić oczekiwany rezultat (np. pobierane są wartości z tabelki, która znajduje się w HTML). Cheerio to jQuery dla Node.js.

Fast, flexible & lean implementation of core jQuery designed specifically for the server.
Opis na oficjalnej stronie Cheerio – https://cheerio.js.org/

Oficjalna strona internetowa Cheerio – https://cheerio.js.org/

Co można zrobić z pomocą Cheerio?

Z pomocą Cheerio można zrobić wiele ciekawych rzeczy. Oczywiście samo Cheerio nie wystarczy do pobierania kodu HTML z jakielkolwiek strony internetowej, ponieważ służy on tylko do pracy na gotowym kodzie (parsowania wcześniej przygotowanego kodu HTML). Do pobierania kodu ze strony służy inna biblioteka.

Kilka pomysłów do czego można wykorzystać Cheerio:

wyszukiwania treści
wyszukiwania tytułów z bloga oraz linków
sprawdzanie ilości elementów (length) dla konkretnego tagu HTML
manipulacji kodu HTML
sprawdzanie oferty / cen
sprawdzanie czy są nowe wiadomości (wymaga innej biblioteki, aby móc się zalogować)
… i wiele innych

Możliwości jest wiele.

Cheerio to nie przeglądarka internetowa

Należy pamiętać o tym, że Cheerio nie jest przeglądarką internetową, a jedynie parsuje HTML. To znaczy, że nie zalogujemy się do jakiejś strony internetowej czy nie zrobimy jakiejś akcji na niej. Do tego służą inne biblioteki. Łącząc działanie bibliotek można uzyskać znacznie więcej możliwości i zbudować bardziej ciekawe rzeczy.

Wprowadzenie do Cheerio

Wymagania

Do rozpoczęcia zabawy potrzeba:

Node.js (wersja jaka została użyta: 10.15.3)
npm (wersja jaka została użyta: 6.6.0)
edytor kodu (np. Visual Studio Code)

Instalacja Cheerio

Do zainstalowania należy użyć komendy:

npm install cheerio

Przykładowy kod Cheerio

Poniżej przykładowy kod (dostępny w dokumentacji):

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

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

$.html()
//=> <h2 class="title welcome">Hello there!</h2>

Na początku importujemy bibliotekę Cheerio, a następnie wczytujemy przykładowy kod HTML.

Funkcja .text() na wskazanym elemencie zmienia tekst. Jeśli do funkcji nie przekażemy parametru to będzie pobrany tekst z elementu – czyli: ’Hello world’ (ale wtedy trzeba przypisać to do zmiennej).

Następnie do znacznika h2 została dodana klasa welcome.

Na końcu wyświetlany jest kod HTML.

Do uruchomienia kodu w Node.js standardowo należy użyć komendy (zakładam, że plik z kodem nazywa się server.js):

node server

Renderowanie HTML

Do wyrenderowania kodu HTML służy funkcja .html(), który możemy wywołać na konkretnym elemencie lub na całym dokumencie (root).

$('div').html()
// <div class="test">example</div>

$.root().html();
// <html>
//   <head></head>
//   <body>
//     <div class="test'>example</div>
//   </body>
// </html>

Pobieranie i zmiana tekstu – .text()

Funkcja .text() służy do pobierania lub zmiany tekstu w elemencie HTML. Przykład powyżej przedstawia zmianę tekstu. Aby pobrać zawartość należy nie przekazywać parametru (stringa).

Pobieranie i zmiana atrybutów HTML – .attr()

Do pobierania lub zmiany atrybutów HTML służy funkcja .attr(). Aby usunąć dany atrybut należy przekazać jako wartość null.

// <div class="test" id="example">Lorem</div>

$('div').attr('id')
// example

$('.test').attr('id', 'example2').html()
// <div class="test" id="example2">Lorem</div>

$('.test').attr('id', null).html()
// <div class="test">Lorem</div>

Pobierania i zmiana wartości input – .val()

Pobieranie i zmiana wartości input, ale także select i textarea może odbyć się za pomocą funkcji .val()

$('input').val()
// example value

$('input').val('test').html()
// <input type="text" value="test"/>

Operacja na klasach CSS

Dodawanie klasy – .addClass(className)

Usuwanie klasy – .removeClass(className)

Usuń lub dodaj (toggle) – .toggleClass(className, [switch])

… i wiele innych metod – dokumentacja Cheerio

Mógłbym opisać więcej metod, ale oficjalna dokumentacja będzie zawsze lepsza, ponieważ zawiera wszystkie metody i treść jest na bieżąco aktualizowana przez twórców.

Znajomość jQuery bardzo pomoże w przypadku Cheerio. Jeżeli tak nie jest to konieczne jest zajrzenie do oficjalnej dokumentacji, która przedstawia dostępne metody i przykłady ich wykorzystania.

Link do oficjalnej dokumentacji Cheerio.

Cheerio na produkcji – czyli kto go używa?

Kilka przykładów z listy przygotowanej przez Cheerio:

https://github.com/cheeriojs/cheerio/wiki/Cheerio-in-Production

Walmart – do hostowania mobilnej wersji (server rendering)
GitHub Trending API – do scrapowania popularnych projektów na GitHub
x-ray – web scraper zbudowany w oparciu o cheerio

Alternatywy dla Cheerio

Istnieje kilka alternatyw dla Cheerio. Różnią się możliwościami oraz tym w jaki sposób ich się używa.

jsdom

Link: https://www.npmjs.com/package/jsdom

Celem projektu jest emulowanie przeglądarki internetowej do testowania oraz pobierania (scrapowania) stron internetowych.

htmlparser

Link: https://www.npmjs.com/package/htmlparser

Parser HTML/XML/RSS napisany w JavaScript dla przeglądarki i Node.js.

Puppeteer

Link: https://www.npmjs.com/package/htmlparser

Puppeter to przeglądarka internetowa („headless browser„) co oznacza, że może być uruchomiona w Node.js jako skrypt (bez nakładki graficznej). Oczywiście posiada możliwość połączenia tego z przeglądarką Chrome bądź Chromium. Pozwala na scrapowanie stron, wykonywania zrzutów strony czy interakcję ze stroną.