Web scraping é o processo de extração de dados de sites de forma programática. Embora muitas ferramentas populares de web scraping utilizem tecnologias do lado do servidor, como Python e Node.js, também é possível fazer scraping na web usando apenas JavaScript do lado do cliente. Nesta postagem, exploraremos como aproveitar seu conhecimento existente de Vanilla JS para começar a fazer scraping sem aprender nenhuma nova estrutura.
Por que raspar com Vanilla JavaScript?
Aqui estão alguns dos principais benefícios da raspagem com Vanilla JS:
Barreira baixa à entrada – Se você já conhece JavaScript, pode começar a fazer web scraping rapidamente, sem aprender um novo idioma. A raspagem Vanilla JS tem uma curva de aprendizado suave.
Foco no front-end – Para desenvolvedores que trabalham principalmente em projetos front-end, o Vanilla JS scraping permite reutilizar suas habilidades existentes.
Leve – A raspagem do lado do cliente evita a sobrecarga de configuração e manutenção de servidores para executar seus raspadores.
Portabilidade – Os raspadores Vanilla JS podem ser executados diretamente no navegador, facilitando o compartilhamento e a implantação de seus raspadores.
Stealth – A raspagem do lado do cliente pode ser mais difícil para os sites detectarem e bloquearem em comparação com a raspagem do lado do servidor.
Então, se você deseja uma maneira simples de começar a extrair dados da web com JavaScript, o Vanilla JS scraping é uma ótima opção! A seguir, vamos ver como isso funciona nos bastidores.
Como funciona a raspagem da Web do lado do cliente
As etapas básicas para web scraping com Vanilla JS são:
Use
fetch()para baixar o HTML de uma página.Analise o HTML com a API DOM para extrair os dados desejados.
Transforme e armazene os dados extraídos.
Repita as etapas 1 a 3 para páginas adicionais.
O segredo é que tudo acontece diretamente no navegador, e não em um servidor. O fetch() O método nos permite fazer solicitações de download de HTML, e a API DOM fornece métodos como document.querySelector() para analisar o HTML e extrair os dados que desejamos.
Podemos iniciar o processo de raspagem sempre que quisermos, executando nosso código de raspagem JavaScript. A lógica de raspagem será executada no lado do cliente e será colocada em área restrita do restante da página da web para segurança.
Agora vamos dar uma olhada em um exemplo simples de raspador Vanilla JS em ação!
Um exemplo simples
Digamos que queremos extrair alguns dados de produtos de um site de comércio eletrônico. Veja como poderíamos fazer isso com JavaScript simples:
// 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);
});E isso é realmente tudo que há para fazer! Com apenas algumas linhas de Vanilla JS, conseguimos extrair dados importantes da página de um produto.
A grande vantagem dessa abordagem é que ela aproveita diretamente as APIs padrão da plataforma web com as quais os desenvolvedores front-end já estão familiarizados. Não são necessárias bibliotecas especiais de raspagem!
Vamos nos aprofundar um pouco mais nas etapas principais.
Buscando páginas
O primeiro passo é baixar o HTML da página que queremos copiar. A maneira moderna de fazer solicitações HTTP a partir de JavaScript é com o fetch API.
Podemos usar fetch() para baixar o HTML de qualquer URL público:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});A fetch() O método retorna uma promessa que resolve para um objeto Response contendo os dados de resposta. Chamando .text() na resposta retorna uma promessa que resolve o conteúdo como texto.
Fornecemos um retorno de chamada para .then() para executar nossa lógica de raspagem sempre que o HTML estiver pronto.
Analisando HTML
Assim que tivermos o HTML, a próxima etapa é analisá-lo para extrair os dados que desejamos. A melhor API para analisar programaticamente documentos HTML no navegador é a API DOM.
Podemos analisar uma string HTML em um documento usando o DOMParser classe:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);Esta doc variável agora contém um objeto de documento que representa o HTML analisado.
Podemos usar métodos DOM como querySelector() para analisar e extrair dados do 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‘);A API DOM é bastante extensa e permite simular programaticamente como um ser humano analisa uma página da web no navegador.
See este guia para saber mais sobre como usar a API DOM para analisar e percorrer documentos HTML.
Armazenando dados raspados
Depois de extrairmos os dados que queremos da página, o próximo passo é armazená-los em algum lugar. As opções simples incluem:
- Registrando no console – bom para depuração
- Salvando em uma variável JavaScript ou estrutura de dados
- Armazenando em armazenamento local – persiste entre sessões
- Enviando para um servidor via AJAX – por exemplo, para salvar dados copiados em um banco de dados
Por exemplo:
// 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)
});Portanto, esses são alguns padrões comuns para persistir os dados extraídos do lado do cliente.
Raspar várias páginas
Para raspar várias páginas, envolvemos nossa lógica de raspagem em uma função que podemos chamar iterativamente:
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 percorrer sequencialmente e raspar cada página ou usar Promise.all() para raspar várias páginas simultaneamente.
Isso nos permite raspar sites inteiros de forma programática!
Ficando sem cabeça para obter mais escala
Os exemplos até agora executam a lógica de scraping diretamente no navegador. Para obter mais escala e controle de tempo de execução, podemos executar nosso scraper JavaScript em um ambiente de navegador headless usando uma ferramenta como Marionetista.
O Puppeteer fornece uma API Node.js para controlar o Chrome (ou Chromium) programaticamente por meio do protocolo DevTools. Isso nos permite executar scripts de scraping em um servidor enquanto aproveitamos o mais recente mecanismo de renderização do navegador.
Aqui está um exemplo de script do Puppeteer:
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();
})();Assim, com o Puppeteer gerenciando o ambiente do navegador, podemos ampliar nossos scrapers do lado do cliente e executá-los em servidores na nuvem.
Existem também serviços como Apificar e Nuvem do dramaturgo que fornecem ambientes hospedados otimizados para a execução de trabalhos de raspagem em grande escala.
Dicas comuns
Aqui estão alguns desafios comuns a serem observados ao copiar páginas com Vanilla JS:
Política de mesma origem – Não é possível acessar dados de resposta para páginas em domínios diferentes. Proxies ou serviços como o Apify podem ajudar.
Execução assíncrona – A execução do JavaScript é assíncrona, portanto, você precisa sequenciar as etapas de extração corretamente.
Conteúdo dinâmico da página – O conteúdo carregado via JavaScript pode não estar presente no carregamento inicial da página. Pode ser necessário esperar por eventos como
DOMContentLoaded.Diferenças do navegador – Os scripts podem ser executados de maneira diferente nos navegadores. É aconselhável testar vários navegadores.
Detectando raspadores – Os sites podem tentar detectar e bloquear scrapers com métodos como impressão digital do navegador. A rotação de proxies/user-agentes pode ajudar.
Padrões de exclusão de robôs – Scrapers devem respeitar padrões como robots.txt. Extensões de navegador como RobotJS podem ajudar.
Então essas são algumas coisas que você deve estar ciente. No geral, porém, Vanilla JavaScript fornece uma maneira muito útil e acessível de começar a fazer scraping na web!
Raspando Ética
É importante observar que, embora o web scraping em si seja geralmente legal, o que você faz com os dados copiados pode não ser.
Certifique-se de raspar com ética e responsabilidade. Evite causar carga excessiva em sites, respeite o robots.txt e quaisquer restrições da interface do usuário e não viole os termos de serviço dos sites.
Colete apenas dados acessíveis ao público e nunca compartilhe dados privados de sites copiados. Use dados extraídos apenas para fins pessoais ou de pesquisa, não para benefício comercial.
Aderir a esses princípios éticos ajuda a garantir a longevidade do web scraping como uma técnica útil.
Conclusão
Aqui estão alguns pontos-chave que abordamos sobre web scraping com JavaScript do lado do cliente:
Web scraping envolve a extração programática de dados de sites.
Vanilla JavaScript fornece uma maneira acessível de começar a raspar usando APIs de navegador padrão.
A API Fetch pode recuperar o HTML da página e a API DOM analisa e extrai dados.
Armazenar, transformar e iterar permite extrair sites em grande escala.
Navegadores sem cabeça como o Puppeteer fornecem mais poder e controle.
Seguir princípios éticos é importante durante o web scraping.
Portanto, aproveitar suas habilidades existentes em Vanilla JS é uma maneira rápida de começar a extrair dados úteis de páginas da web. O céu é o limite quando você entende as técnicas fundamentais!
Feliz raspagem (ética)!
