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

TypeScript में HTML पार्सिंग: उपकरण चुनना

HTML पार्सिंग पार्सर, वेब स्क्रैपिंग, सामग्री विश्लेषण और परीक्षण स्वचालन विकसित करते समय प्रमुख कार्यों में से एक है। TypeScript (और Node.js) पारिस्थितिकी तंत्र में कई परिपक्व लाइब्रेरीज़ हैं जो HTML दस्तावेज़ों के साथ काम करने, डेटा निकालने, DOM को संशोधित करने और क्वेरी निष्पादित करने की अनुमति देती हैं। इस लेख में, हम तीन मुख्य उपकरणों पर विचार करेंगे: cheerio, jsdom और node-html-parser, और पूर्ण टाइपिंग के साथ उनके उपयोग के उदाहरण भी दिखाएंगे।

TypeScript में HTML पार्सिंग की आवश्यकता क्यों?

TypeScript सख्त टाइपिंग जोड़ता है, जो HTML से असंरचित डेटा के साथ काम करते समय विशेष रूप से उपयोगी है। आप निकाले गए फ़ील्ड के प्रकारों को सटीक रूप से परिभाषित कर सकते हैं, रनटाइम त्रुटियों से बच सकते हैं और कोड की पठनीयता में सुधार कर सकते हैं। TypeScript में HTML पार्सिंग के लिए लाइब्रेरीज़ में आमतौर पर अंतर्निहित प्रकार होते हैं या वे @types/* पैकेज के साथ आती हैं।

1. Cheerio — हल्का और तेज़ पार्सर

Cheerio एक तेज़, लचीली और हल्की लाइब्रेरी है जो सर्वर-साइड के लिए jQuery का एक उपसमूह लागू करती है। यह पूर्ण DOM नहीं बनाता है, बल्कि HTML को पार्स करता है और नेविगेशन और हेरफेर के लिए एक सुविधाजनक API प्रदान करता है।

स्थापना

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 — Node.js में पूर्ण DOM

JSDOM Node.js के लिए शुद्ध JavaScript में WHATWG DOM और HTML मानकों का कार्यान्वयन है। यह एक पूर्ण दस्तावेज़ बनाता है, स्क्रिप्ट, इवेंट और सभी आधुनिक ब्राउज़र API का समर्थन करता है।

स्थापना

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 से धीमा, अधिक मेमोरी की खपत करता है।