تحليل HTML في TypeScript: المكتبات والأدوات وأمثلة الكود

تحليل HTML في TypeScript: نظرة عامة على أفضل المكتبات والأدوات

تحليل HTML هي إحدى المهام الأساسية عند تطوير تطبيقات الويب الحديثة، خاصة في مجال استخراج بيانات الويب، وأتمتة الاختبارات، وتحليل البيانات. TypeScript، كإضافة ثابتة الكتابة فوق JavaScript، توفر للمطورين أدوات قوية لمعالجة مستندات HTML بشكل آمن وفعال. في هذه المقالة، سنستعرض المكتبات الرئيسية لتحليل HTML في TypeScript، وخصائصها، ومزاياها، وأمثلة على استخدامها.

لماذا نحتاج إلى تحليل HTML في TypeScript؟

يضيف TypeScript كتابة صارمة، وهو مفيد بشكل خاص عند العمل مع هياكل HTML المعقدة. هذا يسمح بـ:

• تجنب أخطاء وقت التشغيل المرتبطة بالوصول غير الصحيح إلى عناصر DOM
• تحسين الإكمال التلقائي في بيئة التطوير المتكاملة (IDE)
• إنشاء كود أكثر قابلية للقراءة والصيانة
• التكامل بسهولة مع الأطر الحديثة (Angular، React، Vue)

المكتبات الشائعة لتحليل HTML

1. Cheerio

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

التثبيت:

npm install cheerionpm install @types/cheerio -D

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

import * as cheerio from 'cheerio';

const html = `  <div class="container">    <h1>العنوان</h1>    <p class="content">نص الفقرة</p>    <ul>      <li>العنصر 1</li>      <li>العنصر 2</li>    </ul>  </div>`;

const $ = cheerio.load(html);

// استخراج العنوانconst title = $('h1').text();console.log(title); // "العنوان"

// استخراج جميع عناصر القائمةconst items: string[] = [];$('li').each((index, element) => {  items.push($(element).text());});console.log(items); // ["العنصر 1", "العنصر 2"]

// البحث حسب الفئةconst content = $('.content').text();console.log(content); // "نص الفقرة"

2. JSDOM

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

التثبيت:

npm install jsdomnpm install @types/jsdom -D

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

import { JSDOM } from 'jsdom';

const html = `  <!DOCTYPE html>  <html>    <body>      <div id="app">        <span class="data">القيمة 1</span>        <span class="data">القيمة 2</span>      </div>    </body>  </html>`;

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

// الحصول على العنصر حسب المعرفconst app = document.getElementById('app');console.log(app?.textContent); // "القيمة 1القيمة 2"

// استخدام querySelectorconst firstData = document.querySelector('.data');console.log(firstData?.textContent); // "القيمة 1"

// الحصول على جميع العناصر حسب الفئةconst allData = document.querySelectorAll('.data');const values: string[] = [];allData.forEach(el => values.push(el.textContent || ''));console.log(values); // ["القيمة 1", "القيمة 2"]

3. Node-html-parser

Node-html-parser هو محلل HTML سريع وبسيط، مكتوب بلغة TypeScript. لا يتطلب تبعيات خارجية ومناسب تمامًا للمهام التي تكون فيها الأداء مهمًا.

التثبيت:

npm install node-html-parser

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

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

const html = `  <table>    <tr>      <td>الخلية 1</td>      <td>الخلية 2</td>    </tr>    <tr