Analisando HTML em Node.js com Cheerio

$ (“. Foo”)-Classe: seleciona cada elemento que tem a classe foo aplicada a ele $ (“# bar”)-Id: seleciona cada elemento que tem a barra id única $ (“: focus”)-seleciona o elemento que atualmente tem foco $ (“input [type=’text’]”)-Atributo: seleciona qualquer elemento de entrada com um tipo de entrada de texto $ (‘. bar,’#foo)-Seleciona todos os elementos filho com a barra de classe, em um elemento com a classe foo

Eventos e manipulação de DOM

Semelhante a JQuery , Cheerio é fornecido com vários métodos relacionados ao DOM para acessar e manipular elementos HTML e seus atributos.

Alguns dos métodos mais comumente usados ​​incluem:

.text ()-Define ou retorna o conteúdo innerText do elemento selecionado. Usando nossa marcação anterior como exemplo, podemos obter o conteúdo de texto de um elemento com classe vue com o código abaixo:
$ (“. Vue”). Text ();
//output=> Vue.js ⚡.html ()-Define ou retorna o conteúdo innerHTML do elemento selecionado.append ()-Irá inserir o conteúdo fornecido como o último filho de cada um dos elementos selecionados.prepend ()-Ao contrário de append, isso irá inserir fornecido conteúdo como o primeiro filho de cada um dos elementos selecionados.addClass () e.removeClass ()-Irá remover ou adicionar classes fornecidas a todos os elementos correspondentes.hasClass ()-Retorna um valor booleano (verdadeiro/falso) se o elemento selecionado tiver o nome da classe fornecida.toggleClass ()-Verificará se a classe fornecida está presente no elemento selecionado. Se estiver presente, a classe fornecida será removida, caso contrário, será adicionada à lista de classes de elementos selecionados

Renderização

Assim que terminar de analisar e manipular sua marcação, você pode acessar seu conteúdo raiz com:

$.root (). html ();

Por padrão, ao analisar o conteúdo HTML no Cheerio, algumas tags serão abertas e, no caso em que você estiver trabalhando com conteúdo XML, o arquivo XML será inválido desta forma.

Para renderizar um documento XML válido, você pode usar a função de utilitário XML do Cheerio:

//Carregando conteúdo XML const $=cheerio.load (‘‘);//Renderizando conteúdo xml $.xml ();//Output=>

Construindo FeatRocket

Agora que temos um entendimento básico de como o Cheerio funciona, vamos prosseguir e construir um projeto de amostra.

Estaremos construindo o FeatRocket, um aplicativo CLI que limpará tudo artigos em destaque no blog LogRocket e registrá-los em nosso console.

Veja como faremos isso:

Entenda a estrutura do blog LogRocket Baixe a marcação da página da web Carregue a marcação baixada em uma nova instância do Cheerio Localize e filtre o conteúdo necessário Registrar o resultado no console

Compreendendo a estrutura do site

A primeira etapa na web scraping é entender como o conteúdo do site está organizado, ou seja, qual atributo (classe, id, href ) é atribuído ao elemento que você deseja acessar e assim por diante.

Em nosso caso, notamos que nosso conteúdo direcionado está organizado da seguinte forma:

Onde o div com a classe listfeaturedtag é um wrapper para todos os nossos artigos direcionados e os divs com a classe col.. padlr10 são cartões para cada artigo apresentado.

Faça download da marcação da página da web

Agora entendemos a estrutura do site ao lado do nosso conteúdo direcionado. Em seguida, crie um novo arquivo scrapper.js e prossiga para instalar Axios -usaremos o Axios para baixar o conteúdo do site.

npm install axios

E podemos pegar o código-fonte do site com:

const axios=require (“axios”); axios.get (“https://blog.logrocket.com/”).then ((resposta)=> {console.log (resposta)}).catch ((err)=> console.log (“Erro de busca”+ err));

Cole o código acima no arquivo scrapper.js recém-criado e execute-o com:

node scrapper.js

Você notará que todo o conteúdo HTML do site é registrado no console.

Carregar a marcação no Cheerio

A próxima etapa é carregar a marcação baixada em um novo Cheerio:

const axios=require (“axios”); const cheerio=require (“cheerio”); axios.get (“https://blog.logrocket.com/”).then ((resposta)=> {const $=cheerio.load (response.data);}).catch ((err)=> console. log (“Fetch error”+ err));

Filtrar resultados

Em seguida, queremos filtrar apenas o conteúdo necessário. Já conhecemos os atributos de nossos divs-alvo (.listfeaturedtag e.padlr10). Teremos apenas que percorrer cada um deles e registrá-los no console, para que nosso código completo fique assim:

const axios=require (“axios”); const cheerio=require (“cheerio”); axios.get (“https://blog.logrocket.com/”).then ((resposta)=> {const $=cheerio.load (response.data); const featuredArticles=$ (“. listfeaturedtag.padlr10”) ; for (let i=0; i a”) [0], postLink=$ (postLinkWrapper).attr (“href”);//console.log (“\ n ++++++”); console.log (`$ {postTitle} por [$ {autor}]`); console.log (`$ {postDesc} `); console.log (“\ n”+` Leia mais-$ {postLink} `); console.log (“\ n—-\ n \ n”);}}).catch ( (errar)=> console.log (“Fetch error”+ err));

Agora, se executarmos o node scrapper.js, você deverá ver uma saída semelhante à abaixo em seu console:

Conclusão

Cheerio é uma excelente estrutura para manipular e extrair conteúdo de marcação no lado do servidor, além de ser leve e implementar uma sintaxe familiar.

Este tutorial forneceu um guia detalhado sobre como começar a usar o Cheerio em um projeto da vida real.

Para referência futura, você também pode verificar o código-fonte do FeatRocket no GitHub .

Obrigado pela leitura!