Cómo extraer datos de cualquier sitio web con JavaScript

¿Cómo aumenta la productividad, especialmente cuando desea realizar múltiples tareas y lograr tanto en tan poco tiempo? Todos nos hemos encontrado con situaciones en las que nuestro líder en una organización nos indica que obtengamos (raspemos) información de Internet, especialmente si estamos en un equipo que realiza muchos procesos manuales para lograr su trabajo. Hacer esto con lápiz y papel puede generar errores y perder información específica del sitio web.

Este tutorial demostrará cómo automatizar el raspado de datos del sitio web y usarlo para cualquier propósito.

Salvadera

Puede encontrar el código fuente del proyecto completo en

 <CodeSandbox title="scrape the web" id="web-scraper-nxmv8" />

requisitos previos

Es necesario un conocimiento básico de JavaScript para completar este proyecto. Este proyecto está construido con Node.js y Express.

Además, para seguir los pasos, debemos hacer lo siguiente:

• Tener Node.js y NPM instalados en nuestro equipo. Usamos npm , un administrador de paquetes, para instalar dependencias para nuestro programa

• Haremos uso de un editor de código de nuestra elección.

  
  

NPM está disponible cuando instala Node desde la documentación oficial

Instalación

Cree un servidor de nodo con el siguiente comando.

 npm init -y

El comando anterior ayuda a inicializar nuestro proyecto al crear un archivo package.json en la raíz de la carpeta usando npm con el indicador -y para aceptar el valor predeterminado. Instalaremos el paquete express desde el registro npm para ayudarnos a escribir nuestros scripts para ejecutar el servidor.

Luego, después de la inicialización, necesitamos instalar las dependencias express , cheerio y axios .

 npm install express cheerio axios

• express , un Framework web Node.js rápido y flexible
• cheerio , un paquete que analiza el marcado y proporciona una API para atravesar/manipular la estructura de datos resultante. La implementación de Cheerio es idéntica a jQuery.
• axios , un cliente HTTP basado en promesas para el navegador y node.js.

Crear un servidor con Node.JS

En nuestro archivo JavaScript app.js , usamos el siguiente código para importar Express.js, crear una instancia de la aplicación Express y finalmente iniciar la aplicación como un servidor Express.

 const express = require('express'); const app = express(); const PORT = process.env.port || 3000; app.listen(PORT, () => { console.log(`server is running on PORT:${PORT}`); });

Antes de iniciar nuestra aplicación en la línea de comandos, debemos instalar nodemon como una dependencia de desarrollo.

 npm install nodemon --save-dev

Nodemon es un script de monitoreo utilizado durante el desarrollo de aplicaciones node.js. Configuraremos el archivo package.json para usar nodemon. Esto nos permite ejecutar nuestra aplicación sin reiniciar manualmente el servidor.

 { "scripts": { "start": "nodemon app.js" }, "devDependencies": { "nodemon": "^2.0.15" } }

Ahora inicie la aplicación en la línea de comando con npm start , que debería mostrar esto en la línea de comando.

 server is running on PORT:3000

Express.js es adecuado para el enrutamiento, como veremos más adelante en el tutorial.

Crear el raspador

Con la configuración completa del servidor, implementaremos el raspador web que ayuda a aumentar su productividad y eficiencia en el trabajo en cuestión de minutos.

Ahora, en el mismo archivo, app.js , importaremos el paquete axios para enviar solicitudes HTTP al punto final de transferencia de estado representacional (REST) para realizar operaciones CRUD.

 const express = require('express'); const axios = require('axios') const app = express(); const PORT = process.env.port || 3000; const website = 'https://news.sky.com'; try { axios(website).then((response) => { const html = response.data; console.log(html); }); } catch (error) { console.log(error, error.message); } app.listen(PORT, () => { console.log(`server is running on PORT:${PORT}`); });

Del fragmento de código anterior, usamos axios. Axios toma la URL del sitio web a través del encadenamiento y, una vez que se ha resuelto, recibimos una respuesta de la URL del sitio web de noticias en la línea de comandos.

Raspado de datos

Para extraer los datos de la URL del sitio web de noticias, actualice nuestro archivo app.js con lo siguiente. El paquete Cheerio lo hará posible.

 const express = require('express'); const axios = require('axios'); const cheerio = require('cheerio'); const app = express(); const PORT = process.env.PORT || 3000; const website = 'https://news.sky.com'; try { axios(website).then((res) => { const data = res.data; const $ = cheerio.load(data); let content = []; $('.sdc-site-tile__headline', data).each(function () { const title = $(this).text(); const url = $(this).find('a').attr('href'); content.push({ title, url, }); app.get('/', (req, res) => { res.json(content); }); }); }); } catch (error) { console.log(error, error.message); } app.listen(PORT, () => { console.log(`server is running on PORT:${PORT}`); });

Repasemos el código de arriba.

• El paquete cheerio nos permitirá manipular el DOM leyendo los elementos de la página. Apuntaremos a elementos específicos en la página que solo necesitamos raspar.

• Para analizar el HTML, utilizamos cheerio.load(data) para analizar todo el HTML de la página y guardarlo con una variable, const $ .

• Para encontrar elementos específicos en el sitio web con un título, inspeccionamos la página y copiamos el nombre de la clase para la etiqueta h3 .

  
  

• Para cada titular de título, queremos capturar el texto usando text() y el enlace al título que encontramos con un atributo de href .

• Ahora, para extraer todos nuestros datos en un archivo JSON, creamos una matriz vacía con un content variable. Con esta matriz creada, necesitamos insertar el title y la URL guardados mediante el método de inserción en un objeto para mostrar todos los datos extraídos del cliente con el método GET , app.get con un punto final / .

• Finalmente, ejecutamos el bloque de código dentro de las sentencias try...catch . La instrucción catch se ejecuta si ocurre una excepción.

  
  

Con el proceso completado para raspar un sitio web, ahora tenemos los datos raspados en formato JSON.

Resumen

Ahora que ha visto cómo crear un raspador web con Node.js usando el marco Express.js, no hay excusa para no intentarlo con cualquier sitio web de su elección mientras ahorra tiempo para obtener datos precisos.

Esta publicación exploró cómo raspar un sitio web y qué tan productivo puede ser con un método que puede replicar con tantas URL de sitios web.

Clone y bifurque el código fuente completo aquí .

Otras lecturas

• Enrutamiento básico con el marco Express

¿Qué puedes hacer a continuación?

Para experimentar con lo que construimos, puede obtener los datos del servidor y llamarlos en su aplicación de interfaz.

Publicado por primera vez aquí