Parsing HTML in TypeScript: Libraries, Tools, and Code Examples

Parsing HTML in TypeScript: Overview of the Best Libraries and Tools

Parsing HTML is one of the key tasks in developing modern web applications, especially in the areas of web scraping, test automation, and data analysis. TypeScript, as a statically typed superset of JavaScript, provides developers with powerful tools for safe and efficient processing of HTML documents. In this article, we will review the main libraries for parsing HTML in TypeScript, their features, advantages, and usage examples.

Why is HTML Parsing Needed in TypeScript?

TypeScript adds strict typing, which is especially useful when working with complex HTML structures. This allows you to:

• Avoid runtime errors related to incorrect access to DOM elements
• Improve autocompletion in the IDE
• Create more readable and maintainable code
• Easily integrate with modern frameworks (Angular, React, Vue)

Popular Libraries for Parsing HTML

1. Cheerio

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 documents.

Installation:

npm install cheerionpm install @types/cheerio -D

Usage example:

import * as cheerio from 'cheerio';

const html = `  <div class="container">    <h1>Heading</h1>    <p class="content">Paragraph text</p>    <ul>      <li>Item 1</li>      <li>Item 2</li>    </ul>  </div>`;

const $ = cheerio.load(html);

// Extracting the headingconst title = $('h1').text();console.log(title); // "Heading"

// Extracting all list itemsconst items: string[] = [];$('li').each((index, element) => {  items.push($(element).text());});console.log(items); // ["Item 1", "Item 2"]

// Searching by classconst content = $('.content').text();console.log(content); // "Paragraph text"

2. JSDOM

JSDOM is a full implementation of the DOM and HTML API for Node.js. Unlike Cheerio, it emulates a browser environment, allowing you to execute JavaScript code inside an HTML page.

Installation:

npm install jsdomnpm install @types/jsdom -D

Usage example:

import { JSDOM } from 'jsdom';

const html = `  <!DOCTYPE html>  <html>    <body>      <div id="app">        <span class="data">Value 1</span>        <span class="data">Value 2</span>      </div>    </body>  </html>`;

const dom = new JSDOM(html);const document = dom.window.document;

// Getting an element by IDconst app = document.getElementById('app');console.log(app?.textContent); // "Value 1Value 2"

// Using querySelectorconst firstData = document.querySelector('.data');console.log(firstData?.textContent); // "Value 1"

// Getting all elements by classconst allData = document.querySelectorAll('.data');const values: string[] = [];allData.forEach(el => values.push(el.textContent || ''));console.log(values); // ["Value 1", "Value 2"]

3. Node-html-parser

Node-html-parser is a fast and simple HTML parser written in TypeScript. It requires no external dependencies and is well-suited for tasks where performance is important.

Installation:

npm install node-html-parser

Usage example:

import { parse } from 'node-html-parser';

const html = `  <table>    <tr>      <td>Cell 1</td>      <td>Cell 2</td>    </tr>    <tr