What is web scraping? Why is it even exist? Let’s find out the answers.
What is Web Scraping?
Web scraping is an automated task to extract data from websites. There are many applications of web scraping. Extracting the prices of products and comparing them with different e-Commerce platforms. Getting a daily quote from the web. Building your own search engine like Google, Yahoo, etc.., The list goes on. You can do more than you think with web scraping. Once you get to know how to extract the data from websites, then you can do whatever you want with the data. The program which extracts the data from websites is called a web scraper. You are going to learn to write web scrapers in JavaScript. There are mainly two parts to web scraping.
Getting the data using request libraries and a headless browser. Parsing the data to extract the exact information that we want from the data.
Without further ado let’s get started.
Project Setup
I assume you have Node installed, if not check out the NodeJS installation guide. We are going to use the packages node-fetch and cheerio for web scraping in JavaScript. Let’s set up the project with the npm to work with a third-party package. Let’s quickly see the steps to complete our setup.
Create a directory called web_scraping and navigate to it. Run the command npm init to initialize the project. Answer all the questions based on your preference. Now, install the packages using the command
Let’s see the glimpses of the installed packages.
node-fetch
The package node-fetch brings the window.fetch to the node js environment. It helps to make the HTTP requests and get the raw data.
cheerio
The package cheerio is used to parse and extract the information that is necessary from the raw data. Two packages node-fetch and cheerio are good enough for web scraping in JavaScript. We are not going to see every method that the packages are providing. We will see the flow of web scraping and the most useful methods in that flow. You will learn web scraping by doing it. So, let’s get to the work.
Scraping Cricket World Cup List
Here in this section, we are going to do actual web scraping. What are we extracting? By the title of the section, I think you would easily guess it. Yeah, whatever you are thinking is correct. Let’s extract all cricket world cup winners and runner-ups till now.
Create a file called extract_cricket_world_cups_list.js in the project. We will be using the Wikipedia Cricket World Cup page to get the desired information. First, get the raw data using the node-fetch package. Below code gets the raw data of the above Wikipedia page.
We got the raw data from the URL. Now, it’s time to extract the information that we need from the raw data. Let’s use the package cheerio to extract the data. Extracting data that involves HTML tags with cheerio is a cakewalk. Before getting into the actual data, let’s see some sample data parsing using cheerio.
Parse the HTML data using cheerio.load the method.
We have parsed the above HTML code. How to extract the p tag content from it? It’s the same as the selectors in JavaScript DOM manipulation.
console.log(parsedSampleData("#title").text()); You can select the tags as you want. You can check out different methods from the cheerio official website.
Now, it’s time to extract the world cup list. To extract the information, we need to know the HTML tags that information lies on the page. Go to the cricket world cup Wikipedia page and inspect the page to get HTML tags information.
Here is the complete code. And, here is the scraped data. Cool 😎, is int’ it?
Scraping Template
Getting the raw data from the URL is common in every web scraping project. The only part that changes is extracting the data as per the requirement. You can try the below code as a template.
Conclusion
You have learned how to scrape a webpage. Now, it’s your turn to practice coding. I would also suggest checking out popular web scraping frameworks to explore and cloud-based web-scraping solutions. Happy Coding 🙂
