HTML Parsing in JavaScript (Node.js)

HTML Parsing in JavaScript (Node.js): A Complete Guide

HTML parsing is one of the key skills of a modern web developer. In the Node.js ecosystem, there are several powerful tools for extracting data from HTML documents. In this article, we will thoroughly examine three main libraries: Cheerio, JSDOM, and Puppeteer, and also learn how to choose the right tool for a specific task.

1. Cheerio — Lightweight and Fast Parser

Cheerio is a fast, flexible, and lightweight library that implements a subset of jQuery for the server side. It is ideal for parsing static HTML when JavaScript execution on the page is not required.

Installation

npm install cheerio

Usage Example

const cheerio = require('cheerio');const axios = require('axios');

async function parseHTML() {    const response = await axios.get('https://example.com');    const $ = cheerio.load(response.data);        // Extracting the page title    const title = $('title').text();    console.log('Title:', title);        // Getting all links    const links = [];    $('a').each((i, el) => {        links.push($(el).attr('href'));    });    console.log('Links:', links);        // Parsing a table    const tableData = [];    $('table tr').each((i, row) => {        const cells = [];        $(row).find('td, th').each((j, cell) => {            cells.push($(cell).text().trim());        });        tableData.push(cells);    });    console.log('Table data:', tableData);}

parseHTML().catch(console.error);

Advantages of Cheerio

High performance — works up to 8 times faster than alternatives
Familiar jQuery syntax
Low memory consumption
Simple installation and setup

Disadvantages

Does not support dynamic content
Cannot execute JavaScript
Not suitable for SPA applications

2. JSDOM — Full DOM Implementation

JSDOM emulates a browser environment in Node.js, providing a full implementation of the DOM and HTML parser. Unlike Cheerio, JSDOM can execute JavaScript, making it suitable for parsing pages with dynamic content.

Installation

npm install jsdom

Usage Example

const { JSDOM } = require('jsdom');const axios = require('axios');

async function parseWithJSDOM() {    const response = await axios.get('https://example.com');    const dom = new JSDOM(response.data);    const document = dom.window.document;        // Getting all paragraphs    const paragraphs = Array.from(document.querySelectorAll('p'))        .map(p => p.textContent);    console.log('Paragraphs:', paragraphs);        // Working with attributes    const images = Array.from(document.querySelectorAll('img'))        .map(img => ({            src: img.getAttribute('src'),            alt: img.getAttribute('alt')        }));    console.log('Images:', images);        // Executing scripts (caution!)    const { window } = new JSDOM(`<body>        <script>            document.body.innerHTML += '<p>Dynamic content</p>';        </script>    </body>`, { runScripts: 'dangerously' });        console.log(window.document.body.innerHTML);}

parseWithJSDOM().catch(console.error);