Antes de começarmos, você precisa cumprir as leis e regulamentos locais e não coletar dados divulgados sem permissão.
Aqui estão algumas coisas que você precisará para este tutorial:
Cheerio é uma ferramenta para análise de HTML e XML em Node.js. É muito popular no GitHub e tem mais de 23 mil estrelas.
É rápido, flexível e fácil de usar. Como ele implementa um subconjunto do JQuery, é fácil começar a usar o Cheerio se você já estiver familiarizado com o JQuery.
A principal diferença entre Cheerio e um navegador da web é que Cheerio não gera renderização visual, carrega CSS, carrega recursos externos ou executa JavaScript. Ele apenas analisa a marcação e fornece uma API para manipular as estruturas de dados resultantes. Isso explica porque também é muito rápido - documentação cheerio.
Se você quiser usar cheerio para buscar páginas da web, primeiro você precisa usar um pacote como axios ou node-fetch para obter as tags.
Neste exemplo, rastrearemos os códigos ISO 3166-1 alfa-3 para todos os países e outras jurisdições listadas nesta página da Wikipedia. Ele está localizado na seção de código atual da página ISO 3166-1 alfa-3.
Esta é a aparência da lista de países/jurisdições e seus códigos correspondentes:
Nesta etapa, você criará um diretório para o seu projeto executando o seguinte comando no terminal. Este comando criará um arquivo chamado learn-cheerio . Você pode dar um nome diferente a ele, se desejar.
mkdir learn-cheerio
learn-cheerio Depois de executar com sucesso o comando acima, você poderá ver uma pasta chamada criada.
Na próxima etapa, você abrirá o diretório que acabou de criar em seu editor de texto favorito e inicializará o projeto.
Nesta etapa, você navegará até o diretório do projeto e inicializará o projeto. Abra o diretório que você criou na etapa anterior em seu editor de texto favorito e inicialize o projeto executando o seguinte comando.
npm init -y
Uma execução bem-sucedida do comando acima criará um arquivo package.json na raiz do diretório do projeto.
Na próxima etapa, você instalará as dependências do projeto.
Nesta etapa, você instalará as dependências do projeto executando o seguinte comando. Isso levará alguns minutos, então seja paciente.
npm i axios cheerio pretty
A execução bem-sucedida do comando acima registrará três dependências no arquivo no campo package.json . dependencies primeira dependência é axios , a segunda é cheerio e a terceira é pretty .
axios é um cliente http muito popular que pode ser executado em nós e navegadores. Precisamos disso porque cheerio é um analisador de tokens.
Para que a Cheerio analise as tags e rastreie os dados necessários, precisamos de axios para obter as tags do site. Se preferir, você pode usar outro cliente HTTP para obter o token. Não precisa ser axios
pretty é um pacote npm para embelezar a marcação para que seja legível quando impresso no terminal.
Na próxima seção, você examinará as tags das quais os dados serão extraídos.
Antes de extrair dados de uma página da web, é importante compreender a estrutura HTML da página.
Nesta etapa, você examina a estrutura HTML da página da web da qual deseja extrair dados.
Navegue até a página de códigos ISO 3166-1 alfa-3 na Wikipedia. Na seção “Códigos Atuais”, há uma lista de países e seus códigos correspondentes. CTRL + SHIFT + I Você pode abrir o DevTools pressionando a combinação de teclas no Chrome ou clicando com o botão direito e selecionando a opção “Inspecionar”.
Esta é minha lista no Chrome DevTools:
Na próxima seção, você escreverá o código para rastrear a web.
Nesta seção, você escreverá o código para extrair os dados nos quais estamos interessados. Primeiro execute o seguinte comando que criará o arquivo app.js
touch app.js
A execução bem-sucedida do comando acima criará um arquivo app.js no diretório raiz do diretório do projeto.
Como qualquer outro pacote Node, você deve primeiro requerer axios , cheerio e axios antes de começar a usá-los. Você pode fazer isso adicionando o seguinte código no topo do arquivo que acabou de pretty . app.js
const axios = require("axios");
const alegria = require("cheerio");
const pretty = require("pretty"); Antes de escrevermos o código para extrair os dados, precisamos aprender cheerio . Analisaremos a marcação abaixo e tentaremos manipular a estrutura de dados resultante. Isso nos ajudará a aprender a sintaxe do Cheerio e seus métodos mais comumente usados.
A marcação abaixo é ul li que contém nosso elemento.
marcação const = ` <ul class="frutas"> <li class="fruits__mango"> Manga </li> <li class="frutas__apple"> Maçã </li> </ul> `;
Adicione a declaração de variável acima ao arquivo app.js
cheerio pode carregar tags usando o método cheerio.load . Este método leva o marcador como parâmetro. Também requer dois parâmetros opcionais adicionais. Se estiver interessado, você pode ler mais sobre eles na documentação.
Abaixo, passamos o primeiro e único parâmetro obrigatório e armazenamos o valor de retorno na variável $ . Usamos esta variável devido à semelhança do cheerio com o Jquery $ . Você pode usar nomes de variáveis diferentes, se desejar.
Adicione o seguinte código ao seu arquivo app.js :
const $ = cheerio.load(markup); console.log(pretty($.html()));
Se você agora executar o código no arquivo node app.js executando o comando app.js no terminal, você poderá ver a marcação no terminal. Isto é o que vejo no terminal:
Cheerio suporta os seletores CSS mais comuns, como seletores class , id e element . No código abaixo, selecionamos um elemento com a classe fruits__mango e então registramos o elemento selecionado no console. Adicione o seguinte código ao seu arquivo app.js
const manga = $(".frutas__manga");
console.log(mango.html()); // Mango Se você usar a execução de comando, a linha de código acima Mango o texto no terminal. app.js``node app.js
Você também pode selecionar um elemento e obter atributos específicos, como class , id ou todos os atributos e seus valores correspondentes.
Adicione o seguinte código ao seu arquivo app.js :
const apple = $(".fruits__apple");
console.log(apple.attr("class")); // O código acimafruit__apple fará login no terminal fruits__apple . fruits__apple é a classe do elemento selecionado.
Cheerio fornece o método .each para percorrer vários elementos selecionados.
Abaixo, selecionamos todos os elementos e os percorremos usando o método li . .each registramos o conteúdo de texto de cada item da lista no terminal.
Adicione o seguinte código ao seu arquivo app.js
const listItems = $("li");
console.log(listItems.length); // 2
listItems.each (função (idx, el) {
console.log($(el).text());
});
//Manga
// O código da Apple acima registrará 2 , que é o comprimento do item da lista. Após a execução do código, o texto Mango e será exibido no terminal. Apple``app.js
Cheerio fornece uma maneira de anexar ou acrescentar elementos à marcação.
O método append acrescentará o elemento passado como parâmetro após o último elemento filho do elemento selecionado. Por outro lado, prepend adicionará o elemento passado antes do primeiro filho do elemento selecionado.
Adicione o seguinte código ao seu arquivo app.js :
const ul = $("ul");
ul.append("<li>Banana</li>");
ul.prepend("<li>Abacaxi</li>");
console.log(pretty($.html())); Depois de adicionar e adicionar elementos à marcação, é isso que vejo quando faço login no terminal $.html() :
Estes são os princípios básicos do Cheerio para você começar a fazer web scraping. Para extrair os dados da Wikipedia que descrevemos no início deste artigo, copie e cole o seguinte código no arquivo app.js :
// Carregando as dependências Não precisamos de bonito.
// porque não registraremos html no terminal
const axios = require("axios");
const alegria = require("cheerio");
const fs = requer("fs");
// URL da página que queremos copiar
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
//Função assíncrona que coleta os dados
função assíncrona scrapeData() {
tentar {
//Busca o HTML da página que queremos copiar
const {dados} = aguardar axios.get(url);
// Carrega o HTML que buscamos na linha anterior
const $ = cheerio.load(dados);
//Seleciona todos os itens da lista na classe plainlist
const listItems = $(".plainlist ul li");
// Armazena dados de todos os países
const países = [];
// Use o método .each para percorrer o li que selecionamos
listItems.each((idx, el) => {
// Objeto que contém dados para cada país/jurisdição
const país = {nome: "", iso3: "" };
// Seleciona o conteúdo de texto dos elementos a e span
// Armazena o conteúdo do texto no objeto acima
país.nome = $(el).children("a").text();
país.iso3 = $(el).children("span").text();
// Preencher a matriz de países com dados do país
países.push(país);
});
// Registra o array de países no console
console.dir(países);
// Grava a matriz de países no arquivo country.json
fs.writeFile("coutries.json", JSON.stringify(países, null, 2), (err) => {
se (errar) {
console.error(erro);
retornar;
}
console.log("Dados gravados no arquivo com sucesso");
});
} pegar (errar) {
console.error(erro);
}
}
//Invoca a função acima
scrapeData(); Ao ler o código, você entende o que está acontecendo? Se não, entrarei em detalhes agora. Também comentei cada linha de código para ajudá-lo a entender.
No código acima, precisamos de todas as dependências no topo do arquivo app.js e então declaramos a função scrapeData . Dentro da função, o HTML obtido da página que precisamos copiar é então carregado no cheerio usando axios .
A lista de países e seus códigos iso3 correspondentes são aninhados em um elemento div com a classe plainlist . Os elementos li são selecionados e, em seguida, percorremos eles usando o método .each . Os dados de cada país são coletados e armazenados em uma matriz.
Depois de executar o código acima usando o comando node app.js , os dados capturados são gravados no arquivo countries.json e impressos no terminal. Isso faz parte do que vejo no terminal:
Obrigado por ler este artigo! Já abordamos o uso cheerio . Se você quiser se aprofundar e entender completamente como ele funciona, consulte a documentação do Cheerio.