JavaScript:
Analysera HTML
Hur man gör:
Låt oss tolka HTML med hjälp av DOMParser-API i JavaScript.
const parser = new DOMParser();
const htmlString = `<p>Hello, world!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // Utmatning: Hello, world!
Nu, låt oss ta något mer specifikt, som ett element med en klass:
const htmlString = `<div><p class="greeting">Hello, again!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // Utmatning: Hello, again!
Djupdykning
Att tolka HTML är lika gammalt som webben. Inledningsvis var det en webbläsargrej - webbläsare tolkade HTML för att visa webbsidor. Över tid ville programmerare delta i denna process, vilket ledde till API:er som DOMParser.
Alternativ? Visst. Vi har bibliotek som jQuery och verktyg som BeautifulSoup för Python. Men JavaScripts inbyggda DOMParser är snabb och inbyggd, inget behov av extra bibliotek.
När det gäller implementering, när du tolkar HTML med DOMParser, skapas ett Document-objekt. Tänk på det som en hierarkisk modell av ditt HTML. När du har den kan du navigera och manipulera den precis som du skulle med en vanlig webbsidas DOM.
Här är grejen—tolkning kan snubbla på dåligt formaterad HTML. Webbläsare är förlåtande, men DOMParser kanske inte är det. Därför kan tredjepartsbibliotek göra ett bättre jobb med att städa upp i komplexa uppgifter eller rörigt HTML.
Se även
- MDN Web Docs om
DOMParser-API: MDN DOMParser - jQuery:s tolkningskapaciteter: jQuery.parseHTML()
- Cheerio, en snabb, flexibel och smal implementering av kärnjQuery för servern: Cheerio.js
- För icke-JS-tolkning: Pythons BeautifulSoup-bibliotek: Beautiful Soup