El web scraping es el proceso de extraer datos de sitios web mediante programación. Si bien muchas herramientas populares de raspado web utilizan tecnologías del lado del servidor como Python y Node.js, también es posible raspar la web usando solo JavaScript del lado del cliente. En esta publicación, exploraremos cómo aprovechar su conocimiento existente de Vanilla JS para comenzar a realizar scraping sin aprender ningún marco nuevo.
¿Por qué raspar con JavaScript Vanilla?
Estos son algunos de los beneficios clave del scraping con Vanilla JS:
Baja barrera a la entrada – Si ya conoce JavaScript, puede comenzar a utilizar el web scraping rápidamente sin tener que aprender un nuevo idioma. El scraping de Vanilla JS tiene una curva de aprendizaje suave.
Enfoque frontal – Para los desarrolladores que trabajan principalmente en proyectos front-end, el scraping de Vanilla JS les permite reutilizar sus habilidades existentes.
Ligeros – El scraping del lado del cliente evita la sobrecarga de configurar y mantener servidores para ejecutar sus scrapers.
Portabilidad – Los raspadores Vanilla JS se pueden ejecutar directamente en el navegador, lo que facilita compartir e implementar sus raspadores.
Stealth – El scraping del lado del cliente puede ser más difícil de detectar y bloquear para los sitios web en comparación con el scraping del lado del servidor.
Entonces, si desea una forma sencilla de comenzar a extraer datos de la web con JavaScript, ¡el raspado Vanilla JS es una excelente opción! A continuación, veamos cómo funciona debajo del capó.
Cómo funciona el web scraping del lado del cliente
Los pasos básicos para el web scraping con Vanilla JS son:
Uso
fetch()para descargar el HTML de una página.Analice el HTML con la API DOM para extraer los datos deseados.
Transforme y almacene los datos extraídos.
Repita los pasos 1 a 3 para páginas adicionales.
La clave es que todo sucede directamente en el navegador en lugar de en un servidor. El fetch() El método nos permite realizar solicitudes para descargar HTML, y la API DOM proporciona métodos como document.querySelector() para analizar el HTML y extraer los datos que queremos.
Podemos iniciar el proceso de raspado cuando queramos ejecutando nuestro código raspador de JavaScript. La lógica de raspado se ejecutará en el lado del cliente y está aislada del resto de la página web por motivos de seguridad.
¡Ahora veamos un ejemplo simple de un raspador Vanilla JS en acción!
Un ejemplo simple
Digamos que queremos extraer algunos datos de productos de un sitio web de comercio electrónico. Así es como podríamos hacerlo con JavaScript simple:
// Fetch the HTML of the product page
fetch(‘https://example.com/products/1‘)
.then(response => response.text())
.then(html => {
// Parse the HTML with the DOM
const doc = new DOMParser().parseFromString(html, ‘text/html‘);
// Extract the product title
const title = doc.querySelector(‘h1.product-title‘).textContent;
// Extract the product description
const description = doc.querySelector(‘div.product-description‘).textContent;
// Extract the product price
const price = doc.querySelector(‘span.price‘).textContent;
// Store the data somewhere, e.g. log to console
const product = {
title,
description,
price
};
console.log(product);
});¡Y eso es realmente todo lo que hay que hacer! Con solo unas pocas líneas de Vanilla JS, pudimos extraer datos clave de la página de un producto.
Lo mejor de este enfoque es que aprovecha directamente las API de la plataforma web estándar con las que los desarrolladores de aplicaciones para el usuario ya están familiarizados. ¡No se requieren bibliotecas de scraping especiales!
Profundicemos un poco más en los pasos clave.
Obteniendo páginas
El primer paso es descargar el HTML de la página que queremos extraer. La forma moderna de realizar solicitudes HTTP desde JavaScript es con el Fetch API.
Podemos utilizar fetch() para descargar el HTML de cualquier URL pública:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});El fetch() El método devuelve una promesa que se resuelve en un objeto Respuesta que contiene los datos de respuesta. Vocación .text() en la respuesta devuelve una promesa que se resuelve con el contenido como texto.
Proporcionamos una devolución de llamada a .then() para ejecutar nuestra lógica de raspado cuando el HTML esté listo.
Analizando HTML
Una vez que tenemos el HTML, el siguiente paso es analizarlo para extraer los datos que queremos. La mejor API para analizar mediante programación documentos HTML en el navegador es la API DOM.
Podemos analizar una cadena HTML en un documento usando el DOMParser clase:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);Este doc La variable ahora contiene un objeto de documento que representa el HTML analizado.
Podemos usar métodos DOM como querySelector() para analizar y extraer datos del documento:
// Select elements
const headers = doc.querySelectorAll(‘h2‘);
// Get text content
const headerText = headers[0].textContent;
// Get attribute values
const linkUrl = doc.querySelector(‘a.link‘).getAttribute(‘href‘);La API DOM es bastante extensa y le permite simular mediante programación cómo un humano analiza una página web en el navegador.
See esta guía para obtener más información sobre el uso de la API DOM para analizar y recorrer documentos HTML.
Almacenamiento de datos extraídos
Una vez que hemos extraído los datos que queremos de la página, el siguiente paso es almacenarlos en algún lugar. Las opciones simples incluyen:
- Iniciar sesión en la consola: bueno para depurar
- Guardar en una variable de JavaScript o estructura de datos
- Almacenar en almacenamiento local – persiste a través de sesiones
- Envío a un servidor a través de AJAX, por ejemplo, para guardar datos extraídos en una base de datos
Por ejemplo:
// Log to console
console.log(extractedData);
// Store in memory
let scrapedData = [];
scrapedData.push(extractedData);
// Save to localStorage
localStorage.setItem(‘data‘, JSON.stringify(extractedData));
// Send to server
fetch(‘/api/data‘, {
method: ‘POST‘,
body: JSON.stringify(extractedData)
});Estos son algunos patrones comunes para conservar los datos extraídos del lado del cliente.
Raspado de varias páginas
Para raspar varias páginas, envolvemos nuestra lógica de raspado en una función que podemos llamar de forma iterativa:
async function scrapePage(url) {
// Fetch HTML
// Parse HTML
// Extract data
// Store data
}
const urls = [
‘https://example.com/page1‘,
‘https://example.com/page2‘,
// ...
];
// Sequentially scrape each page
for (const url of urls) {
await scrapePage(url);
}
// Or scrape multiple pages concurrently
await Promise.all(urls.map(scrapePage));Podemos recorrer y raspar secuencialmente cada página, o usar Promise.all() para raspar varias páginas al mismo tiempo.
¡Esto nos permite eliminar sitios web completos mediante programación!
Sin cabeza para lograr más escala
Los ejemplos hasta ahora ejecutan la lógica de raspado directamente en el navegador. Para obtener un mayor control de escala y tiempo de ejecución, podemos ejecutar nuestro raspador de JavaScript en un entorno de navegador sin cabeza utilizando una herramienta como Titiritero.
Puppeteer proporciona una API de Node.js para controlar Chrome (o Chromium) mediante programación a través del protocolo DevTools. Esto nos permite ejecutar scripts de scraping en un servidor mientras aprovechamos el último motor de renderizado del navegador.
Aquí hay un ejemplo de guión de Titiritero:
const puppeteer = require(‘puppeteer‘);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com‘);
// Extract data from page with page.$eval()
await browser.close();
})();Entonces, con Puppeteer administrando el entorno del navegador, podemos ampliar nuestros raspadores del lado del cliente y ejecutarlos en servidores en la nube.
También hay servicios como apificar y Nube de dramaturgo que proporcionan entornos alojados optimizados para ejecutar trabajos de scraping a gran escala.
Errores comunes
Aquí hay algunos desafíos comunes a tener en cuenta al raspar páginas con Vanilla JS:
Política del mismo origen – No se puede acceder a los datos de respuesta de páginas de diferentes dominios. Los servidores proxy o servicios como Apify pueden ayudar.
Ejecución asíncrona – La ejecución de JavaScript es asincrónica, por lo que es necesario secuenciar los pasos de extracción correctamente.
Contenido de la página dinámica – Es posible que el contenido cargado a través de JavaScript no esté presente en la carga inicial de la página. Es posible que deba esperar eventos como
DOMContentLoaded.Diferencias de navegador – Los scripts pueden ejecutarse de forma diferente en distintos navegadores. Se recomienda probar varios navegadores.
Detección de raspadores – Los sitios web pueden intentar detectar y bloquear raspadores con métodos como la huella digital del navegador. La rotación de proxies/agentes de usuario puede ayudar.
Estándares de exclusión de robots – Los scrapers deben respetar estándares como robots.txt. Las extensiones de navegador como RobotJS pueden ayudar.
Entonces esas son algunas cosas a tener en cuenta. Sin embargo, en general, Vanilla JavaScript proporciona una forma muy útil y accesible de comenzar a rastrear la web.
Raspar la ética
Es importante tener en cuenta que, si bien el web scraping en sí es generalmente legal, lo que usted haga con los datos extraídos puede no serlo.
Asegúrese de raspar de manera ética y responsable. Evite causar una carga excesiva en los sitios web, respete el archivo robots.txt y cualquier restricción de la interfaz de usuario, y no viole los términos de servicio de los sitios web.
Recopile únicamente datos a los que se pueda acceder públicamente y nunca comparta datos privados de sitios web eliminados. Utilice los datos recopilados únicamente para fines personales o de investigación, no para fines comerciales.
Adherirse a estos principios éticos ayuda a garantizar la longevidad del web scraping como técnica útil.
Conclusión
Estos son algunos puntos clave que hemos cubierto sobre el web scraping con JavaScript del lado del cliente:
El web scraping implica la extracción programática de datos de sitios web.
Vanilla JavaScript proporciona una forma accesible de comenzar a raspar utilizando las API de navegador estándar.
La API Fetch puede recuperar el HTML de la página y la API DOM analiza y extrae datos.
El almacenamiento, la transformación y la iteración permiten extraer sitios web a escala.
Los navegadores sin cabeza como Puppeteer brindan más potencia y control.
Seguir los principios éticos es importante al realizar web scraping.
Por lo tanto, aprovechar sus habilidades existentes en Vanilla JS es una forma rápida de comenzar a extraer datos útiles de páginas web. ¡El cielo es el límite una vez que entiendes las técnicas fundamentales!
¡Feliz raspado (ético)!
