Antes de comenzar, debe cumplir con las leyes y regulaciones locales y no extraer datos que se divulguen sin permiso.
A continuación se detallan algunas cosas que necesitará para este tutorial:
Cheerio es una herramienta para analizar HTML y XML en Node.js. Es muy popular en GitHub y tiene más de 23k estrellas.
Es rápido, flexible y fácil de usar. Dado que implementa un subconjunto de JQuery, es fácil comenzar con Cheerio si ya está familiarizado con JQuery.
La principal diferencia entre Cheerio y un navegador web es que Cheerio no genera representación visual, no carga CSS, no carga recursos externos ni ejecuta JavaScript. Simplemente analiza el marcado y proporciona una API para manipular las estructuras de datos resultantes. Esto explica por qué también es muy rápido: documentación de cheerio.
Si desea utilizar cheerio para recuperar páginas web, primero debe utilizar un paquete como axios o node-fetch para obtener las etiquetas.
En este ejemplo, rastrearemos los códigos ISO 3166-1 alfa-3 para todos los países y otras jurisdicciones que figuran en esta página de Wikipedia. Se encuentra en la sección de código actual de la página ISO 3166-1 alfa-3.
Así es como se ve la lista de países/jurisdicciones y sus códigos correspondientes:
En este paso, creará un directorio para su proyecto ejecutando el siguiente comando en la terminal. Este comando creará un archivo llamado learn-cheerio . Puedes darle un nombre diferente si lo deseas.
mkdir learn-cheerio
learn-cheerio Después de ejecutar con éxito el comando anterior, debería poder ver una carpeta llamada creada.
En el siguiente paso, abrirá el directorio que acaba de crear en su editor de texto favorito e inicializará el proyecto.
En este paso, navegará hasta el directorio del proyecto e inicializará el proyecto. Abra el directorio que creó en el paso anterior en su editor de texto favorito e inicialice el proyecto ejecutando el siguiente comando.
npm init -y
Una ejecución exitosa del comando anterior creará un archivo package.json en la raíz del directorio del proyecto.
En el siguiente paso, instalará las dependencias del proyecto.
En este paso, instalará las dependencias del proyecto ejecutando el siguiente comando. Esto llevará unos minutos, así que tenga paciencia.
npm i axios cheerio bastante.
La ejecución exitosa del comando anterior registrará tres dependencias en el archivo bajo el campo package.json . dependencies primera dependencia es axios , la segunda es cheerio y la tercera es pretty .
axios es un cliente http muy popular que puede ejecutarse en nodos y navegadores. Lo necesitamos porque cheerio es un analizador de tokens.
Para que Cheerio analice las etiquetas y rastree los datos que necesita, necesitamos axios para obtener las etiquetas del sitio web. Si lo prefieres, puedes utilizar otro cliente HTTP para obtener el token. No tiene que ser axios .
Pretty es un paquete npm para embellecer el marcado para que sea legible cuando se imprima en el terminal.
En la siguiente sección, examinará las etiquetas de las que se extraerán los datos.
Antes de extraer datos de una página web, es importante comprender la estructura HTML de la página.
En este paso, examina la estructura HTML de la página web de la que desea extraer datos.
Navegue a la página de códigos ISO 3166-1 alfa-3 en Wikipedia. En la sección "Códigos actuales", hay una lista de países y sus códigos correspondientes. CTRL + SHIFT + I Puede abrir DevTools presionando la combinación de teclas en Chrome o haciendo clic derecho y seleccionando la opción "Inspeccionar".
Esta es mi lista en Chrome DevTools:
En la siguiente sección, escribirá el código para rastrear la web.
En esta sección, escribirá el código para extraer los datos que nos interesan. Primero ejecute el siguiente comando que creará el archivo app.js
touch app.js
La ejecución exitosa del comando anterior creará un archivo app.js en el directorio raíz del directorio del proyecto.
Como cualquier otro paquete de Node, primero debes requerir axios , cheerio y axios antes de comenzar a usarlos. Puedes hacer esto agregando el siguiente código en la parte superior del archivo que acabas de pretty . app.js
const axios = require("axios");
const cheerio = requerir("cheerio");
const Pretty = require("pretty"); antes de escribir el código para extraer los datos, necesitamos aprender cheerio . Analizaremos el marcado a continuación e intentaremos manipular la estructura de datos resultante. Esto nos ayudará a aprender la sintaxis de Cheerio y sus métodos más utilizados.
El marcado a continuación es ul li que contiene nuestro elemento.
marcado constante = ` <ul clase="frutas"> <li class="frutas__mango"> Mango </li> <li class="frutas__manzana"> manzana </li> </ul> `;
Agregue la declaración de variable anterior al archivo app.js
cheerio cargar etiquetas usando el método cheerio.load . Este método toma el marcador como parámetro. También requiere dos parámetros opcionales adicionales. Si está interesado, puede leer más sobre ellos en la documentación.
A continuación, pasamos el primer y único parámetro requerido y almacenamos el valor de retorno en la variable $ . Usamos esta variable debido a la similitud de cheerio con Jquery $ . Puede utilizar diferentes nombres de variables si lo desea.
Agregue el siguiente código a su archivo app.js :
const $ = cheerio.load(markup); console.log(pretty($.html()));
Si ahora ejecuta el código en el node app.js ejecutando el comando app.js en la terminal, debería poder ver el marcado en la terminal. Esto es lo que veo en la terminal:
Cheerio admite los selectores CSS más comunes, como los selectores class , id y element . En el código siguiente, seleccionamos un elemento con la clase fruits__mango y luego registramos el elemento seleccionado en la consola. Agregue el siguiente código a su archivo app.js
const mango = $(".frutas__mango");
console.log(mango.html()); // Mango Si usa la ejecución de comandos, la línea de código anterior registrará el texto Mango en la terminal. app.js``node app.js
También puedes seleccionar un elemento y obtener atributos específicos como class , id o todos los atributos y sus valores correspondientes.
Agregue el siguiente código a su archivo app.js :
const apple = $(".fruits__apple");
console.log(apple.attr("class")); // El código anterior de frutas__apple iniciará sesión en la terminal fruits__apple . fruits__apple es la clase del elemento seleccionado.
Cheerio proporciona el método .each para recorrer múltiples elementos seleccionados.
A continuación, seleccionamos todos los elementos y los recorremos usando el método li . .each registra el contenido de texto de cada elemento de la lista en el terminal.
Agregue el siguiente código a su archivo app.js
const elementos de lista = $("li");
console.log(listItems.length); // 2
listItems.each(función (idx, el) {
console.log($(el).text());
});
//Mango
// El código de Apple anterior registrará 2 , que es la longitud del elemento de la lista. Después de ejecutar el código, el texto Mango y se mostrará en el terminal. Apple``app.js
Cheerio proporciona una manera de agregar o agregar elementos al marcado.
El método append agregará el elemento pasado como parámetro después del último elemento secundario del elemento seleccionado. Por otro lado, prepend agregará el elemento pasado antes del primer hijo del elemento seleccionado.
Agregue el siguiente código a su archivo app.js :
const ul = $("ul");
ul.append("<li>Plátano</li>");
ul.prepend("<li>Piña</li>");
console.log(pretty($.html())); Después de agregar y agregar elementos al marcado, esto es lo que veo cuando inicio sesión en $.html() :
Estos son los conceptos básicos de Cheerio para comenzar con el web scraping. Para extraer los datos de Wikipedia que describimos al principio de este artículo, copie y pegue el siguiente código en el archivo app.js :
// Cargando las dependencias.
// porque no registraremos html en la terminal
const axios = requerir("axios");
const cheerio = requerir("cheerio");
const fs = requerir("fs");
// URL de la página que queremos extraer
URL constante = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// Función asíncrona que extrae los datos
función asíncrona scrapeData() {
intentar {
// Recuperar HTML de la página que queremos extraer
const {datos} = esperar axios.get(url);
// Carga el HTML que obtuvimos en la línea anterior
const $ = cheerio.load(datos);
// Selecciona todos los elementos de la lista en la clase de lista simple
const listItems = $(".plainlist ul li");
// Almacena datos para todos los países.
países constantes = [];
// Usa .cada método para recorrer el li que seleccionamos
listItems.cada uno((idx, el) => {
// Datos de tenencia de objetos para cada país/jurisdicción
const país = { nombre: "", iso3: "" };
// Selecciona el contenido de texto de a y abarca elementos
// Almacena el contenido del texto en el objeto anterior
país.nombre = $(el).children("a").text();
país.iso3 = $(el).children("span").text();
// Rellenar la matriz de países con datos del país
países.push(país);
});
// Registra la matriz de países en la consola
console.dir(países);
// Escribir matriz de países en el archivo country.json
fs.writeFile("países.json", JSON.stringify(países, nulo, 2), (err) => {
si (errar) {
consola.error(err);
devolver;
}
console.log("Datos escritos correctamente en el archivo");
});
} atrapar (errar) {
consola.error(err);
}
}
//Invoca la función anterior
scrapeData(); Al leer el código, ¿comprendes lo que está sucediendo? Si no, entraré en detalles ahora. También comenté cada línea de código para ayudarte a comprender.
En el código anterior, necesitamos todas las dependencias en la parte superior del archivo app.js y luego declaramos la función scrapeData . Dentro de la función, el HTML obtenido de la página que necesitamos extraer se carga en cheerio usando axios .
La lista de países y sus códigos iso3 correspondientes se anidan en un elemento div con la clase plainlist . Los elementos li se seleccionan y luego los recorremos usando el método .each . Los datos de cada país se extraen y almacenan en una matriz.
Después de ejecutar el código anterior usando el comando node app.js , los datos capturados se escriben en el archivo countries.json y se imprimen en la terminal. Esto es parte de lo que veo en la terminal:
¡Gracias por leer este artículo! Ya hemos cubierto el uso cheerio . Si desea profundizar y comprender completamente cómo funciona, puede dirigirse a la documentación de Cheerio.