TypeScript में HTML पार्सिंग: लाइब्रेरीज़, टूल्स और उदाहरण

TypeScript में HTML पार्सिंग: डेवलपर के लिए पूर्ण गाइड

TypeScript, JavaScript का एक सुपरसेट है जो सख्त टाइपिंग जोड़ता है। हालांकि, HTML पार्सिंग (वेब पेजों से डेटा निकालना) के लिए TypeScript, JavaScript के समान लाइब्रेरीज़ का उपयोग करता है, लेकिन टाइप्स के समर्थन के साथ। यह कोड को अधिक विश्वसनीय, समझने योग्य और रखरखाव में आसान बनाता है। इस लेख में, हम TypeScript में HTML पार्सिंग के लिए मुख्य टूल्स पर चर्चा करेंगे, कोड उदाहरण दिखाएंगे और लाइब्रेरी चुनने के लिए सुझाव देंगे।

TypeScript में HTML पार्सिंग क्यों करें?

HTML पार्सिंग निम्नलिखित के लिए आवश्यक है:

• वेबसाइटों से डेटा संग्रह (स्क्रैपिंग) (मूल्य, समाचार, सामग्री)।
• वेब इंटरफेस के ऑटोमेटेड टेस्टिंग।
• स्टैटिक HTML फ़ाइलों से जानकारी निकालना।
• सिस्टम के बीच कंटेंट माइग्रेशन।

TypeScript DOM एलिमेंट्स और पार्सिंग परिणामों के साथ काम करते समय टाइप एरर से बचने में मदद करता है।

TypeScript में HTML पार्सिंग के लिए मुख्य लाइब्रेरीज़

आइए तीन सबसे लोकप्रिय टूल्स पर नज़र डालें जो TypeScript के साथ बढ़िया काम करते हैं।

1. Cheerio

Cheerio एक तेज़, लचीली और हल्की लाइब्रेरी है जो सर्वर-साइड HTML के साथ काम करने के लिए jQuery का एक सबसेट लागू करती है। इसे ब्राउज़र की आवश्यकता नहीं है और यह स्टैटिक पेजों को पार्स करने के लिए उपयुक्त है। TypeScript के लिए, पैकेज @types/cheerio तैयार टाइप्स के साथ उपलब्ध है।

इंस्टॉलेशन:

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

TypeScript में Cheerio के साथ पार्सिंग का उदाहरण:

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 Node.js में ब्राउज़र वातावरण (DOM) का अनुकरण है। यह पेज पर JavaScript निष्पादित करने और पूर्ण DOM API के साथ काम करने की अनुमति देता है। TypeScript पैकेज @types/jsdom के माध्यम से JSDOM का समर्थन करता है।

इंस्टॉलेशन:

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

TypeScript में JSDOM के साथ पार्सिंग का उदाहरण:

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

TypeScript में Puppeteer के साथ पार्सिंग का उदाहरण:

import puppeteer from 'puppeteer';

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