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

تحليل HTML في TypeScript: دليل شامل للمطور

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

لماذا تحليل HTML في TypeScript؟

تحليل HTML ضروري من أجل:

• جمع البيانات (استخراج) من مواقع الويب (الأسعار، الأخبار، المحتوى).
• أتمتة اختبار واجهات الويب.
• استخراج المعلومات من ملفات HTML الثابتة.
• ترحيل المحتوى بين الأنظمة.

يساعد TypeScript في تجنب أخطاء الأنواع عند العمل مع عناصر DOM ونتائج التحليل.

المكتبات الرئيسية لتحليل HTML في TypeScript

دعنا نستعرض ثلاث أدوات شائعة تعمل بشكل ممتاز مع TypeScript.

1. Cheerio

Cheerio هي مكتبة سريعة ومرنة وخفيفة الوزن تنفذ مجموعة فرعية من jQuery للعمل مع HTML على جانب الخادم. لا تتطلب متصفحًا وهي مناسبة تمامًا لتحليل الصفحات الثابتة. بالنسبة لـ TypeScript، توجد حزمة @types/cheerio بأنواع جاهزة.

التثبيت:

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

مثال على التحليل باستخدام Cheerio في TypeScript:

import * as cheerio from 'cheerio';

const html = `<html><body><h1 class="title">مرحبًا بالعالم!</h1></body></html>`;const $ = cheerio.load(html);

const title: string = $('h1.title').text();console.log(title); // مرحبًا بالعالم!

// استخراج البيانات المكتوبةinterface PageData {  title: string;  links: string[];}

const data: PageData = {  title: $('h1').text(),  links: $('a').map((i, el) => $(el).attr('href')).get()};

المزايا: بناء جملة jQuery، سرعة عالية، حجم صغير.

العيوب: لا ينفذ JavaScript، غير مناسب لتطبيقات الصفحة الواحدة الديناميكية (SPA).

2. JSDOM

JSDOM هي محاكاة لبيئة المتصفح (DOM) في Node.js. تسمح بتنفيذ JavaScript على الصفحة والعمل مع واجهة برمجة تطبيقات DOM الكاملة. يدعم TypeScript JSDOM من خلال حزمة @types/jsdom.

التثبيت:

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

مثال على التحليل باستخدام JSDOM في TypeScript:

import { JSDOM } from 'jsdom';

const html = `<html><body><div id="content">نص داخلي</div></body></html>`;const dom = new JSDOM(html);const document = dom.window.document;

const content: string | null = document.getElementById('content')?.textContent ?? '';console.log(content); // نص داخلي

// كتابة العنصرconst contentDiv: HTMLElement | null = document.getElementById('content');if (contentDiv) {  console.log(contentDiv.innerHTML);}

المزايا: DOM كامل، دعم JavaScript، توافق دقيق مع المتصفح.

العيوب: أثقل من Cheerio، أبطأ في المهام البسيطة.

3. Puppeteer (مع TypeScript)

Puppeteer هي مكتبة للتحكم في متصفح Chrome/Chromium. وهي مثالية لتحليل الصفحات الديناميكية (React، Vue، Angular). TypeScript مدعوم بشكل افتراضي.

التثبيت:

npm install puppeteer

مثال على التحليل باستخدام Puppeteer في TypeScript:

import puppeteer from 'puppeteer';

async function parsePage(url: string): Promise<string> {  const browser = await puppeteer.