Análisis y extracción de datos en JavaScript: de principiante a profesional

¿Por qué analizar datos en JavaScript si existe Python?

¡Hola, amigo! Si estás leyendo este texto, lo más probable es que ya estés familiarizado con Python y sus bibliotecas como BeautifulSoup o Scrapy. Pero, ¿qué pasa si te encuentras con una tarea donde Python se queda corto? Por ejemplo, necesitas recopilar datos de un sitio web que está completamente construido en React o Angular. Toda la información se carga a través de JavaScript, y en el HTML original no hay nada. ¡Ahí es donde entra en escena JavaScript!

El análisis y la extracción de datos en JavaScript no es solo una tendencia de moda, sino una necesidad imperiosa para trabajar con aplicaciones web modernas. Node.js permite ejecutar el motor del navegador directamente en el servidor, procesar el DOM, hacer clic en botones y esperar la carga de contenido asíncrono. En este artículo, analizaremos herramientas reales y escribiremos código que puedes usar de inmediato en tus proyectos.

¿Listos para convertir JavaScript en una potente aspiradora de datos? ¡Allá vamos!

Herramientas principales para el scraping en JavaScript

Antes de escribir código, conozcamos a los principales «luchadores» de nuestro arsenal. Para el análisis de datos en JavaScript, utilizaremos tres pilares:

\n
• Axios — Cliente HTTP para enviar solicitudes y obtener el código HTML de las páginas.
\n
• Cheerio — Biblioteca rápida y ligera para analizar HTML, que funciona como jQuery en el servidor.
\n
• Puppeteer — Navegador headless completo (Chrome) que puede ejecutar JavaScript, hacer clic, desplazarse y esperar.
\n

Para páginas estáticas, te bastará con Axios + Cheerio. Si el sitio carga datos a través de AJAX o requiere autenticación, usa Puppeteer. Y ahora pasemos a la práctica.

Ejemplo 1: Análisis simple de una página estática con Cheerio

Supongamos que necesitamos recopilar los titulares de noticias de un sitio que entrega el HTML de inmediato (sin dinámicas). Instalamos las dependencias:

npm install axios cheerio

Ahora escribamos un script que extraiga todos los encabezados h2 de la página principal (reemplaza la URL por una real):

const axios = require('axios');\nconst cheerio = require('cheerio');\n\nasync function parseStaticPage(url) {\n    try {\n        const { data } = await axios.get(url);\n        const $ = cheerio.load(data);\n\n        const titles = [];\n        $('h2').each((i, el) => {\n            titles.push($(el).text().trim());\n        });\n\n        console.log('Encabezados encontrados:');\n        titles.forEach((title, index) => {\n            console.log(`${index + 1}. ${title}`);\n        });\n    } catch (error) {\n        console.error('Error de análisis:', error.message);\n    }\n}\n\nparseStaticPage('https://example.com/news');

Este código es la base con la que deberías comenzar a estudiar la extracción de datos en JavaScript. Cheerio funciona a la velocidad del rayo, pero no puede ejecutar scripts. Si el sitio muestra «Cargando...», sigue leyendo.

Ejemplo 2: Análisis de páginas dinámicas con Puppeteer

Ahora imaginemos que los datos aparecen solo después de que el usuario desplaza la página o hace clic en el botón «Mostrar más». Para estas tareas, Puppeteer es ideal. Instalémoslo:

npm install puppeteer

Escenario: entramos en una página de productos, esperamos 3 segundos (mientras se carga el JS), luego recopilamos los nombres de los productos:

const puppeteer = require('puppeteer');\n\nasync function parseDynamicPage(url) {\n    const browser = await puppeteer.launch({ headless: true });\n    const page = await browser.newPage();\n\n    await page.goto(url, { waitUntil: 'networkidle2' });\n    // Esperamos a que aparezca el contenido (selector .product-title)\n    await page.waitForSelector('.product-title', { timeout: 10000 });\n\n    const items = await page.evaluate(() => {\n        const titles = [];\n        document.querySelectorAll('.product-title').forEach(el => {