วิธีการทำ Web Scraping โดยใช้ Javascript: คู่มือฉบับสมบูรณ์

อยากเรียนรู้วิธีการทำเว็บสเครปโดยใช้ Javascript แต่ไม่รู้จะเริ่มต้นอย่างไรใช่ไหม? ไม่ต้องกังวล

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

มาเริ่มกันเลย

การขูดข้อมูล Javascript คืออะไร

ในยุคดิจิทัลปัจจุบัน JavaScript สำหรับการขูดข้อมูลเว็บได้กลายมาเป็นทักษะที่จำเป็น ไม่เพียงแต่สำหรับนักพัฒนาและผู้ที่ชื่นชอบข้อมูลเท่านั้น แต่ยังสำหรับนักการตลาดที่ต้องเรียนรู้ด้วย

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

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

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

ตอนนี้ เราเข้าใจแล้วว่า Javascript web scraping คืออะไร มาดูกันว่าคุณสามารถใช้ Javascript เพื่อ scrape เว็บไซต์ได้อย่างไร

3 วิธีทั่วไปในการดึงข้อมูลเว็บไซต์โดยใช้ Javascript

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

Cheerio สำหรับเว็บไซต์แบบคงที่เรียบง่าย

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

Cheerio ช่วยให้คุณสามารถเรียกดูและจัดการ DOM ได้อย่างง่ายดายด้วยการดึงข้อมูล HTML ดิบของเพจผ่านไคลเอนต์ HTTP

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

Puppeteer สำหรับการขูดเนื้อหาแบบไดนามิก

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

Puppeteer ใช้เบราว์เซอร์แบบไม่มีส่วนหัว เว็บเบราว์เซอร์ที่ไม่มีอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI) เพื่อโต้ตอบกับหน้าเว็บ ซึ่งหมายความว่า สามารถจำลองการกระทำของผู้ใช้ เช่น การคลิกปุ่มหรือการเลื่อน ซึ่งจำเป็นสำหรับการเข้าถึงเนื้อหาที่ปรากฏเป็นผลจากการโต้ตอบเหล่านี้

Puppeteer มีประสิทธิภาพสำหรับการรวบรวมข้อมูลแอปพลิเคชันเว็บสมัยใหม่ที่อาศัย AJAX และต้องการสภาพแวดล้อมเบราว์เซอร์เต็มรูปแบบเพื่อรันโค้ด JavaScript และแสดงเนื้อหา

การขูดข้อมูลเว็บไซต์โดยใช้ jQuery

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

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

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

อย่างไรก็ตาม ในคู่มือนี้ เราจะทำการดึงข้อมูลเว็บใน Javascript โดยใช้ Puppeteer เราจะพาคุณไปดูขั้นตอนโดยละเอียดเกี่ยวกับวิธีการทำ Web Scraping โดยใช้ Javascript ด้วย Puppeteer

วิธีการทำ Web Scraping โดยใช้ Javascript Puppeteer

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

มาแบ่งกระบวนการออกเป็น 3 ขั้นตอนง่ายๆ เพื่อแสดงวิธีการดึงรูปภาพ "สุนัขมีความสุข" จากการค้นหาใน Google มาเริ่มกันเลย!

ขั้นตอนที่ 1: สร้างไดเร็กทอรีใหม่และติดตั้ง Puppeteer

ก่อนอื่นเลย มาตั้งค่าสภาพแวดล้อมของโครงการกันก่อน ขั้นแรก ให้สร้างไดเร็กทอรีของโครงการใหม่และตั้งค่าเริ่มต้น

จากนั้นติดตั้ง Puppeteer ซึ่งเราจะใช้สำหรับการขูดข้อมูล เปิดคอนโซลของคุณและดำเนินการคำสั่งต่อไปนี้:

• สำหรับการสร้างไดเร็กทอรีใหม่: mkdir web-scraping-puppeteer

• สำหรับการย้ายไปยังไดเร็กทอรี: cd web-scraping-puppeteer

• การเริ่มต้นโครงการ Node.js ใหม่: npm init-y

• การติดตั้ง Puppeteer:npm ติดตั้ง puppeteer
  
  
  

ขั้นตอนที่ 2: การเขียนโค้ดเริ่มต้น

ตอนนี้ มาเขียนโค้ดเริ่มต้นเพื่อเปิดเบราว์เซอร์ ไปที่ Google Images และค้นหา "happy dog" กัน เราจะใช้ Puppeteer เพื่อเปิดหน้าต่างเบราว์เซอร์ใหม่ ตั้งค่าช่องมองภาพ และโต้ตอบกับองค์ประกอบของหน้า

นี่คือโค้ดสำหรับขั้นตอนนี้:

คำอธิบายของโค้ด:

• const puppeteer=require('puppeteer');

  • จำได้ไหมว่าในขั้นตอนแรกที่เราติดตั้ง Puppeteer ในระบบของเรา?บรรทัดนี้จะนำเข้าไลบรารี Puppeteer เข้าไปในสคริปต์ จากนั้นเราจะสามารถใช้ฟังก์ชันต่างๆ เพื่อควบคุมเบราว์เซอร์แบบไม่มีส่วนหัวได้

• (async () => { ... })();

  • บรรทัดนี้จะประกาศฟังก์ชันอะซิงโครนัส ฟังก์ชันนี้จะจัดการงานการรวบรวมข้อมูลเว็บ ฟังก์ชันอะซิงโครนัสช่วยให้เรารอให้การดำเนินการบางอย่างเสร็จสมบูรณ์ (เช่น การโหลดหน้าเว็บ) ก่อนที่จะไปยังขั้นตอนถัดไป ซึ่งเป็นสิ่งสำคัญอย่างยิ่งในการรวบรวมข้อมูลเว็บ

• const browser=awaiitpuppeteer.launch();

  • บรรทัดนี้บอกให้ Puppeteer เริ่มเซสชันเบราว์เซอร์ใหม่ คีย์เวิร์ด await จะถูกใช้เพื่อให้แน่ใจว่าเบราว์เซอร์เปิดใช้งานอย่างสมบูรณ์ก่อนที่สคริปต์จะดำเนินการต่อ

• const page = await browser.newPage();

  • หลังจากเปิดเบราว์เซอร์ คำสั่งนี้จะเปิดหน้าใหม่ (หรือแท็บ) ในเบราว์เซอร์

• await page.goto('https://www.google.com/imghp?hl=en');

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

• รอpage.setViewport({ width: 1080, height: 1024 });

  • ส่วนนี้จะกำหนดขนาดของช่องมองภาพ (ส่วนที่สามารถมองเห็นได้ของหน้า) ซึ่งสำคัญสำหรับภาพหน้าจอหรือหน้าที่เปลี่ยนเค้าโครงตามขนาดหน้าจอ

• รอคอย page.type('textarea[name="q"]', 'happy dog');

  • คำสั่งนี้จำลองการพิมพ์ข้อความ 'สุนัขมีความสุข' ลงในช่องป้อนข้อมูลบนหน้าเว็บ โดยเฉพาะข้อความที่มีแอตทริบิวต์ชื่อ 'q' (ซึ่งใน Google Images คือช่องค้นหา)

• รอpage.click('button[type="submit"]');

  • บรรทัดนี้จำลองการคลิกปุ่มส่งของแบบฟอร์ม ซึ่งจะเป็นการเริ่มการค้นหา

• รอ page.waitForNavigation();

  • หลังจากคลิกปุ่มส่ง คำสั่งนี้จะรอให้การนำทางหน้าเว็บเสร็จสมบูรณ์ (กล่าวคือ รอให้ผลการค้นหาโหลด)

• รอ browser.close();

  • เมื่อขั้นตอนก่อนหน้าทั้งหมดเสร็จสมบูรณ์แล้ว คำสั่งนี้จะปิดเบราว์เซอร์
    
    

ขั้นตอนที่ 3: ดึงรูปภาพ "สุนัขมีความสุข" จาก Google Images

ตอนนี้เป้าหมายของเราคือการเลือกรูปภาพที่เราต้องการขูดและระบุคลาส ID และ URL ต้นทางภายใน div ของมัน

ในการที่จะทำสิ่งนั้น คุณต้องเปิดเบราว์เซอร์ ค้นหา "happy dog" แล้วคลิกที่รูปภาพที่คุณต้องการสแกน หลังจากขยายรูปภาพแล้ว ให้คลิกขวาที่รูปภาพ แล้วเลือกตัวเลือก "Inspect"

ตัวเลือกตรวจสอบจะแสดง div container ของรูปภาพ ซึ่งจะมีคลาส ID และ URL ต้นทางที่คุณต้องการคัดลอกเพื่อรวมไว้ในโค้ดของเรา

นี่คือลักษณะของโค้ดแบบเต็ม:

ในโค้ดนี้:

• เราขอรับรองก่อนว่า Puppeteer จะนำทางไปยัง Google Images และค้นหา "สุนัขมีความสุข"

• เมื่อโหลดผลลัพธ์เสร็จแล้ว เราจะเลือกรูปภาพทั้งหมดที่ตรงกับคลาส '.sFlh5c.pT0Scc.iPVvYb'

• จากนั้นเราคลิกที่รูปภาพที่ต้องการในรายการเพื่อเริ่มดูตัวอย่าง

• เรากำลังรอโหลดคอนเทนเนอร์ตัวอย่าง(#islsp) และรูปภาพขนาดใหญ่ภายใน

• สุดท้าย เราจะแยกแอตทริบิวต์ src ของรูปภาพขนาดใหญ่ ซึ่งมี URL อยู่ด้วย
  
  

ในกรณีที่คุณสงสัย เราใช้คำสั่ง "if" และ "else" ในโค้ดนี้เพื่อให้แน่ใจว่าโค้ดจะส่งคืน "No images found" ในคลาสที่ระบุ ในกรณีที่คลาสผิด มิฉะนั้น บางครั้งโค้ดอาจเสียหาย

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

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

แต่ปัญหานี้ก็มีวิธีแก้ไขเช่นกัน ไปที่ส่วนถัดไปเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการขูดเว็บไซต์โดยไม่ตรวจพบหรือถูกบล็อก.

ใช้ AdsPower สำหรับการท่องเว็บที่ไม่ตรวจพบ

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

สมัครวันนี้เพื่อความปลอดภัยของวันพรุ่งนี้

สรุป!

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

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