JavaScript:
Analysering av HTML
Hvordan:
La oss parse HTML ved hjelp av DOMParser-APIen i JavaScript.
const parser = new DOMParser();
const htmlString = `<p>Hei, verden!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // Utdata: Hei, verden!
Nå, la oss ta tak i noe mer spesifikt, som et element med en klasse:
const htmlString = `<div><p class="greeting">Hei, igjen!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // Utdata: Hei, igjen!
Dypdykk
Å parse HTML er like gammelt som weben selv. I starten var det en nettlesergreie – nettlesere parslet HTML for å vise nettsider. Over tid ønsket programmerere å tappe inn i denne prosessen, noe som førte til APIer som DOMParser.
Alternativer? Absolutt. Vi har biblioteker som jQuery og verktøy som BeautifulSoup for Python. Men JavaScripts innebygde DOMParser er rask og innebygd, ingen behov for ekstra biblioteker.
Når det gjelder implementering, når du parser HTML med DOMParser, oppretter det et Document-objekt. Tenk på det som en hierarkisk modell av HTML-en din. Når du har den, kan du navigere og manipulere den akkurat som du ville gjort med en normal nettsides DOM.
Men her er tingen – parsing kan snuble på feilformet HTML. Nettlesere er tilgivende, men DOMParser er kanskje ikke det. Derfor, for komplekse oppgaver eller rotete HTML, kan tredjepartsbiblioteker gjøre en bedre oppryddingsjobb.
Se også
- MDN Web Docs om
DOMParser-APIen: MDN DOMParser - jQuery sin parsing-kapasiteter: jQuery.parseHTML()
- Cheerio, en rask, fleksibel og slank implementering av kjernnen i jQuery for serveren: Cheerio.js
- For ikke-JS parsing: Pythons BeautifulSoup-bibliotek: Beautiful Soup