JavaScript:
פירוק HTML

איך לעשות:

בואו ננתח HTML באמצעות ה-API DOMParser ב-JavaScript.

const parser = new DOMParser();
const htmlString = `<p>שלום, עולם!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // פלט: שלום, עולם!

עכשיו, בואו נתפוס משהו יותר ספציפי, כמו אלמנט עם מחלקה:

const htmlString = `<div><p class="greeting">שלום, שוב!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // פלט: שלום, שוב!

צלילה עמוקה

ניתוח HTML הוא כבר ישן כמו הרשת עצמה. בתחילה, זה היה דבר של דפדפנים—דפדפנים נתחו HTML כדי להציג דפי אינטרנט. עם הזמן, מתכנתים רצו לחדור לתהליך הזה, מה שהוביל ל-APIs כמו DOMParser.

אלטרנטיבות? בטח. יש לנו ספריות כמו jQuery וכלים כמו BeautifulSoup ל-Python. אך ה-DOMParser המקורי של JavaScript מהיר ומובנה, אין צורך בספריות נוספות.

מבחינת היישום, כאשר אתה מנתח HTML עם DOMParser, הוא יוצר אובייקט Document. חשוב על זה כמודל היררכי של ה-HTML שלך. כשיש לך את זה, אתה יכול לנווט ולשנות אותו בדיוק כמו שהיית עושה עם DOM של דף אינטרנט רגיל.

הנה העניין—ניתוח יכול להיתקל בבעיות עם HTML לקוי. דפדפנים סולחים, אבל DOMParser עשוי שלא להיות. לכן, למשימות מורכבות או HTML מבולגן, ספריות צד שלישי עשויות לעשות עבודה נקייה יותר.

ראו גם

• מסמכי האינטרנט של MDN על ה-API DOMParser: MDN DOMParser
• יכולות הניתוח של jQuery: jQuery.parseHTML()
• Cheerio, מימוש מהיר, גמיש ורזה של ליבת jQuery עבור השרת: Cheerio.js
• לניתוח לא ב-JS: ספריית BeautifulSoup של Python: Beautiful Soup