jueves, marzo 28, 2024
No menu items!
InicioBlogsPrimeros pasos con Web Scraping en JavaScript

Primeros pasos con Web Scraping en JavaScript

El web scraping es una de las cosas más interesantes en el mundo de la codificación.

¿Qué es el web scraping?

¿Por qué existe?

Averigüemos las respuestas.

¿Qué es el raspado web?

El web scraping es una tarea automatizada para extraer datos de sitios web.

Hay muchas aplicaciones de web scraping. Extraer los precios de los productos y compararlos con diferentes plataformas de comercio electrónico. Obtener una cotización diaria desde la web. Construyendo tu propio motor de búsqueda como Google, Yahoo, etc., la lista continúa.

Puedes hacer más de lo que piensas con web scraping. Una vez que sepa cómo extraer los datos de los sitios web, podrá hacer lo que quiera con los datos.

El programa que extrae los datos de los sitios web se llama raspador web. Aprenderá a escribir web scrapers en JavaScript.

Hay principalmente dos partes en el web scraping.

Obtener los datos usando bibliotecas de solicitud y un navegador sin cabeza. Analizar los datos para extraer la información exacta que queremos de los datos.

Sin más preámbulos comencemos.

Configuración del proyecto

Supongo que tiene Node instalado, si no, consulte la guía de instalación de NodeJS.

Vamos a utilizar los paquetes node-fetch y cheerio para web scraping en JavaScript. Configuremos el proyecto con npm para que funcione con un paquete de terceros.

Veamos rápidamente los pasos para completar nuestra configuración.

Cree un directorio llamado web_scraping y navegue hasta él. Ejecute el comando npm init para inicializar el proyecto. Responda todas las preguntas según su preferencia. Ahora, instale los paquetes usando el comando

npm install node-fetch cheerio

Veamos los atisbos de los paquetes instalados.

🔥 Leer:  Cómo jugar juegos de Android en una PC con Windows usando Google Play Games

búsqueda de nodo

El paquete node-fetch trae window.fetch al entorno de node js. Ayuda a realizar las solicitudes HTTP y obtener los datos sin procesar.

alegría

El paquete cheerio se utiliza para analizar y extraer la información necesaria de los datos sin procesar.

Dos paquetes node-fetch y cheerio son lo suficientemente buenos para el web scraping en JavaScript. No vamos a ver todos los métodos que proporcionan los paquetes. Veremos el flujo de web scraping y los métodos más útiles en ese flujo.

Aprenderá web scraping haciéndolo. Entonces, manos a la obra.

Raspar la lista de la Copa Mundial de Cricket

Aquí, en esta sección, vamos a hacer web scraping real.

¿Qué estamos extrayendo?

Por el título de la sección, creo que lo adivinarías fácilmente. Sí, lo que sea que estés pensando es correcto. Extraigamos todos los ganadores y subcampeones de la copa mundial de cricket hasta ahora.

Cree un archivo llamado extract_cricket_world_cups_list.js en el proyecto. Usaremos la página de la Copa Mundial de Cricket de Wikipedia para obtener la información deseada. Primero, obtenga los datos sin procesar usando el paquete node-fetch. El siguiente código obtiene los datos sin procesar de la página de Wikipedia anterior.

const fetch = require("node-fetch");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// invoking the main function
getCricketWorldCupsList();

Obtuvimos los datos sin procesar de la URL. Ahora es el momento de extraer la información que necesitamos de los datos sin procesar. Usemos el paquete cheerio para extraer los datos.

🔥 Leer:  Vivo Nex 3 5G con una cámara de 64 megapíxeles y una pantalla redondeada lanzada oficialmente

Extraer datos que involucran etiquetas HTML con cheerio es pan comido. Antes de entrar en los datos reales, veamos algunos ejemplos de análisis de datos con Cheerio.

Analice los datos HTML utilizando el método cheerio.load.

const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );

Hemos analizado el código HTML anterior. ¿Cómo extraer el contenido de la etiqueta p de él? Es lo mismo que los selectores en la manipulación DOM de JavaScript.

console.log(parsedSampleData(“#title”).text());

Puede seleccionar las etiquetas que desee. Puede consultar diferentes métodos en el sitio web oficial de Cheerio.

Ahora, es el momento de extraer la lista de la copa del mundo. Para extraer la información, necesitamos conocer las etiquetas HTML en las que se encuentra la información en la página. Vaya a la página de Wikipedia de la copa mundial de cricket e inspeccione la página para obtener información sobre las etiquetas HTML.

Aquí está el código completo.

const fetch = require("node-fetch");
const cheerio = require("cheerio");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // extracting year
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // extracting winner
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // extracting runner
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

Y, aquí están los datos raspados.

Year --- Winner --- Runner
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

Genial 😎, ¿no?

🔥 Leer:  Cómo grabar videollamadas de Google Meet con facilidad

Plantilla de raspado

Obtener los datos sin procesar de la URL es común en todos los proyectos de web scraping. La única parte que cambia es extraer los datos según el requisito. Puede probar el siguiente código como plantilla.

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // parsing the data
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // write code to extract the data
   // here
   // ...
   // ...
};
// invoking the main function
scrapeData();

Conclusión

Has aprendido cómo raspar una página web. Ahora, es tu turno de practicar la codificación.

También sugeriría revisar los marcos populares de web scraping para explorar y las soluciones de web scraping basadas en la nube.

Codificación feliz 🙂

Recomendamos

Populares