Introdução ao Web Scraping em JavaScript

A raspagem da Web é uma das coisas mais interessantes no mundo da codificação.

O que é web scraping?

Por que ele existe?

Vamos descobrir as respostas.

O que é Web Scraping?

A raspagem da Web é uma tarefa automatizada para extrair dados de sites.

Existem muitas aplicações de raspagem da web. Extrair os preços dos produtos e compará-los com diferentes plataformas de comércio eletrônico. Obtendo uma cotação diária da web. Construindo seu próprio mecanismo de busca como Google, Yahoo, etc., a lista continua.

Você pode fazer mais do que pensa com a raspagem da web. Depois de saber como extrair os dados dos sites, você pode fazer o que quiser com os dados.

O programa que extrai os dados de sites é chamado de web scraper. Você aprenderá a escrever web scrapers em JavaScript.

Existem basicamente duas partes na raspagem da web.

  • Obtendo os dados usando bibliotecas de solicitação e um navegador headless.
  • Analisar os dados para extrair as informações exatas que queremos dos dados.

Sem mais delongas vamos começar.

Configuração do projeto

Presumo que você tenha o Node instalado, caso contrário, verifique o guia de instalação do NodeJS.

Vamos usar os pacotes node-fetch e cheerio para web scraping em JavaScript. Vamos configurar o projeto com o npm para trabalhar com um pacote de terceiros.

Vamos ver rapidamente as etapas para concluir nossa configuração.

  • Crie um diretório chamado web_scraping e navegue até ele.
  • Execute o comando npm init para inicializar o projeto.
  • Responda a todas as perguntas com base em sua preferência.
  • Agora, instale os pacotes usando o comando
npm install node-fetch cheerio

Vamos ver os vislumbres dos pacotes instalados.

  Corrigir o erro de captura de exceção não tratada do CoD Black Ops 2

busca de nó

O pacote node-fetch traz o window.fetch para o ambiente node js. Isso ajuda a fazer as solicitações HTTP e obter os dados brutos.

cheerio

O pacote cheerio é usado para analisar e extrair as informações necessárias dos dados brutos.

Dois pacotes node-fetch e cheerio são bons o suficiente para web scraping em JavaScript. Não veremos todos os métodos fornecidos pelos pacotes. Veremos o fluxo de web scraping e os métodos mais úteis nesse fluxo.

Você aprenderá a raspar na web fazendo isso. Então, vamos ao trabalho.

Lista da Copa do Mundo de Scraping Cricket

Aqui nesta seção, vamos fazer a raspagem da web real.

O que estamos extraindo?

Pelo título da seção, acho que você adivinharia facilmente. Sim, o que você está pensando está correto. Vamos extrair todos os vencedores e vice-campeões da Copa do Mundo de Críquete até agora.

  • Crie um arquivo chamado extract_cricket_world_cups_list.js no projeto.
  • Estaremos usando o Wikipédia Copa do Mundo de Críquete página para obter as informações desejadas.
  • Primeiro, obtenha os dados brutos usando o pacote node-fetch.
  • O código abaixo obtém os dados brutos da página da Wikipedia acima.
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();

Obtivemos os dados brutos da URL. Agora é hora de extrair as informações de que precisamos dos dados brutos. Vamos usar o pacote cheerio para extrair os dados.

  Como desativar a barra de toque no seu MacBook Pro

Extrair dados que envolvam tags HTML com cheerio é moleza. Antes de entrar nos dados reais, vamos ver alguns exemplos de análise de dados usando cheerio.

  • Analise os dados HTML usando o método cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Analisamos o código HTML acima. Como extrair o conteúdo da tag p dele? É o mesmo que os seletores na manipulação do JavaScript DOM.

console.log(parsedSampleData(“#title”).text());

Você pode selecionar as tags que desejar. Você pode verificar diferentes métodos do site oficial do cheerio.

  • Agora é hora de extrair a lista da copa do mundo. Para extrair as informações, precisamos conhecer as tags HTML que contêm as informações da página. Vou ao página da Wikipédia da copa do mundo de críquete e inspecione a página para obter informações de tags HTML.

Aqui está o 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();

E, aqui estão os dados raspados.

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

Legal 😎, não é?

  Melhor aplicativo de colagem de fotos para iPhone

Modelo de Raspagem

Obter os dados brutos da URL é comum em todos os projetos de web scraping. A única parte que muda é a extração dos dados de acordo com o requisito. Você pode tentar o código abaixo como modelo.

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();

Conclusão

Você aprendeu a raspar uma página da web. Agora é a sua vez de praticar a codificação.

Eu também sugeriria verificar estruturas populares de raspagem da web para explorar e soluções de raspagem da web baseadas em nuvem.

Codificação feliz 🙂

Gostou de ler o artigo? Que tal compartilhar com o mundo?