Cheerio

Cheerio คือการใช้งาน jQuery ฝั่งเซิร์ฟเวอร์ที่ออกแบบมาเฉพาะสำหรับแอปพลิเคชัน Node.js โดยมี API ที่คล้าย jQuery ที่คุ้นเคยสำหรับการแยกวิเคราะห์ การจัดการ และการเดินทางผ่านเอกสาร HTML และ XML โดยไม่มีภาระของสภาพแวดล้อมเบราว์เซอร์ ไม่ว่าคุณจะสร้างเว็บสแครปเปอร์ ประมวลผลเทมเพลต HTML หรือแปลงมาร์กอัปโดยใช้โปรแกรม Cheerio ทำให้การทำงานกับ HTML เป็นเรื่องง่ายเหมือนกับการทำงานกับ DOM ในเบราว์เซอร์

หัวใจสำคัญของ Cheerio คือการแก้ปัญหาการจัดการ HTML ฝั่งเซิร์ฟเวอร์ ในขณะที่เบราว์เซอร์มี DOM API ดั้งเดิมสำหรับการโต้ตอบกับ HTML แต่สภาพแวดล้อม JavaScript ฝั่งเซิร์ฟเวอร์กลับขาดความสามารถเหล่านี้ Cheerio เชื่อมช่องว่างนี้โดยการใช้งานเมธอดที่มีประโยชน์ที่สุดของ jQuery ใน package ที่เบาและเหมาะสำหรับเซิร์ฟเวอร์ มันสร้างขึ้นบนไลบรารีแยกวิเคราะห์ที่พิสูจน์แล้ว เช่น htmlparser2 และ parse5 เพื่อให้การประมวลผล HTML รวดเร็วและแม่นยำ ขณะเดียวกันยังคงไว้ซึ่งไวยากรณ์ที่เป็นมิตรกับนักพัฒนาที่นักพัฒนาหลายล้านคนรู้จักแล้ว

สิ่งที่ทำให้ Cheerio แตกต่างคือการมุ่งเน้นไปที่ประสิทธิภาพและความเรียบง่าย แตกต่างจากโซลูชันเบราว์เซอร์แบบ headless ที่จำลองสภาพแวดล้อมเบราว์เซอร์ทั้งหมด Cheerio ทำงานโดยตรงกับโครงสร้าง HTML ที่แยกวิเคราะห์แล้ว ทำให้เร็วอย่างไม่น่าเชื่อสำหรับงานจัดการ HTML มันลบความซับซ้อนและความไม่สอดคล้องที่เฉพาะเจาะจงของเบราว์เซอร์ ให้ API ที่สะอาดและสอดคล้องสำหรับการประมวลผล HTML ที่ทำงานได้อย่างน่าเชื่อถือในสภาพแวดล้อมต่างๆ

คุณลักษณะหลัก

API ที่เข้ากันได้กับ jQuery — ใช้ตัวเลือกที่คุ้นเคย เช่น $('.class'), $('#id'), และ $('element') กับเมธอดที่คุณรู้จักแล้ว รวมถึง .find(), .text(), .html(), และ .attr()
ประสิทธิภาพที่รวดเร็วสุดขั้ว — สร้างบนตัวแยกวิเคราะห์ที่ปรับปรุงแล้วโดยไม่มีภาระของเบราว์เซอร์ ทำให้เหมาะสำหรับแอปพลิเคชันที่มีปริมาณงานสูง เช่น การสแครปเว็บและการประมวลผล HTML แบบเป็นชุด
การแยกวิเคราะห์ HTML ที่ยืดหยุ่น — จัดการ HTML ที่มีรูปแบบที่ดีและไม่ดีอย่างสง่างาม พร้อมรองรับโหมด XML เมื่อต้องการการแยกวิเคราะห์แบบเข้มงวด
ปรับปรุงสำหรับฝั่งเซิร์ฟเวอร์ — ออกแบบมาเฉพาะสำหรับสภาพแวดล้อม Node.js โดยไม่มี dependency ของเบราว์เซอร์หรือความไม่สอดคล้องของ DOM ที่ต้องกังวล
รองรับ Streaming — ประมวลผล HTML จากแหล่งต่างๆ รวมถึง string, buffer, URL, และ stream เพื่อความยืดหยุ่นสูงสุด
พร้อมสำหรับ TypeScript — รองรับ TypeScript อย่างเต็มรูปแบบพร้อมคำจำกัดความของประเภทที่ครอบคลุมเพื่อประสบการณ์การพัฒนาที่ดีขึ้นและความปลอดภัยของโค้ด
รอยเท้าที่เบา — dependency น้อยและขนาด bundle เล็กทำให้เหมาะสำหรับฟังก์ชัน serverless และสภาพแวดล้อมที่จำกัดทรัพยากร
ประสิทธิภาพหน่วยความจำ — การจัดการโครงสร้าง HTML ที่แยกวิเคราะห์แล้วโดยตรงโดยไม่มีภาระของการรักษาบริบทเบราว์เซอร์เต็มรูปแบบ

เริ่มต้นอย่างรวดเร็ว

เริ่มต้นกับ Cheerio โดยติดตั้งผ่าน npm:

npm install cheerio

นี่คือตัวอย่างง่ายๆ ที่แสดงพลังของ Cheerio สำหรับการจัดการ HTML:

import * as cheerio from 'cheerio';

// Load HTML content
const $ = cheerio.load(`
  <html>
    <head><title>My Page</title></head>
    <body>
      <h1 class="header">Welcome</h1>
      <div class="content">
        <p>Hello <span class="name">World</span>!</p>
        <ul class="list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </body>
  </html>
`);

// Use jQuery-like selectors to find and modify elements
$('h1').text('Welcome to Cheerio!');
$('.name').text('Everyone');
$('.list').append('<li>Item 3</li>');
$('p').addClass('highlight');

// Extract data from elements
const title = $('title').text();
const items = $('.list li').map((i, el) => $(el).text()).get();

console.log('Page title:', title);
console.log('List items:', items);
console.log('Modified HTML:', $.html());

ตัวอย่างนี้แสดงให้เห็นว่า Cheerio ทำให้การจัดการ HTML เป็นเรื่องเข้าใจง่ายอย่างไร:

โหลด HTML — ฟังก์ชัน cheerio.load() แยกวิเคราะห์ HTML ของคุณและส่งคืนฟังก์ชันที่คล้าย jQuery ($)
เลือก Element — ใช้ตัวเลือก CSS เพื่อกำหนดเป้าหมาย element ที่ระบุ เหมือนใน jQuery
แก้ไขเนื้อหา — เชื่อมโซ่เมธอด เช่น .text(), .addClass(), และ .append() เพื่อแก้ไข HTML ของคุณ
แยกข้อมูล — ใช้เมธอด เช่น .map() เพื่อแยกข้อมูลจาก element หลายตัว
แสดงผลลัพธ์ — เรียก .html() เพื่อรับ string HTML ที่แก้ไขแล้วในขั้นสุดท้าย

ไวยากรณ์ jQuery ที่คุ้นเคยหมายความว่าแทบจะไม่มีเส้นโค้งการเรียนรู้เลยหากคุณเคยใช้ jQuery มาก่อน ทำให้ Cheerio เข้าถึงได้อย่างไม่น่าเชื่อสำหรับนักพัฒนาทุกระดับทักษะ

เมื่อไรควรใช้ Cheerio เทียบกับทางเลือกอื่น

เลือก Cheerio เมื่อ:

คุณต้องแยกวิเคราะห์และจัดการ HTML หรือ XML ฝั่งเซิร์ฟเวอร์
ประสิทธิภาพมีความสำคัญและคุณกำลังประมวลผลเอกสารจำนวนมาก
คุณต้องการไวยากรณ์ที่คล้าย jQuery ที่คุ้นเคย
คุณกำลังสร้างเว็บสแครปเปอร์หรือเครื่องมือแยกข้อมูล
คุณต้องแปลงเทมเพลต HTML หรือสร้างเนื้อหาสแตติก
คุณกำลังทำงานในสภาพแวดล้อมที่จำกัดทรัพยากร เช่น ฟังก์ชัน serverless

พิจารณาทางเลือกอื่นเมื่อ:

คุณต้องรัน JavaScript ภายในหน้าเว็บ (ใช้ Puppeteer หรือ Playwright)
คุณกำลังทำงานกับ SPA ที่ซับซ้อนที่ต้องการ JavaScript rendering
คุณต้องจำลองการโต้ตอบของผู้ใช้ เช่น การคลิกและการส่งแบบฟอร์ม
คุณต้องการ browser API เต็มรูปแบบ เช่น localStorage หรือ fetch

Cheerio เทียบกับ Puppeteer/Playwright: ในขณะที่เบราว์เซอร์แบบ headless สามารถรัน JavaScript และจำลองการโต้ตอบของผู้ใช้ได้ แต่มันหนักและช้ากว่ามาก Cheerio เหมาะสำหรับเมื่อคุณต้องการเพียงการแยกวิเคราะห์และจัดการ HTML โดยไม่ต้องรัน JavaScript

Cheerio เทียบกับ DOM API ดั้งเดิม: สภาพแวดล้อมเบราว์เซอร์มีการจัดการ DOM ดั้งเดิม แต่ Node.js ฝั่งเซิร์ฟเวอร์ไม่มี Cheerio เติมเต็มช่องว่างนี้ด้วยอินเทอร์เฟซที่คุ้นเคยและได้รับแรงบันดาลใจจาก jQuery

Cheerio เทียบกับ Regular Expression: แม้ว่า regex สามารถแยกข้อมูลจาก HTML ได้ แต่มันเปราะบางและเสี่ยงต่อข้อผิดพลาด Cheerio ให้การแยกวิเคราะห์ HTML ที่แข็งแกร่งซึ่งจัดการกรณีพิเศษและมาร์กอัปที่มีรูปแบบไม่ดีอย่างสง่างาม

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

Installation & Setup →