Introducción a 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.

What is Web Scraping?

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 de la web. Construyendo su propio motor de búsqueda como Google, Yahoo, etc., la lista continúa.

Puede hacer más de lo que piensa con el web scraping. Una vez que sepa cómo extraer los datos de los sitios web, puede hacer lo que quiera con los datos.

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

El raspado web consta principalmente de dos partes.

Obtener los datos mediante bibliotecas de solicitudes 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.

Project Setup

Supongo que tiene Node instalado, si no, consulte el 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.

Crea un directorio llamado web_scraping y navega hasta él.
Ejecuta 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 destellos de los paquetes instalados.

búsqueda de nodo

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

¡hasta la vista

El paquete ¡hasta la vista 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 web scraping en JavaScript. No veremos 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á a raspar web haciéndolo. Entonces, vayamos al trabajo.

Scraping Cricket World Cup List

Aquí, en esta sección, haremos un raspado web 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 a todos los ganadores y subcampeones de la copa mundial de cricket hasta ahora.

Crea un archivo llamado extract_cricket_world_cups_list.js en el proyecto.
Usaremos el Wikipedia Copa del mundo de críquet página para obtener la información deseada.
Primero, obtenga los datos sin procesar usando el node-fetch paquete.
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.

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 usando cheerio.

Analizar los datos HTML usando cheerio.load el método.

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 p etiquetar contenido 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 de la 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 que la información se encuentra en la página. Ve 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 extraídos.

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 😎, ¿está en eso?

Scraping Template

Obtener los datos sin procesar de la URL es común en todos los proyectos de raspado web. La única parte que cambia es la extracción de 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();