Trích xuất dữ liệu từ trang web bằng JavaScript

Có nhiều ứng dụng quét web. Trích xuất giá của sản phẩm và so sánh chúng với các nền tảng Thương mại điện tử khác nhau. Nhận báo giá hàng ngày từ web. Xây dựng công cụ tìm kiếm của riêng bạn như Google, Yahoo, v.v. , Danh sách cứ kéo dài

Bạn có thể làm được nhiều hơn bạn nghĩ với tính năng quét web. Khi bạn biết cách trích xuất dữ liệu từ các trang web, thì bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu

Chương trình trích xuất dữ liệu từ các trang web được gọi là trình quét web. Bạn sẽ học cách viết web scraper bằng JavaScript

Chủ yếu có hai phần để quét web

• Lấy dữ liệu bằng thư viện yêu cầu và trình duyệt không đầu
• Phân tích cú pháp dữ liệu để trích xuất thông tin chính xác mà chúng tôi muốn từ dữ liệu

Không cần phải quảng cáo thêm, hãy bắt đầu

Thiết lập dự án

Tôi giả sử bạn đã cài đặt Node, nếu chưa hãy xem hướng dẫn cài đặt NodeJS

Chúng tôi sẽ sử dụng các gói node-fetch và cheerio để quét web bằng JavaScript. Hãy thiết lập dự án với npm để làm việc với gói của bên thứ ba

Hãy nhanh chóng xem các bước để hoàn thành thiết lập của chúng tôi

• Tạo một thư mục có tên là web_scraping và điều hướng đến nó
• Chạy lệnh npm init để khởi tạo dự án
• Trả lời tất cả các câu hỏi dựa trên sở thích của bạn
• Bây giờ, cài đặt các gói bằng lệnh

npm install node-fetch cheerio

Hãy xem thoáng qua các gói đã cài đặt

tìm nạp nút

Gói node-fetch đưa

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

cổ vũ

Gói cheerio được sử dụng để phân tích cú pháp và trích xuất thông tin cần thiết từ dữ liệu thô

Hai gói node-fetch và cheerio đủ tốt để quét web bằng JavaScript. Chúng tôi sẽ không thấy mọi phương pháp mà các gói đang cung cấp. Chúng ta sẽ thấy luồng quét web và các phương pháp hữu ích nhất trong luồng đó

Bạn sẽ học cách quét web bằng cách thực hiện nó. Vì vậy, hãy bắt tay vào công việc

Cạo danh sách Cricket World Cup

Ở đây trong phần này, chúng ta sẽ thực hiện quét web thực tế

Chúng ta đang trích xuất cái gì?

Qua tiêu đề của phần này, tôi nghĩ bạn sẽ dễ dàng đoán ra. Vâng, bất cứ điều gì bạn đang nghĩ là chính xác. Hãy trích xuất tất cả những người chiến thắng và á quân cúp thế giới cricket cho đến bây giờ

• Tạo một tệp có tên

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

  4 trong dự án
• Chúng tôi sẽ sử dụng trang Wikipedia Cricket World Cup để có được thông tin mong muốn
• Đầu tiên, lấy dữ liệu thô bằng gói node-fetch
• Mã bên dưới lấy dữ liệu thô của trang Wikipedia ở trên

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

Chúng tôi đã nhận được dữ liệu thô từ URL. Bây giờ, đã đến lúc trích xuất thông tin mà chúng ta cần từ dữ liệu thô. Hãy sử dụng gói cheerio để trích xuất dữ liệu

Trích xuất dữ liệu liên quan đến các thẻ HTML với cheerio là một công việc dễ dàng. Trước khi đi vào dữ liệu thực tế, hãy xem một số phân tích dữ liệu mẫu bằng cách sử dụng cheerio

• Phân tích cú pháp dữ liệu HTML bằng cách sử dụng phương thức

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

  7

const parsedSampleData = cheerio.load(
      `
I'm title
`
   );

• Chúng tôi đã phân tích cú pháp mã HTML ở trên. Làm cách nào để trích xuất nội dung thẻ

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

  8 từ nó?

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

Bạn có thể chọn các thẻ như bạn muốn. Bạn có thể kiểm tra các phương pháp khác nhau từ trang web chính thức của cổ vũ

• Bây giờ, đã đến lúc trích xuất danh sách cúp thế giới. Để trích xuất thông tin, chúng ta cần biết các thẻ HTML mà thông tin nằm trên trang. Truy cập trang Wikipedia về cricket world cup và kiểm tra trang để lấy thông tin thẻ HTML

Đây là mã hoàn chỉnh

Và, đây là dữ liệu cạo

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

Tuyệt 😎, phải không?

mẫu cạo

Lấy dữ liệu thô từ URL là phổ biến trong mọi dự án quét web. Phần duy nhất thay đổi là trích xuất dữ liệu theo yêu cầu. Bạn có thể thử đoạn mã dưới đây làm mẫu

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

Phần kết luận

Bạn đã học cách cạo một trang web. Bây giờ, đến lượt bạn thực hành viết mã

Tôi cũng khuyên bạn nên kiểm tra các khung quét web phổ biến để khám phá và các giải pháp quét web dựa trên đám mây

Làm cách nào để lấy dữ liệu từ trang web bằng JavaScript?

Bạn có thể cạo dữ liệu bằng JavaScript không?

Làm cách nào để lấy dữ liệu từ HTML bằng JavaScript?

Làm cách nào để xóa bảng khỏi trang web bằng JavaScript?