TypeScript:
ניתוח HTML

איך לעשות:

בדוגמה זו נשתמש במודול ’node-html-parser’ לצורך פרסור HTML ב-TypeScript.

import { parse } from 'node-html-parser';

// קטע HTML פשוט לדוגמה
const html = `
  <ul id="fruits">
    <li class="apple">Apple</li>
    <li class="banana">Banana</li>
  </ul>
`;

// פרסור ה-HTML והמרתו ל-DOM וירטואלי
const root = parse(html);

// הדפסת תוצאות פרקטיות
console.log(root.querySelector('.apple').innerText); // Apple
console.log(root.querySelector('.banana').textContent); // Banana

קוד ה-TypeScript הזה מדפיס Apple ואחריו Banana - הטקסט מתוך האלמנטים ב-HTML.

עיון מעמיק

בהיסטוריה, פרסור HTML התבצע בעיקר על ידי דפדפנים כדי להציג דפי אינטרנט. בשנים האחרונות, גידול במספר מפתחים וכלים שמתעסקים ב-web scraping (איסוף נתונים אוטומטי מאתרים) ו-SEO (אופטימיזציה למנועי חיפוש) הביא לכך שיש צורך גובר בפרסור בצד הלקוח והשרת. ישנם שיטות חלופיות כמו ביטויים רגולריים אך הם לא מומלצות כיוון שהם פגיעים לשגיאות ופחות קריאים. פרסור HTML נכון דורש מתודולוגיה שחוזרת על הדרך בה הדפדפן עובד – כלומר, יצירת עץ DOM שמשקף את מבנה ה-HTML.

ראה גם

• מדריך node-html-parser: https://github.com/taoqf/node-html-parser
• מידע נוסף על DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
• מדריך ל-web scraping ב-TypeScript: https://dev.to/ryands17/web-scraping-in-typescript-5g7n