Getting Started with Cheerio

Introduction

Hello! Today, we are going to dive into the powerful world of cheerio library for Node.js. Specifically, we will focus on parsing HTML content. It's a valuable skill that comes in handy when you have to extract insights from websites. By the end of this lesson, you'll be proficient in parsing HTML using cheerio and will know how to find specific elements in the parsed content. So, let's get started.

What is web scraping?

Web scraping is the process of extracting data from websites. It involves fetching the HTML content of a webpage and then parsing it to extract the desired information. Web scraping is a common technique used in various fields, including data science, market research, and business intelligence. For example, you might scrape a website to extract product information for price comparison, gather news headlines for sentiment analysis, or collect job postings for market research. The possibilities are endless! In this course, we'll use hardcoded HTML content to demonstrate web scraping techniques, but later in the course, we'll explore how to fetch HTML content from live websites. So, let's start by understanding the basics of cheerio .

Cheerio overview

cheerio is a Node.js library that's used for parsing HTML and XML documents and is often used to extract data from web pages. It implements a subset of core jQuery functionality, making it familiar to developers who have worked with jQuery . It creates a server-side DOM that can be used to extract data in a more readable and hierarchical manner. To get started with cheerio, you need to install it first. You can do so using npm, the package manager for Node.js. Shell npm install cheerio Once it's installed, you can import it into your Node.js script like so: JavaScript const cheerio = require('cheerio'); Before we jump into parsing, let's briefly touch upon HTML . HTML, or HyperText Markup Language, is the standard markup language for documents intended to be displayed in a web browser. It can include elements like headings, paragraphs, divs, spans, links, etc., all of which help structure the information on a webpage.

Parsing HTML content

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML parsing is the process of analyzing HTML code and extracting relevant information. It's necessary when you want to extract specific data from a given webpage, for instance, if you want to grab all the headlines from a news site's homepage.

To parse HTML with cheerio, you need two things:

The HTML content.
A cheerio object, which you create by loading the HTML content directly.

We'll understand this process better with our code example.

Now let's look at how we can build a cheerio object.

JavaScript

// Given HTML content
const html_content = '<div><p>Hello, World!</p><p>Welcome to web scraping with Cheerio.</p></div>';
const $ = cheerio.load(html_content);

// Given HTML content
const html_content = '<div><p>Hello, World!</p><p>Welcome to web scraping with Cheerio.</p></div>';
const $ = cheerio.load(html_content);

The cheerio.load() function takes the HTML content as its argument and returns a cheerio object. By convention, this object is assigned to the variable $, which mimics jQuery's syntax and makes the code more familiar to web developers.

When you want to see the HTML content, you can convert the cheerio object back to a string. Here's an idea of what this looks like:

JavaScript

console.log($.html());

console.log($.html());

The output of the above code will be:

HTML

<div><p>Hello, World!</p><p>Welcome to web scraping with Cheerio.</p></div>

<div><p>Hello, World!</p><p>Welcome to web scraping with Cheerio.</p></div>

This output shows that cheerio has successfully parsed the HTML content into a structured object, keeping the original structure intact. This readies it for further processing or data extraction tasks.

In the HTML document, the content is organized in a tree-like structure. We can locate the tags and their corresponding content using cheerio's jQuery-like selector syntax. It allows us to look for HTML tags using CSS selectors and retrieve the matching elements.

The selector function can be used like so:

JavaScript

const element = $('tag-name');

const element = $('tag-name');

Where tag-name is the tag you're looking for, and element will hold all matching elements. If no match is found, you get an empty cheerio object.

It's important to note that cheerio selectors return all matching elements by default. If you'd like to work with just the first match, you can use the .first() method or access elements by index.

Let's now walk through a code example that puts these concepts into practice.

Let's look at the following code snippet:

JavaScript

const cheerio = require('cheerio');

// Sample HTML content
const html_content = '<html><head><title>Test Page</title></head><body><p class="message">Hello, World!</p></body></html>';
const $ = cheerio.load(html_content);

// Find the title tag
const title = $('title').text();
console.log(`Page title: ${title}`);

const cheerio = require('cheerio');

// Sample HTML content
const html_content = '<html><head><title>Test Page</title></head><body><p class="message">Hello, World!</p></body></html>';
const $ = cheerio.load(html_content);

// Find the title tag
const title = $('title').text();
console.log(`Page title: ${title}`);

First, we import the cheerio library using require(). Next, we define a string html_content, which contains the HTML that we want to parse. We pass this string to the cheerio.load() function to create a cheerio object, which we assign to the $ variable.

We can then use jQuery-like selectors on that cheerio object to locate the tags we are interested in. In our case, we are looking for the title tag using $('title'). The selector returns a cheerio object, and we use the .text() method to access the text contents of the element. Notice how easy and straightforward it is to get the title of the page.

The output of the above code will be:

text

Page title: Test Page

Page title: Test Page

This output demonstrates how cheerio can be used to easily find and extract the text content from a specific HTML tag, in this case, the <title> tag from our example HTML content.

Fantastic! You've learned about cheerio and how to use it to parse HTML content and find specific elements. In the next lessons, we'll focus on more advanced cheerio functionalities like finding multiple elements, traversing the DOM tree, and working with attributes. For now, make sure to solidify your knowledge by practicing parsing different HTML strings and finding various elements. Let's keep going, and happy learning!

Introduction

What is web scraping?

Cheerio overview

Parsing HTML content

Join the 1M+ learners on CodeSignal

Working with the cheerio object

Finding elements

Node.js code walkthrough

Lesson summary and practice exercises