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

تحليل HTML في TypeScript: اختيار الأداة

تحليل HTML هو إحدى المهام الرئيسية عند تطوير المحللات، واستخراج بيانات الويب، وتحليل المحتوى، وأتمتة الاختبارات. في نظام TypeScript (و Node.js) توجد عدة مكتبات ناضجة تسمح بالعمل مع مستندات HTML، واستخراج البيانات، وتعديل DOM، وتنفيذ الاستعلامات. في هذه المقالة، سنناقش ثلاث أدوات رئيسية: cheerio و jsdom و node-html-parser، وسنعرض أمثلة على استخدامها مع تصنيف كامل.

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

يضيف TypeScript تصنيفًا صارمًا، وهو مفيد بشكل خاص عند العمل مع بيانات غير منظمة من HTML. يمكنك تحديد أنواع الحقول المستخرجة بدقة، وتجنب أخطاء وقت التشغيل، وتحسين قابلية قراءة الكود. عادةً ما تحتوي مكتبات تحليل HTML في TypeScript على أنواع مدمجة أو تأتي مع حزم @types/*.

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

Cheerio هي مكتبة سريعة ومرنة وخفيفة الوزن تنفذ مجموعة فرعية من jQuery للجانب الخادم. لا تنشئ DOM كاملاً، بل تحلل HTML وتوفر واجهة برمجة تطبيقات ملائمة للتنقل والتلاعب.

التثبيت

npm install cheerionpm install --save-dev @types/cheerio

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

import * as cheerio from 'cheerio';

interface ParsedProduct {  title: string;  price: number;  link: string;}

const html = `  <div class="product">    <h2 class="title">لابتوب</h2>    <span class="price">75000</span>    <a href="/product/1">المزيد</a>  </div>`;

const $ = cheerio.load(html);const products: ParsedProduct[] = [];

$('.product').each((index, element) => {  const title = $(element).find('.title').text().trim();  const priceText = $(element).find('.price').text().trim();  const price = parseFloat(priceText);  const link = $(element).find('a').attr('href') || '';

  if (title && !isNaN(price)) {    products.push({ title, price, link });  }});

console.log(products);// [{ title: 'لابتوب', price: 75000, link: '/product/1' }]

المزايا: أداء عالٍ، بناء جملة jQuery مألوف، حجم صغير.

العيوب: لا يدعم تنفيذ JavaScript، ولا يوجد DOM كامل.

2. JSDOM — DOM كامل في Node.js

JSDOM هو تطبيق لمعايير WHATWG DOM و HTML في JavaScript خالص لـ Node.js. ينشئ مستندًا كاملاً، ويدعم البرامج النصية والأحداث وجميع واجهات برمجة التطبيقات الحديثة للمتصفح.

التثبيت

npm install jsdomnpm install --save-dev @types/jsdom

مثال مع التصنيف

import { JSDOM } from 'jsdom';

interface Article {  headline: string;  summary: string;  url: string;}

const html = `  <article>    <h1>TypeScript 5.0: إمكانيات جديدة</h1>    <p>نظرة عامة على التغييرات والتحسينات الرئيسية</p>    <a href="/article/ts5">اقرأ</a>  </article>`;

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

const articles: Article[] = [];const articleElements = document.querySelectorAll('article');

articleElements.forEach((article) => {  const headline = article.querySelector('h1')?.textContent?.trim() || '';  const summary = article.querySelector('p')?.textContent?.trim() || '';  const url = article.querySelector('a')?.getAttribute('href') || '';  articles.push({ headline, summary, url });});

console.log(articles);

المزايا: محاكاة كاملة للمتصفح، دعم JavaScript، العمل مع النماذج والأحداث.

العيوب: أثقل، أبطأ من cheerio، يستهلك ذاكرة أكثر.