Sélectionner/extraire les nœuds HTML/texte du HTML à l'aide des sélecteurs CSS

Question

Supposons que j'écrive un script de nœud qui utilise fetch pour récupérer le contenu de la page HTML dans une variable.

Maintenant, j'ai un sélecteur CSS pour ce type de contenu. Comment puis-je l'utiliser pour extraire du contenu HTML et/ou texte reconnu par les sélecteurs CSS.

S'il existe des outils/packages existants que je peux exploiter, veuillez donner une réponse à deux niveaux :

1. Basé sur des sélecteurs CSS purs
2. Outils basés sur jQuery

Answer 1

Pour extraire le contenu HTML/texte identifié par les sélecteurs CSS dans Node.js, vous pouvez utiliser différents packages tels que Cheerio, jsdom ou Puppeteer. Voici des exemples d'utilisation des sélecteurs CSS pour extraire du contenu pour des outils basés sur des sélecteurs CSS purs et basés sur jQuery :

Basé sur des sélecteurs CSS purs : Cheerio est un package rapide et flexible qui analyse le HTML et vous permet d'utiliser des sélecteurs CSS pour extraire des données. Voici comment utiliser Cheerio pour extraire du contenu via des sélecteurs CSS :

const cheerio = require('cheerio');
const html = '
Hello World!
';

const $ = cheerio.load(html);
const content = $('.content').text();

console.log(content); // Output: Hello World!

Outils basés sur jQuery : Si vous préférez la syntaxe jQuery, vous pouvez utiliser un package comme jQuery ou JSDOM. Voici un exemple utilisant jQuery :

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const html = '
Hello World!
';
const dom = new JSDOM(html);
const $ = require('jquery')(dom.window);

const content = $('.content').text();

console.log(content); // Output: Hello World!

Dans les deux exemples, nous chargeons d'abord le contenu HTML à l'aide d'un package (Cheerio ou JSDOM), puis utilisons des sélecteurs CSS pour sélectionner le contenu souhaité. Enfin, nous extrayons le texte de l'élément sélectionné à l'aide de la méthode text().