เริ่มต้นใช้งาน Web Scraping ใน JavaScript

การขูดเว็บเป็นหนึ่งในสิ่งที่น่าสนใจที่สุดในโลกของการเข้ารหัส

การขูดเว็บคืออะไร?

ทำไมมันถึงมีอยู่?

มาหาคำตอบกัน

การขูดเว็บคืออะไร?

การขูดเว็บเป็นงานอัตโนมัติในการดึงข้อมูลจากเว็บไซต์

มีแอปพลิเคชั่นมากมายสำหรับการขูดเว็บ แยกราคาของผลิตภัณฑ์และเปรียบเทียบกับแพลตฟอร์มอีคอมเมิร์ซต่างๆ รับใบเสนอราคารายวันจากเว็บ สร้างเครื่องมือค้นหาของคุณเอง เช่น Google, Yahoo เป็นต้น รายการดำเนินต่อไป

คุณสามารถทำอะไรได้มากกว่าที่คุณคิดด้วยการขูดเว็บ เมื่อคุณทราบวิธีการดึงข้อมูลจากเว็บไซต์แล้ว คุณสามารถทำอะไรก็ได้ที่คุณต้องการกับข้อมูลนั้น

โปรแกรมที่ดึงข้อมูลจากเว็บไซต์เรียกว่าโปรแกรมขูดเว็บ คุณจะได้เรียนรู้การเขียนเว็บสแครปเปอร์ใน JavaScript

ส่วนใหญ่มีสองส่วนในการขูดเว็บ

  • รับข้อมูลโดยใช้ไลบรารีคำขอและเบราว์เซอร์ที่ไม่มีส่วนหัว
  • แยกวิเคราะห์ข้อมูลเพื่อแยกข้อมูลที่เราต้องการจากข้อมูล

มาเริ่มกันเลยดีกว่า

การตั้งค่าโครงการ

ฉันถือว่าคุณได้ติดตั้งโหนดแล้ว หากไม่ได้ตรวจสอบคู่มือการติดตั้ง NodeJS

เราจะใช้แพ็คเกจ node-fetch และcheerio สำหรับการขูดเว็บใน JavaScript มาตั้งค่าโปรเจ็กต์ด้วย npm เพื่อทำงานกับแพ็คเกจของบุคคลที่สาม

มาดูขั้นตอนในการตั้งค่าของเรากันอย่างรวดเร็ว

  • สร้างไดเร็กทอรีชื่อ web_scraping และไปที่ไดเร็กทอรี
  • เรียกใช้คำสั่ง npm init เพื่อเริ่มต้นโครงการ
  • ตอบคำถามทั้งหมดตามความต้องการของคุณ
  • ตอนนี้ติดตั้งแพ็คเกจโดยใช้คำสั่ง
npm install node-fetch cheerio

มาดูภาพรวมของแพ็คเกจที่ติดตั้งกัน

ดึงโหนด

การดึงข้อมูลโหนดแพ็กเกจนำ window.fetch ไปยังสภาพแวดล้อมโหนด js ช่วยในการสร้างคำขอ HTTP และรับข้อมูลดิบ

ไชโย

แพ็คเกจ ไชโย ใช้ในการแยกวิเคราะห์และดึงข้อมูลที่จำเป็นจากข้อมูลดิบ

สองแพ็คเกจ node-fetch และcheerio นั้นดีพอสำหรับการขูดเว็บใน JavaScript เราจะไม่เห็นทุกวิธีที่แพ็คเกจมีให้ เราจะเห็นการไหลของการขูดเว็บและวิธีที่มีประโยชน์ที่สุดในโฟลว์นั้น

คุณจะได้เรียนรู้การขูดเว็บด้วยการทำมัน งั้นมาเริ่มงานกันเลย

ขูดรายชื่อคริกเก็ตฟุตบอลโลก

ในส่วนนี้ เราจะทำการขูดเว็บจริง

เรากำลังสกัดอะไร?

ตามชื่อหัวข้อ ฉันคิดว่าคุณน่าจะเดาได้ง่าย ใช่สิ่งที่คุณคิดถูกต้อง เรามาแยกผู้ชนะการแข่งขันคริกเก็ตเวิลด์คัพและรองชนะเลิศจนถึงตอนนี้

  • สร้างไฟล์ชื่อ extract_cricket_world_cups_list.js ในโครงการ
  • เราจะใช้ วิกิพีเดีย คริกเก็ตเวิลด์คัพ หน้าเพื่อรับข้อมูลที่ต้องการ
  • ขั้นแรก รับข้อมูลดิบโดยใช้แพ็คเกจการดึงโหนด
  • รหัสด้านล่างรับข้อมูลดิบของหน้า Wikipedia ด้านบน
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();

เราได้ข้อมูลดิบจาก URL ตอนนี้ได้เวลาดึงข้อมูลที่เราต้องการจากข้อมูลดิบ ลองใช้แพ็คเกจcheerioเพื่อดึงข้อมูล

  ฮาร์ดไดรฟ์ที่ใหญ่ที่สุดที่คุณสามารถซื้อได้คืออะไร

การดึงข้อมูลที่เกี่ยวข้องกับแท็ก HTML ด้วย Cheerio นั้นเป็นวิธีที่ง่าย ก่อนเข้าสู่ข้อมูลจริง เรามาดูตัวอย่างการแยกวิเคราะห์ข้อมูลโดยใช้ Cheerio กันก่อน

  • แยกวิเคราะห์ข้อมูล HTML โดยใช้เมธอดcheerio.load
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • เราได้แยกวิเคราะห์โค้ด HTML ข้างต้น จะแยกเนื้อหาแท็ก p ออกมาได้อย่างไร ซึ่งเหมือนกับตัวเลือกในการจัดการ JavaScript DOM

console.log(parsedSampleData(“#title”).text());

คุณสามารถเลือกแท็กได้ตามต้องการ คุณสามารถดูวิธีการต่างๆ ได้จาก เว็บไซต์อย่างเป็นทางการของเชียร์ริโอ.

  • ตอนนี้ได้เวลาแยกรายการฟุตบอลโลกแล้ว ในการดึงข้อมูล เราจำเป็นต้องทราบแท็ก HTML ที่ข้อมูลอยู่ในหน้านั้น ไปที่ หน้าวิกิพีเดียฟุตบอลโลกคริกเก็ต และตรวจสอบหน้าเพื่อรับข้อมูลแท็ก HTML

นี่คือรหัสที่สมบูรณ์

const fetch = require("node-fetch");
const cheerio = require("cheerio");

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

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // extracting year
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // extracting winner
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // extracting runner
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

และนี่คือข้อมูลที่คัดลอกมา

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

เจ๋ง 😎 อินมั้ย?

  วิธีค้นหาพิกัดละติจูดและลองจิจูดโดยใช้ Google Maps

แม่แบบการขูด

การรับข้อมูลดิบจาก URL เป็นเรื่องปกติในทุกโครงการขูดเว็บ ส่วนเดียวที่เปลี่ยนแปลงคือการดึงข้อมูลตามความต้องการ คุณสามารถลองใช้โค้ดด้านล่างเป็นเทมเพลต

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

บทสรุป

คุณได้เรียนรู้วิธีขูดหน้าเว็บแล้ว ตอนนี้ถึงตาคุณแล้วที่จะฝึกเขียนโค้ด

ฉันขอแนะนำให้ตรวจสอบเฟรมเวิร์กการขูดเว็บยอดนิยมเพื่อสำรวจและโซลูชันการขูดเว็บบนคลาวด์

มีความสุขในการเข้ารหัส🙂

สนุกกับการอ่านบทความ? แล้วแบ่งปันกับโลกล่ะ?

เรื่องล่าสุด

x