การขูดเว็บด้วย JavaScript: คู่มือสำหรับผู้เริ่มต้น

การแนะนำ

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

การขูดเว็บทำได้โดยใช้โปรแกรมซอฟต์แวร์หรือที่เรียกว่า web scraper เพื่อส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ของเว็บไซต์ จากนั้นเซิร์ฟเวอร์จะส่งโค้ด HTML สำหรับเว็บไซต์กลับมา ซึ่งเครื่องขูดเว็บจะสามารถแยกวิเคราะห์และดึงข้อมูลที่ต้องการออกมาได้ ข้อมูลที่แยกออกมาสามารถบันทึกในรูปแบบที่มีโครงสร้าง เช่น CSV, JSON หรือ XML

การขูดเว็บสามารถทำได้ด้วยตนเอง แต่มักใช้เครื่องมือและสคริปต์อัตโนมัติ เครื่องมือเหล่านี้สามารถเขียนได้ในภาษาการเขียนโปรแกรมต่างๆ เช่น Python, Java หรือ JavaScript JavaScript มีประโยชน์อย่างยิ่งสำหรับการขูดเว็บ เนื่องจากช่วยให้นักพัฒนาสามารถโต้ตอบกับ Document Object Model (DOM) ของเว็บไซต์ได้โดยตรง ซึ่งเป็นโครงสร้างคล้ายต้นไม้ที่แสดงถึงองค์ประกอบของเว็บเพจ

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

การตั้งค่าสำหรับการขูดเว็บ

เราจะใช้ทั้งสองเฟรมเวิร์กนี้สำหรับการขูดเว็บด้วย JavaScript:

• Axios: นี่คือไลบรารียอดนิยมสำหรับการสร้างคำขอ HTTP ใน JavaScript สามารถใช้ส่งคำขอไปยังเว็บไซต์และรับโค้ด HTML ซึ่งสามารถแยกวิเคราะห์และคัดลอกได้โดยใช้ไลบรารีเช่น Cheerio
• Cheerio: นี่คือไลบรารีน้ำหนักเบาและรวดเร็วสำหรับการแยกวิเคราะห์และจัดการ HTML และ XML ได้รับการออกแบบมาเพื่อทำงานร่วมกับ DOM ทำให้ง่ายต่อการเลือกและดึงข้อมูลจากหน้าเว็บ

การตั้งค่าสภาพแวดล้อมการพัฒนาสำหรับการขูดเว็บโดยใช้ Axios และ Cheerio บน Node.js เป็นกระบวนการง่ายๆ ที่สามารถแบ่งออกเป็นไม่กี่ขั้นตอน

• ติดตั้ง Node.js: ตามที่กล่าวไว้ก่อนหน้านี้ Node.js เป็นรันไทม์ JavaScript ที่ช่วยให้คุณสามารถเรียกใช้โค้ด JavaScript ภายนอกเว็บเบราว์เซอร์ได้ คุณสามารถดาวน์โหลดตัวติดตั้งได้จากเว็บไซต์อย่างเป็นทางการและเรียกใช้บนคอมพิวเตอร์ของคุณ
• สร้างไดเร็กทอรีโปรเจ็กต์ใหม่และเริ่มต้น npm: เปิดบรรทัดคำสั่งของคุณ นำทางไปยังตำแหน่งที่คุณต้องการสร้างไดเร็กทอรีโปรเจ็กต์ของคุณ และรันคำสั่ง npm init -y เพื่อสร้างโปรเจ็กต์ใหม่และเริ่มต้น npm สิ่งนี้จะสร้างไฟล์ package.json ในไดเร็กทอรีโปรเจ็กต์ของคุณ ซึ่งจะมีข้อมูลเกี่ยวกับโปรเจ็กต์และการขึ้นต่อกันของโปรเจ็กต์
• ติดตั้ง Axios และ Cheerio: รันคำสั่ง npm install axios cheerio เพื่อติดตั้งไลบรารีทั้งสองนี้
• สร้างไฟล์ JavaScript ใหม่: ในไดเร็กทอรีโปรเจ็กต์ของคุณ ให้สร้างไฟล์ใหม่ชื่อ “scraper.js” หรือชื่อใดก็ได้ที่คุณต้องการ นี่คือที่ที่คุณจะเขียนโค้ดการขูดเว็บของคุณ
• นำเข้า Axios และ Cheerio: ที่ด้านบนของไฟล์ “scraper.js” ให้เพิ่มบรรทัดโค้ดต่อไปนี้เพื่อนำเข้า Axios และ Cheerio:

const axios = require('axios');
const cheerio = require('cheerio');

ตอนนี้คุณพร้อมที่จะเริ่มขูดเว็บแล้ว

การขูดเว็บไซต์

หากต้องการใช้ Axios และ Cheerio เพื่อขูดชื่อเว็บไซต์จะต้องทำตามขั้นตอนต่อไปนี้:

• ใช้ Axios เพื่อส่งคำขอ HTTP ไปยังเว็บไซต์ที่คุณต้องการขูด ตัวอย่างเช่น หากต้องการคัดลอกชื่อเรื่อง “https://www.example.com คุณจะต้องใช้โค้ดต่อไปนี้:

axios.get('https://www.example.com')
  .then(response => {
    // The HTML code of the website is stored in the "data" property of the response object
    const html = response.data;
  });

• ใช้ Cheerio เพื่อแยกวิเคราะห์โค้ด HTML และเลือกองค์ประกอบชื่อ ตัวอย่างเช่น:

const $ = cheerio.load(html);
const title = $('title').text();
console.log(title);

โค้ดนี้ใช้เมธอด load ของ Cheerio เพื่อแยกวิเคราะห์โค้ด HTML จากนั้นเลือกองค์ประกอบชื่อโดยใช้ตัวเลือก CSS วิธีการ text ใช้เพื่อดึงเนื้อหาข้อความขององค์ประกอบชื่อ

ดังนั้นโค้ดเต็มจะมีลักษณะดังนี้:

const axios = require('axios');
const cheerio = require('cheerio');

axios.get('https://www.example.com')
  .then(response => {
    const html = response.data;
    const $ = cheerio.load(html);
    const title = $('title').text();
    console.log(title);
  });

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

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

const $ = cheerio.load(html);
const recipeElements = $('.recipe');

const recipes = recipeElements.map((index, element) => {
    return {
        title: $(element).find('.recipe-title').text(),
        ingredients: $(element).find('.ingredients').text(),
        instructions: $(element).find('.instructions').text(),
    };
}).get();

console.log(recipes);

โค้ดนี้ใช้เมธอด load ของ Cheerio เพื่อแยกวิเคราะห์โค้ด HTML จากนั้นเลือกองค์ประกอบสูตรอาหารโดยใช้ตัวเลือก CSS จากนั้นจะใช้ฟังก์ชัน map เพื่อวนซ้ำองค์ประกอบสูตร และสำหรับแต่ละองค์ประกอบจะใช้เมธอด find เพื่อเลือกองค์ประกอบชื่อ ส่วนผสม และคำแนะนำ และใช้เมธอด text เพื่อดึงเนื้อหาข้อความขององค์ประกอบเหล่านี้ ข้อมูลผลลัพธ์จะถูกจัดเก็บไว้ในอาร์เรย์ของออบเจ็กต์สูตร

บทสรุป

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

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

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

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

เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter, LinkedIn, YouTube และ Discord .

สนใจที่จะขยายขนาดการเริ่มต้นซอฟต์แวร์ของคุณหรือไม่ ลองดูที่ วงจร