Thư viện htmlparser2 được kiến trúc để xử lý nhanh chóng và linh hoạt các tài liệu đánh dấu trong môi trường thực tế. Với cơ chế dựa trên luồng dữ liệu và khả năng bỏ qua cú pháp không chuẩn, công cụ này trở thành nền tảng lý tưởng cho các tác vụ trích xuất thông tin, chuyển đổi template và phân tích cấu trúc web. Dưới đây là các kỹ thuật triển khai tiên tiến giúp tối đa hóa hiệu năng và độ tin cậy khi làm việc với thư viện.

Cài đặt và Khởi tạo

Việc tích hợp vào dự án được thực hiện thông qua trình quản lý gói tiêu chuẩn:

npm install htmlparser2
# hoặc
yarn add htmlparser2

Khai thác các API hạt nhân

1. Cơ chế xử lý sự kiện (Event-Driven)

Thay vì tải toàn bộ tài liệu vào bộ nhớ, bạn có thể lắng nghe từng phần tử khi chúng được đọc tuần tự:

import { Parser } from 'htmlparser2';

const reader = new Parser({
    onopentag(tagName, props) {
        console.log(`Bắt gặp thẻ mở: ${tagName}`, props);
    },
    ontext(rawData) {
        console.log(`Dữ liệu text: ${rawData.trim()}`);
    },
    onclosetag(tagName) {
        console.log(`Đóng thẻ: ${tagName}`);
    }
});

reader.write('<section class="main">Nội dung mẫu</section>');
reader.end();

2. Xây dựng cây DOM hoàn chỉnh

Đối với nhu cầu phân tích cấu trúc phân cấp, hàm parseDocument cung cấp cấu trúc dữ liệu đã được ánh xạ sẵn:

import { parseDocument } from 'htmlparser2';

const tree = parseDocument(`
    <nav id="menu">
        <a href="/home">Trang chủ</a>
        <a href="/about">Giới thiệu</a>
    </nav>
`);
// Cây DOM đã sẵn sàng để duyệt và thao tác

3. Xử lý luồng dữ liệu (Streaming)

Để xử lý các tệp nặng mà không gây tràn bộ nhớ, hãy kết hợp trực tiếp với WritableStream:

import { WritableStream } from 'htmlparser2/WritableStream';
import fs from 'fs';

const streamProcessor = new WritableStream({
    ontext(chunk) {
        console.log('Đoạn text nhận được:', chunk);
    }
});

fs.createReadStream('./data/large_page.html')
    .pipe(streamProcessor)
    .on('end', () => console.log('Đã xử lý xong luồng dữ liệu.'));

Tinh chỉnh tham số & Tối ưu hiệu suất

Bật chế độ XML chuyên biệt

Khi làm việc với RSS, Atom hoặc các tài liệu XML chuẩn, cần kích hoạt chế độ nghiêm ngặt để tránh phân tích sai cấu trúc:

import { parseDocument } from 'htmlparser2';

const xmlTree = parseDocument(feedRawData, {
    xmlMode: true,
    decodeEntities: true
});

// Hoặc dùng hàm chuyên dụng cho feed
import { parseFeed } from 'htmlparser2';
const structuredFeed = parseFeed(feedRawData);

Cấu hình tùy chỉnh hiệu năng

const tuningConfig = {
    decodeEntities: false,       
    lowerCaseTags: false,        
    lowerCaseAttributeNames: false,
    recognizeSelfClosing: true,  
    recognizeCDATA: true         
};

Truy vấn và Lọc phần tử

Tích hợp module DomUtils để tìm kiếm nhanh chóng mà không cần duyệt đệ quy thủ công:

import { parseDocument, DomUtils } from 'htmlparser2';

const domTree = parseDocument('<div><p id="desc">Mô tả</p><span>Chi tiết</span></div>');

const targetNode = DomUtils.getElementById('desc', domTree);
const allParagraphs = DomUtils.getElementsByTagName('p', domTree);
const customMatch = DomUtils.findAll(
    (node) => node.attribs?.class === 'active',
    domTree
);

Triển khai thực tế

1. Trích xuất dữ liệu từ website

import { parseDocument, DomUtils } from 'htmlparser2';

async function pullMarketData(rawHtml) {
    const dom = parseDocument(rawHtml);

    const items = DomUtils.getElementsByTagName('h3', dom)
        .map(node => DomUtils.textContent(node))
        .filter(text => text.startsWith('SP-'));

    const costs = DomUtils.findAll(
        node => node.attribs?.class === 'cost-tag',
        dom
    ).map(node => parseFloat(DomUtils.textContent(node).replace(/[^\d.]/g, '')));

    return { items, costs };
}

2. Tiền xử lý Template

function transformViewEngine(sourceCode) {
    const parsedTree = parseDocument(sourceCode, {
        withStartIndices: true,
        withEndIndices: true
    });

    const markers = DomUtils.findAll(
        node => node.attribs?.['data-update'],
        parsedTree
    );

    return applyTransformations(parsedTree, markers);
}

3. Tổng hợp nguồn cấp dữ liệu

import { parseFeed } from 'htmlparser2';

async function compileNewsStreams(urls) {
    const mergedList = [];

    for (const link of urls) {
        const res = await fetch(link);
        const raw = await res.text();
        const feed = parseFeed(raw);

        if (feed?.items) {
            mergedList.push(...feed.items.map(entry => ({
                ...entry,
                origin: feed.title || link
            })));
        }
    }

    return mergedList.sort((x, y) =>
        new Date(y.pubDate || y.updated) - new Date(x.pubDate || x.updated)
    );
}

Quản lý tài nguyên & Xử lý lỗi

Xử lý hàng loạt & Tối ưu bộ nhớ

// Tái sử dụng instance để giảm gánh nặng GC
function parallelParse(docs) {
    return docs.map(content => {
        const handler = new DomHandler();
        const instance = new Parser(handler);
        instance.write(content);
        instance.end();
        return handler.root;
    });
}

// Bọc luồng dữ liệu vào Promise
function readHugeFile(path) {
    return new Promise((resolve, reject) => {
        const buffer = [];
        const streamHandler = new WritableStream({
            onopentag(tag, attrs) {
                if (tag === 'record') buffer.push({ tag, attrs });
            },
            onerror(err) { reject(err); },
            onend() { resolve(buffer); }
        });

        fs.createReadStream(path).pipe(streamHandler);
    });
}

Chống lỗi & Ghi nhật ký

import { Parser } from 'htmlparser2';

function robustParser(input) {
    let output = null;
    let fault = null;

    try {
        const handler = new DomHandler((err, dom) => {
            fault = err || null;
            output = dom || null;
        });
        const runner = new Parser(handler);
        runner.write(input);
        runner.end();
    } catch (ex) {
        fault = ex;
    }

    return { output, fault };
}

Hệ sinh thái & Tích hợp

Thư viện này hoạt động hiệu quả khi kết hợp với các công cụ bổ trợ như cheerio cho cú pháp truy vấn jQuery, css-select cho bộ lọc CSS, hoặc dom-serializer để chuyển đổi ngược lại sang chuỗi HTML.

import * as cheerio from 'cheerio';
import { parseDocument } from 'htmlparser2';

const structure = parseDocument('<div><p>Văn bản gốc</p></div>');
const $ = cheerio.load(structure);

$('p').text('Đã được cập nhật');
const finalMarkup = $.html();

Điểm then chốt cần ghi nhớ

• Ưu tiên phương pháp luồng (streaming) cho các tệp lớn để tránh chiếm dụng RAM đột biến.
• Điều chỉnh tham số xmlMode chính xác dựa trên định dạng đầu vào để tránh phân tích sai cấu trúc.
• Tận dụng DomUtils để giảm thiểu vòng lặp thủ công và cải thiện tốc độ tìm kiếm.
• Luôn bao bọc các thao tác phân tích trong cơ chế xử lý lỗi đồng bộ hoặc callback để đảm bảo tính ổn định.

Áp dụng các kỹ thuật trên sẽ giúp quy trình xử lý markup trở nên ổn định hơn, đồng thời giảm đáng kể độ trễ trong các ứng dụng phụ thuộc vào việc đọc cấu trúc web.