เรามาพูดถึงวิธีรวบรวมข้อมูลโดยใช้ Node.js + Cheerio กันดีกว่า

ก่อนที่เราจะเริ่ม คุณต้องปฏิบัติตามกฎหมายและข้อบังคับในท้องถิ่น และอย่าขูดข้อมูลที่เปิดเผยโดยไม่ได้รับอนุญาต

ข้อกำหนดเบื้องต้น

สิ่งที่จำเป็นสำหรับบทช่วยสอนนี้มีดังนี้:

• คุณต้องติดตั้ง Node.js หากคุณไม่มี Node เพียงตรวจสอบให้แน่ใจว่าได้ดาวน์โหลดสำหรับระบบของคุณจากหน้าดาวน์โหลด Node.js (https://nodejs.dev/download/)
• คุณจะต้องติดตั้งโปรแกรมแก้ไขข้อความในเครื่องของคุณ เช่น ในฐานะ VSCode หรือ Atom
• คุณควรมีความเข้าใจพื้นฐานเกี่ยวกับ JavaScript, Node.js และ Document Object Model (DOM) เป็นอย่างน้อย

เชอริโอ้คืออะไร?

Cheerio เป็นเครื่องมือสำหรับแยกวิเคราะห์ HTML และ XML ใน Node.js เป็นที่นิยมอย่างมากบน GitHub และมีดาวมากกว่า 23,000 ดวง

มันรวดเร็ว ยืดหยุ่น และใช้งานง่าย เนื่องจากใช้ชุดย่อยของ JQuery จึงเป็นเรื่องง่ายที่จะเริ่มต้นกับ Cheerio หากคุณคุ้นเคยกับ JQuery อยู่แล้ว

ข้อแตกต่างที่สำคัญระหว่าง Cheerio และเว็บเบราว์เซอร์ก็คือ Cheerio จะไม่สร้างการเรนเดอร์ภาพ, โหลด CSS, โหลดทรัพยากรภายนอก หรือรัน JavaScript มันเพียงแค่แยกวิเคราะห์มาร์กอัปและจัดเตรียม API สำหรับจัดการโครงสร้างข้อมูลผลลัพธ์ สิ่งนี้อธิบายว่าทำไมมันถึงเร็วมาก - เอกสารของ Cheerio

หากคุณต้องการใช้ Cheerio เพื่อดึงข้อมูลหน้าเว็บ คุณต้องใช้แพ็คเกจเช่น axios หรือ node-fetch ก่อนเพื่อรับแท็ก

วิธีรวบรวมข้อมูลหน้าเว็บใน Node โดยใช้ Cheerio

ในตัวอย่างนี้ เราจะรวบรวมข้อมูลรหัส ISO 3166-1 alpha-3 สำหรับทุกประเทศและเขตอำนาจศาลอื่น ๆ ที่แสดงอยู่ในหน้า Wikipedia นี้ อยู่ใต้ส่วน รหัสปัจจุบัน ของหน้า ISO 3166-1 alpha-3

รายชื่อประเทศ/เขตอำนาจศาลและรหัสที่เกี่ยวข้องมีดังนี้:

ขั้นตอนที่ 1 - สร้างไดเร็กทอรีการทำงาน

ในขั้นตอนนี้ คุณจะสร้างไดเร็กทอรีสำหรับโปรเจ็กต์ของคุณโดยการรันคำสั่งต่อไปนี้บนเทอร์มินัล คำสั่งนี้จะสร้างไฟล์ชื่อ learn-cheerio คุณสามารถตั้งชื่ออื่นได้หากต้องการ

mkdir Learn-cheerio

learn-cheerio หลังจากรันคำสั่งข้างต้นสำเร็จแล้ว คุณควรจะเห็นโฟลเดอร์ที่ชื่อสร้างแล้ว

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

ขั้นตอนที่ 2 - เริ่มต้นโครงการ

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

npm init -y

การรันคำสั่งข้างต้นสำเร็จจะสร้างไฟล์ package.json ในรูทของไดเร็กทอรีโปรเจ็กต์

ในขั้นตอนถัดไป คุณจะติดตั้งการขึ้นต่อกันของโปรเจ็กต์

ขั้นตอนที่ 3 - ติดตั้งการขึ้นต่อกัน

ในขั้นตอนนี้ คุณจะติดตั้งการขึ้นต่อกันของโครงการโดยการรันคำสั่งต่อไปนี้ การดำเนินการนี้จะใช้เวลาสักครู่ ดังนั้นโปรดอดใจรอ

npm i axios Cheerio Pretty

การรันคำสั่งข้างต้นสำเร็จจะลงทะเบียนการขึ้นต่อกันสามรายการในไฟล์ภายใต้ฟิลด์ package.json dependencies การขึ้นต่อกันครั้งแรกคือ axios การขึ้นต่อกันครั้งที่สองคือ cheerio และการขึ้นต่อกันที่สามนั้นค่อนข้าง pretty

axios เป็นไคลเอนต์ http ยอดนิยมที่สามารถทำงานในโหนดและเบราว์เซอร์ เราต้องการมันเพราะว่า Cheerio เป็นตัวแยกวิเคราะห์โทเค็น

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

สวยงามเป็นแพ็คเกจ npm สำหรับมาร์กอัปที่สวยงามเพื่อให้สามารถอ่านได้เมื่อพิมพ์บนเทอร์มินัล

ในส่วนถัดไป คุณจะตรวจสอบแท็กที่จะใช้คัดลอกข้อมูล

ขั้นตอนที่ 4 - ตรวจสอบหน้าเว็บที่คุณต้องการคัดลอก

ก่อนที่จะคัดลอกข้อมูลจากหน้าเว็บ สิ่งสำคัญคือต้องเข้าใจโครงสร้าง HTML ของหน้าเว็บ

ในขั้นตอนนี้ คุณจะตรวจสอบโครงสร้าง HTML ของหน้าเว็บที่คุณต้องการคัดลอกข้อมูล

ไปที่หน้ารหัส ISO 3166-1 alpha-3 บน Wikipedia ใต้ส่วน "รหัสปัจจุบัน" จะมีรายชื่อประเทศและรหัสที่เกี่ยวข้อง CTRL + SHIFT + I คุณสามารถเปิด DevTools ได้โดยกดคีย์ผสมบน Chrome หรือคลิกขวาแล้วเลือกตัวเลือก "ตรวจสอบ"

นี่คือรายการของฉันใน Chrome DevTools:

ในส่วนถัดไป คุณจะเขียนโค้ดเพื่อรวบรวมข้อมูลเว็บ

ขั้นตอนที่ 5 - เขียนโค้ดเพื่อขูดข้อมูล

ในส่วนนี้คุณจะเขียนโค้ดเพื่อขูดข้อมูลที่เราสนใจ ขั้นแรกให้รันคำสั่งต่อไปนี้ซึ่งจะสร้างไฟล์ app.js

touch app.js

การรันคำสั่งข้างต้นสำเร็จจะสร้างไฟล์ app.js ในไดเร็กทอรีรากของไดเร็กทอรีโครงการ

เช่นเดียวกับแพ็คเกจ Node อื่นๆ คุณต้อง มี axios , cheerio และ axios ก่อนจึงจะเริ่มใช้งาน คุณสามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ที่ด้านบนของไฟล์ที่คุณเพิ่งสร้าง pretty app.js

const axios = ต้องการ ("axios");
const เชียร์โอ = ต้องการ ("เชียร์ริโอ");
const Pretty = need("pretty");

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

มาร์กอัปด้านล่างคือองค์ประกอบ ul li ที่มีองค์ประกอบของเรา

มาร์กอัป const = `
<ul class="ผลไม้">
  <li class="fruits__mango"> มะม่วง </li>
  <li class="fruits__apple"> แอปเปิ้ล </li>
</ul>
`;

เพิ่มการประกาศตัวแปรข้างต้นให้กับไฟล์ app.js

วิธีโหลดแท็กใน Cheerio Cheerio

cheerio สามารถโหลดแท็กโดยใช้เมธอด cheerio.load วิธีการนี้จะใช้เครื่องหมายเป็นพารามิเตอร์ นอกจากนี้ยังต้องมีพารามิเตอร์ทางเลือกเพิ่มเติมอีกสองตัวด้วย หากคุณสนใจ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับสิ่งเหล่านี้ได้ในเอกสารประกอบ

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

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ app.js ของคุณ:

const $ = Cheerio.load(markup);
console.log(pretty($.html()));

หากตอนนี้คุณรันโค้ดใน node app.js โดยการรันคำสั่ง app.js บนเทอร์มินัล คุณควรจะเห็นมาร์กอัปบนเทอร์มินัล นี่คือสิ่งที่ฉันเห็นบนเทอร์มินัล:

วิธีเลือกองค์ประกอบใน Cheerio

Cheerio รองรับตัวเลือก CSS ทั่วไป เช่น ตัวเลือก class , id และ element ในโค้ดด้านล่าง เราเลือกองค์ประกอบที่มีคลาส fruits__mango จากนั้นบันทึกองค์ประกอบที่เลือกลงในคอนโซล เพิ่มโค้ดต่อไปนี้ลงในไฟล์ app.js ของคุณ

มะม่วง const = $(".fruits__mango");
console.log(mango.html()); // Mango

หากคุณใช้การดำเนินการคำสั่ง บรรทัดโค้ดด้านบนจะเป็นข้อความบันทึก Mango บนเทอร์มินัล app.js``node app.js

วิธีรับคุณลักษณะขององค์ประกอบใน Cheerio

คุณยังสามารถเลือกองค์ประกอบและรับคุณลักษณะเฉพาะ เช่น class , id หรือคุณลักษณะทั้งหมดพร้อมค่าที่สอดคล้องกัน

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ app.js ของคุณ:

const apple = $(".fruits__apple");
console.log(apple.attr("class"); //

โค้ดด้านบน Fruit__apple จะล็อกอินเข้าสู่ fruits__apple Terminal fruits__apple คือคลาสขององค์ประกอบที่เลือก

วิธีวนซ้ำรายการองค์ประกอบใน Cheerio

Cheerio ให้วิธี .each เพื่อวนซ้ำองค์ประกอบที่เลือกหลายรายการ

ด้านล่างนี้ เราเลือกองค์ประกอบทั้งหมดและวนซ้ำโดยใช้วิธี li .each เราบันทึกเนื้อหาข้อความของแต่ละรายการบนเทอร์มินัล

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ app.js ของคุณ

const listItems = $("li");
console.log(listItems.length); // 2
listItems.each (ฟังก์ชัน (idx, el) {
  console.log($(el).text());
-
//มะม่วง
//

โค้ดของ Apple ด้านบนจะบันทึก 2 ซึ่งเป็นความยาวของรายการ หลังจากรันโค้ดแล้ว ข้อความ Mango และจะปรากฏบนเทอร์มินัล Apple``app.js

วิธีต่อท้ายหรือเพิ่มองค์ประกอบให้กับมาร์กอัปใน Cheerio

Cheerio ให้วิธีการต่อท้ายหรือต่อท้ายองค์ประกอบเพื่อมาร์กอัป

วิธี append จะผนวกองค์ประกอบที่ส่งผ่านเป็นพารามิเตอร์หลังจากองค์ประกอบลูกสุดท้ายขององค์ประกอบที่เลือก ในทางกลับกัน prepend จะเพิ่มองค์ประกอบที่ส่งก่อนลูกแรกขององค์ประกอบที่เลือก

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ app.js ของคุณ:

const ul = $("ul");
ul.append("<li>กล้วย</li>");
ul.prepend("<li>สับปะรด</li>");
console.log(pretty($.html()));

หลังจากเพิ่มและเพิ่มองค์ประกอบลงในมาร์กอัป นี่คือสิ่งที่ฉันเห็นเมื่อลงชื่อเข้าใช้เทอร์มินัล $.html()

สิ่งเหล่านี้เป็นพื้นฐานของ Cheerio เพื่อช่วยให้คุณเริ่มต้นใช้งานการขูดเว็บได้ หากต้องการดึงข้อมูลจาก Wikipedia ที่เราอธิบายไว้ตอนต้นของบทความนี้ ให้คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ app.js :

// กำลังโหลดการขึ้นต่อกัน
// เพราะเราจะไม่บันทึก html ไปยังเทอร์มินัล
const axios = ต้องการ ("axios");
const เชียร์โอ = ต้องการ ("เชียร์ริโอ");
const fs = ต้องการ("fs");

// URL ของหน้าที่เราต้องการคัดลอก
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";

// ฟังก์ชัน Async ที่ขูดข้อมูล
ฟังก์ชั่น async scrapeData () {
  พยายาม {
    // ดึงข้อมูล HTML ของหน้าที่เราต้องการคัดลอก
    const { data } = รอ axios.get (url);
    // โหลด HTML ที่เราดึงมาในบรรทัดก่อนหน้า
    const $ = Cheerio.load(ข้อมูล);
    // เลือกรายการทั้งหมดในคลาสธรรมดา
    const listItems = $(".plainlist ul li");
    // เก็บข้อมูลสำหรับทุกประเทศ
    ประเทศ const = [];
    // ใช้ .each วิธีการวนซ้ำ li ที่เราเลือก
    listItems.each((idx, el) => {
      // ข้อมูลการถือครองวัตถุสำหรับแต่ละประเทศ/เขตอำนาจศาล
      ประเทศ const = { ชื่อ: "", iso3: "" };
      // เลือกเนื้อหาข้อความขององค์ประกอบ a และ span
      // เก็บเนื้อหาข้อความไว้ในวัตถุด้านบน
      Country.name = $(el).children("a").text();
      Country.iso3 = $(el).children("span").text();
      // เติมประเทศด้วยข้อมูลประเทศ
      ประเทศผลักดัน(ประเทศ);
    -
    // บันทึกอาร์เรย์ประเทศไปยังคอนโซล
    console.dir(ประเทศ);
    // เขียนอาร์เรย์ประเทศในไฟล์country.json
    fs.writeFile("coutries.json", JSON.stringify(ประเทศ, null, 2), (ผิดพลาด) => {
      ถ้า (ผิดพลาด) {
        console.error(ผิดพลาด);
        กลับ;
      -
      console.log("เขียนข้อมูลลงไฟล์เรียบร้อยแล้ว");
    -
  } จับ (ผิดพลาด) {
    console.error(ผิดพลาด);
  -
-
//เรียกใช้ฟังก์ชันข้างต้น
scrapeData();

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

ในโค้ดข้างต้น เรา จำเป็นต้อง มีการอ้างอิงทั้งหมดที่ด้านบนของไฟล์ app.js จากนั้นเราจะประกาศฟังก์ชัน scrapeData ภายในฟังก์ชันนี้ HTML ที่ดึงมาของหน้าที่เราต้องคัดลอกจะถูกโหลดลงใน cheerio โดยใช้ axios

รายชื่อประเทศและรหัส iso3 ที่เกี่ยวข้องนั้นซ้อนอยู่ในองค์ประกอบ div พร้อมด้วยคลาส plainlist องค์ประกอบ li จะถูกเลือก จากนั้นเราจะวนซ้ำโดยใช้วิธี . .each ข้อมูลของแต่ละประเทศจะถูกคัดลอกและจัดเก็บไว้ในอาร์เรย์

หลังจากรันโค้ดด้านบนโดยใช้คำสั่ง node app.js ข้อมูลที่บันทึกไว้จะถูกเขียนลงในไฟล์ countries.json และพิมพ์ลงบนเทอร์มินัล นี่เป็นส่วนหนึ่งของสิ่งที่ฉันเห็นบนเทอร์มินัล:

ขอบคุณ

ที่อ่านบทความนี้! เราได้กล่าวถึงการใช้ cheerio ไปแล้ว หากคุณต้องการเจาะลึกและทำความเข้าใจวิธีการทำงานอย่างถ่องแท้ คุณสามารถไปที่เอกสารประกอบของ Cheerio