Perfekt! Jetzt kannst du loslegen.
Zunächst werde ich einige grundlegende Cheerio-Funktionen anhand eines statischen HTML-Dokuments veranschaulichen. Kopiere einfach den folgenden Inhalt und füge ihn in eine neue Datei „static.html“ in deinem Projekt ein:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Name - Static HTML Example</title>
</head>
<body>
<div class="page-heading">
<h1>Page Heading</h1>
</div>
<div class="page-container">
<div class="page-content">
<ul>
<li>
<a href="#">Item 1</a>
<p class="price">$100</p>
<p class="stock">12</p>
</li>
<li>
<a href="#">Item 2</a>
<p class="price">$200</p>
<p class="stock">422</p>
</li>
<li>
<a href="#">Item 3</a>
<p class="price">$150</p>
<p class="stock">5</p>
</li>
</ul>
</div>
</div>
<footer class="page-footer">
<p>Last Updated: Friday, September 23, 2022</p>
</footer>
</body>
</html>
Als Nächstes musst du die HTML-Datei als Eingabe an Cheerio übergeben, woraufhin Cheerio die resultierende API zurückgibt:
import fs from 'fs'
import * as cheerio from 'cheerio'
const staticHTML = fs.readFileSync('static.html')
const $ = cheerio.load(staticHTML)
Sollten Sie bei diesem Schritt eine Fehlermeldung erhalten, stellen Sie sicher, dass die Eingabedatei ein gültiges HTML-Dokument enthält, da ab Cheerio-Version 1.0.0 auch dieses Kriterium überprüft wird.
Jetzt können Sie damit beginnen, mit den Möglichkeiten von Cheerio zu experimentieren. Das NPM-Paket ist bekannt für seine jQuery-ähnliche Syntax und die Verwendung von CSS-Selektoren, um die gesuchten Knoten zu extrahieren. In der offiziellen Dokumentation finden Sie weitere Informationen dazu.
Nehmen wir an, Sie möchten den Seitentitel extrahieren:
const title = $('title').text()
console.log("Static HTML page title:", title)
Das sollten wir doch mal testen, oder? Da Sie Typescript verwenden, müssen Sie den Code kompilieren, wodurch das Verzeichnis „dist“ erstellt wird, und anschließend die zugehörige Datei „index.js“ ausführen. Der Einfachheit halber definiere ich das folgende Skript in der Datei „package.json“:
"scripts": {
"test": "npx tsc && node dist/index.js",
}
Auf diese Weise muss ich lediglich Folgendes ausführen:
npm run test
und das Skript übernimmt beide Schritte, die ich gerade beschrieben habe.
Okay, aber was ist, wenn der Selektor auf mehr als ein HTML-Element passt? Versuchen wir, den Namen und den Aktienkurs der in der ungeordneten Liste aufgeführten Elemente zu extrahieren:
const itemStocks = {}
$('li').each((index, element) => {
const name = $(element).find('a').text()
const stock = $(element).find('p.stock').text()
itemStocks[name] = stock
})
console.log("All items stock:", itemStocks)
Führen Sie nun das Shortcut-Skript erneut aus, und die Ausgabe Ihres Terminals sollte wie folgt aussehen:
Static HTML page title: Page Name - Static HTML Example
All items stock: { 'Item 1': '12', 'Item 2': '422', 'Item 3': '5' }
