تحليل HTML في Node.js: أفضل المكتبات وأمثلة الكود

تحليل HTML في JavaScript (Node.js): دليل شامل

تحليل HTML هي إحدى المهام الأساسية عند تطوير المحللات (web scraper's) وأتمتة جمع البيانات. في نظام Node.js البيئي، توجد عدة مكتبات قوية تسمح باستخراج المعلومات من مستندات HTML. في هذه المقالة، سنستعرض ثلاث أدوات رئيسية: Cheerio، JSDOM و Puppeteer، ونقارن إمكانياتها ونقدم أمثلة عملية للكود.

1. Cheerio — jQuery خفيف الوزن للخادم

Cheerio هي المكتبة الأكثر شيوعًا لتحليل HTML في Node.js. تنفذ بناء جملة jQuery، ولكنها تعمل بدون بيئة متصفح، مما يجعلها سريعة وموفرة للذاكرة. Cheerio مناسبة تمامًا لصفحات HTML الثابتة التي لا تتطلب تنفيذ JavaScript.

التثبيت

npm install cheerio

مثال على الاستخدام

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

async function parsePage(url) {    const response = await axios.get(url);    const $ = cheerio.load(response.data);

    // استخراج عنوان الصفحة    const title = $('h1').text().trim();

    // جمع جميع الروابط    const links = [];    $('a').each((i, el) => {        const href = $(el).attr('href');        if (href) links.push(href);    });

    return { title, links };}

// الاستخدامparsePage('https://example.com').then(data => console.log(data));

متى تختار Cheerio:

• صفحات ثابتة بدون محتوى ديناميكي
• متطلبات أداء عالية
• بناء جملة jQuery بسيط
• لا حاجة لتصيير JavaScript

2. JSDOM — تنفيذ DOM كامل

JSDOM يحاكي بيئة المتصفح، مما ينشئ نموذج DOM كامل. على عكس Cheerio، يدعم JSDOM تنفيذ JavaScript، مما يسمح بتحليل الصفحات التي يتم إنشاء محتواها بواسطة البرامج النصية. ومع ذلك، هذا يأتي بتكلفة وظيفية — تستهلك المكتبة موارد أكثر.

التثبيت

npm install jsdom

مثال على الاستخدام

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

async function parseDynamicPage(html) {    const dom = new JSDOM(html, {        runScripts: 'dangerously',        resources: 'usable'    });

    const document = dom.window.document;

    // انتظار تنفيذ البرامج النصية    await new Promise(resolve => setTimeout(resolve, 2000));

    const items = [];    document.querySelectorAll('.product-item').forEach(el => {        items.push({            name: el.querySelector('.product-name')?.textContent,            price: el.querySelector('.price')?.textContent        });    });

    return items;}

// مثال مع تمرير HTMLconst html = `<html><body><div class="product-item">...</div></body></html>`;parseDynamicPage(html).then(data => console.log(data));

متى تختار JSDOM:

• صفحات ذات محتوى ديناميكي (AJAX، React، Vue)
• الحاجة للتعامل مع أحداث DOM
• اختبار تطبيقات الويب
• استخراج البيانات من SPA (تطبيقات الصفحة الواحدة)

3. Puppeteer — متصفح تحت التحكم بالكود

Puppeteer هو متصفح كامل بدون واجهة رسومية (headless) (Chrome/Chromium) مع تحكم برمجي. ينفذ JavaScript، ويحمل الموارد، ويعالج الكوكيز والجلسات. Puppeteer هي الأداة الأقوى، ولكنها الأثقل من حيث الموارد.

التثبيت

npm install puppeteer

مثال على الاستخدام

const puppeteer = require('puppeteer');

async function parseWithBrowser(url) {    const browser = await puppeteer.launch({ headless: true });    const page = a