تحليل HTML في JavaScript (Node.js)

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

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

1. Cheerio — محلل خفيف وسريع

Cheerio هي مكتبة سريعة ومرنة وخفيفة الوزن، تطبق مجموعة فرعية من jQuery للجانب الخادم. وهي مثالية لتحليل HTML الثابت، عندما لا تكون هناك حاجة لتنفيذ JavaScript على الصفحة.

التثبيت

npm install cheerio

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

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

async function parseHTML() {    const response = await axios.get('https://example.com');    const $ = cheerio.load(response.data);        // استخراج عنوان الصفحة    const title = $('title').text();    console.log('العنوان:', title);        // الحصول على جميع الروابط    const links = [];    $('a').each((i, el) => {        links.push($(el).attr('href'));    });    console.log('الروابط:', links);        // تحليل جدول    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('بيانات الجدول:', tableData);}

parseHTML().catch(console.error);

مزايا Cheerio

أداء عالٍ — يعمل أسرع حتى 8 مرات من البدائل
صياغة jQuery مألوفة
استهلاك منخفض للذاكرة
تثبيت وإعداد بسيط

العيوب

لا يدعم المحتوى الديناميكي
لا يمكنه تنفيذ JavaScript
غير مناسب لتطبيقات SPA

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

JSDOM يحاكي بيئة المتصفح في Node.js، مما يوفر تنفيذًا كاملاً لـ DOM ومحلل HTML. على عكس Cheerio، يمكن لـ JSDOM تنفيذ JavaScript، مما يجعله مناسبًا لتحليل الصفحات ذات المحتوى الديناميكي.

التثبيت

npm install jsdom

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

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;        // الحصول على جميع الفقرات    const paragraphs = Array.from(document.querySelectorAll('p'))        .map(p => p.textContent);    console.log('الفقرات:', paragraphs);        // العمل مع السمات    const images = Array.from(document.querySelectorAll('img'))        .map(img => ({            src: img.getAttribute('src'),            alt: img.getAttribute('alt')        }));    console.log('الصور:', images);        // تنفيذ النصوص البرمجية (بحذر!)    const { window } = new JSDOM(`<body>        <script>            document.body.innerHTML += '<p>محتوى ديناميكي</p>';        </script>    </body>`, { runScripts: 'dangerously' });        console.log(window.document.body.innerHTML);}

parseWithJSDOM().catch(console.error);