Parfait ! Vous pouvez maintenant vous lancer.
Pour l'instant, je vais illustrer certaines fonctionnalités de base de Cheerio à l'aide d'un document HTML statique. Copiez-collez simplement le contenu ci-dessous dans un nouveau fichier static.html au sein de votre projet :
<!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>
Ensuite, vous devez fournir le fichier HTML comme entrée à Cheerio, qui renverra alors l'API résultante :
import fs from 'fs'
import * as cheerio from 'cheerio'
const staticHTML = fs.readFileSync('static.html')
const $ = cheerio.load(staticHTML)
Si vous recevez une erreur à cette étape, assurez-vous que le fichier d'entrée contient un document HTML valide, car à partir de la version 1.0.0 de Cheerio, ce critère est également vérifié.
Vous pouvez désormais commencer à explorer les possibilités offertes par Cheerio. Le package NPM est réputé pour sa syntaxe de type jQuery et l’utilisation de sélecteurs CSS pour extraire les nœuds que vous recherchez. Vous pouvez consulter la documentation officielle pour vous faire une meilleure idée.
Imaginons que vous souhaitiez extraire le titre de la page :
const title = $('title').text()
console.log("Static HTML page title:", title)
Nous devrions tester cela, n'est-ce pas ? Vous utilisez Typescript, vous devez donc compiler le code, ce qui créera le répertoire dist, puis exécuter le fichier index.js associé. Pour simplifier, je vais définir le script suivant dans le fichier package.json :
"scripts": {
"test": "npx tsc && node dist/index.js",
}
De cette façon, il me suffit d'exécuter :
npm run test
et le script se chargera des deux étapes que je viens de décrire.
D'accord, mais que se passe-t-il si le sélecteur correspond à plusieurs éléments HTML ? Essayons d'extraire le nom et la valeur boursière des éléments présentés dans la liste non ordonnée :
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)
Exécutez à nouveau le script de raccourci, et la sortie de votre terminal devrait ressembler à ceci :
Static HTML page title: Page Name - Static HTML Example
All items stock: { 'Item 1': '12', 'Item 2': '422', 'Item 3': '5' }
