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

TypeScript में HTML पार्सिंग: सर्वश्रेष्ठ लाइब्रेरी और टूल्स की समीक्षा

HTML पार्सिंग आधुनिक वेब एप्लिकेशन डेवलपमेंट में एक महत्वपूर्ण कार्य है, खासकर वेब स्क्रैपिंग, टेस्टिंग ऑटोमेशन और डेटा एनालिसिस के क्षेत्रों में। TypeScript, JavaScript का एक स्टैटिकली टाइप्ड सुपरसेट होने के नाते, डेवलपर्स को HTML डॉक्यूमेंट्स को सुरक्षित और कुशलता से प्रोसेस करने के लिए शक्तिशाली टूल्स प्रदान करता है। इस लेख में हम TypeScript में HTML पार्सिंग के लिए प्रमुख लाइब्रेरी, उनकी विशेषताएं, फायदे और उपयोग के उदाहरण देखेंगे।

TypeScript में HTML पार्सिंग क्यों ज़रूरी है?

TypeScript सख्त टाइपिंग जोड़ता है, जो जटिल HTML संरचनाओं के साथ काम करते समय विशेष रूप से उपयोगी है। यह आपको:

• DOM एलिमेंट्स तक गलत एक्सेस से जुड़ी रनटाइम त्रुटियों से बचाता है
• IDE में ऑटो-कम्प्लीशन को बेहतर बनाता है
• अधिक पठनीय और मेंटेन करने योग्य कोड बनाने में मदद करता है
• आधुनिक फ्रेमवर्क (Angular, React, Vue) के साथ आसानी से इंटीग्रेट होता है

HTML पार्सिंग के लिए लोकप्रिय लाइब्रेरी

1. Cheerio

Cheerio एक तेज़, लचीली और हल्की लाइब्रेरी है जो सर्वर-साइड के लिए jQuery का एक सबसेट इम्प्लीमेंट करती है। यह स्टैटिक HTML डॉक्यूमेंट्स को पार्स करने के लिए आदर्श है।

इंस्टॉलेशन:

npm install cheerio
npm 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 Node.js पर DOM और HTML API का एक पूर्ण इम्प्लीमेंटेशन है। Cheerio के विपरीत, यह ब्राउज़र एनवायरनमेंट को इम्यूलेट करता है, जिससे HTML पेज के अंदर JavaScript कोड को चलाना संभव होता है।

इंस्टॉलेशन:

npm install jsdom
npm 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;

// ID से एलिमेंट प्राप्त करना
const app = document.getElementById('app');
console.log(app?.textContent); // "मान 1मान 2"

// querySelector का उपयोग
const 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>
      <td>सेल 3</td>
      <td>सेल 4</td>
    </tr>
  </table>
`;

const root = parse(html);

// टेबल से सभी सेल निकालना
const cells = root.querySelectorAll('td');
const cellTexts: string[] = cells.map(cell => cell.text);
console.log(cellTexts); // ["सेल 1", "सेल 2", "सेल 3", "सेल 4"]

// पहली पंक्ति प्राप्त करना
const firstRow = root.querySelector('tr');
console.log(firstRow?.text); // "सेल 1सेल 2"