Pengikisan web dalam JavaScript : Panduan lengkap

Untuk membuat scraping web dalam JavaScript, kamu perlu Node.js dan perpustakaan yang sesuai dengan targetmu. Gunakan Cheerio untuk halaman statis dan Puppeteer Di mana Playwright segera setelah konten ditampilkan di sisi klien.

Panduan ini akan menunjukkan kepadamu cara menginstal, menulis kode, dan menjalankan scraper pertamamu, langkah demi langkah.

Prasyarat untuk melakukan web scraping di JavaScript

Sebelum menulis skrip JS pertamamu, dua alat dasar saja sudah cukup untuk memulai.

• Node.js : lingkungan eksekusi JavaScript open-source dan multiplatform. Alat ini memungkinkanmu menjalankan kode JS di luar browser, langsung dari konsolmu. Unduh alat ini dari dokumentasi resmi Node.js.
• npm (Node Package Manager) : pengelola paket bawaan pada Node. Ini berguna untuk menginstal pustaka-pustakamu hanya dengan satu perintah npm install.

Sekali Node.js Setelah siap, pilih pustaka sesuai dengan jenis halaman web yang akan di-scrape. Berikut ini adalah pustaka yang paling sering digunakan.

• Cheerio : sangat cocok untuk pengambilan data dari halaman statis. Ia menganalisis HTML mentah dengan sintaks yang mirip dengan jQuery. Ini adalah ringan, cepat dan sederhana, tetapi tidak menjalankan kode JavaScript pada halaman tersebut. Lihat dokumentasi Cheerio.
• Puppeteer dan Playwright : sangat cocok untuk situs dinamis. Mereka mengendalikan browser headless yang sesungguhnya (Chrome Di mana Firefox) dan memuat halaman seperti pengguna sungguhan. Lihat dokumentasi Puppeteer.

Aturannya sederhana: Cheerio untuk halaman statis, Puppeteer Di mana Playwright segera setelah sebuah situs memuat datanya menggunakan JavaScript.

Bagaimana cara melakukan web scraping di JavaScript?

Prinsipnya sederhana: kamu mengambil HTML dari sebuah halaman web, kamu memilih elemen-elemen yang menarik minatmu, lalu mengekstrak datanya. Pemilihan alat didasarkan pada satu kriteria saja: apakah halaman tersebut statis Di mana dinamika ?

Langkah 1: Instalasi dan konfigurasi

Mulailah dengan mengunduh Node.js dari situs resminya, lalu instal. Setelah itu, periksa hasil instalasi di terminalmu:

node -v
npm -v

Jika kedua versi tersebut muncul, berarti semuanya sudah benar. Sekarang, buatlah proyekmu:

mkdir my-scraping
cd my-scraping
npm init -y

Perintah ini menghasilkan sebuah berkas package.json yang akan menampilkan daftar dependensi kamu. Sekarang tinggal menginstal pustaka-pustaka yang sesuai dengan kebutuhanmu.

Untuk halaman statis (konten yang sudah ada dalam kode HTML yang dikirimkan oleh server), gunakan axios dan Cheerio :

npm install axios cheerio

Untuk halaman dinamis (data yang dimuat melalui JavaScript di sisi klien, seperti React, Vue Di mana Angular), lebih baik pasang Puppeteer :

npm install dalang

Langkah 2: Membuat skrip scraping

Sebelum menulis kode skrip JS-mu, tentukan yang tepat Pemilih CSS. Buka halaman web tujuan di Chrome Di mana Firefox, klik kanan pada elemen yang diinginkan, lalu pilih «Periksa». DOM akan ditampilkan: dengan demikian, kamu dapat mengidentifikasi tag dan kelasnya (.class) atau ID (#id) yang menjadi sasaran.

Mengambil data dari halaman statis dengan Cheerio

Cheerio hanya membaca HTML biasa dan tidak menjalankan skrip JS apa pun. Di situs yang dirender di sisi klien, ia hanya akan melihat halaman kosong.

// Mengimpor pustaka
const axios = require('axios');
const cheerio = require('cheerio');

// URL halaman yang akan dihapus
const url = "https://exemple.com";

// Fungsi utama
fungsi async scrapePage() {
  try {
    // Mengunduh konten HTML
    const { data } = await axios.get(url);

    // Memuat HTML dengan Cheerio
    const $ = cheerio.load(data);

    // Contoh: mengambil semua judul h1
    const judul = [];
    $("h1").each((i, elem) => {
      titles.push($(elem).text().trim());
    });

    // Menampilkan hasil
    console.log("Judul ditemukan:", judul);

  } catch (error) {
    console.error("Kesalahan saat melakukan scraping:", error);
  }
}

// Menjalankan skrip
scrapePage();

Gantikan https://exemple.com dengan URL pilihanmu, lalu sesuaikan selektornya $ ("h1") untuk memilih hal-hal yang kamu minati: $ ("p") untuk paragraf-paragraf, .class Di mana #id untuk elemen tertentu. Metode .text() mengembalikan textContent dari elemen tersebut, yang setara dengan jQuery di sisi server.

Mengambil data dari halaman dinamis dengan Puppeteer

Puppeteer pembalap sejati browser tanpa kepala dan menunggu hingga JavaScript selesai memuat konten, di mana Cheerio gagal.

// Impor Dalang
const dalang = require("dalang");

// URL halaman yang akan dihapus
const url = "https://exemple.com";

async function scrapePage() {
  // Meluncurkan peramban tanpa antarmuka grafis (tanpa kepala)
  const browser = await dalang.launch({ headless: true });
  const page = await browser.newPage();

  mencoba {
    // Pergi ke halaman
    await page.goto(url, { waitUntil: "networkidle2" });

    // Contoh: mengekstrak teks dari semua judul h1
    const titles = await page.$$eval("h1", elements =>
      elements.map(el => el.textContent.trim())
    );

    console.log("Judul ditemukan:", titles);

  } catch (error) {
    console.error("Kesalahan saat melakukan scraping:", error);
  } akhirnya {
    // Menutup peramban
    menunggu browser.close();
  }
}

// Menjalankan skrip
scrapePage();

Opsi waitUntil: "networkidle2" menunggu berakhirnya permintaan jaringan sebelum mengekstrak data dari halaman web tersebut.

Tahap 3: Mengelola data yang diekstrak

Setelah data berhasil diambil, kamu bisa menyimpannya di JSON untuk sebuah basis data, atau dalam CSV untuk membukanya di Excel. Modul fs berasal dari Node.js dan tidak memerlukan penginstalan apa pun. Untuk CSV, cukup tambahkan pustaka json2csv :

npm install json2csv

const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
const { Parser } = require("json2csv");

const url = "https://exemple.com";

async function scrapeAndSave() {
  try {
    // Récupérer le HTML de la page
    const { data } = await axios.get(url);
    const $ = cheerio.load(data);

    // Extraire les titres dans un tableau d'objets
    const resultats = [];
    $("h1").each((i, elem) => {
      resultats.push({ titre: $(elem).text().trim() });
    });

    // Sauvegarde en JSON
    fs.writeFileSync("resultats.json", JSON.stringify(resultats, null, 2), "utf-8");
    console.log("Données sauvegardées dans resultats.json");

    // Sauvegarde en CSV
    const parser = new Parser();
    const csv = parser.parse(resultats);
    fs.writeFileSync("resultats.csv", csv, "utf-8");
    console.log("Données sauvegardées dans resultats.csv");

  } catch (error) {
    console.error("Erreur lors du scraping :", error);
  }
}

scrapeAndSave();

Skrip JS ini melakukan semuanya sekaligus: mengambil halaman web, mengekstrak data HTML, lalu menulis dua berkas. Blok try / catch mengelola kesalahan untuk mencegah terjadinya timeout atau CAPTCHA sehingga tidak membuat seluruh skrip scraping macet.

Praktik terbaik untuk web scraping di JavaScript

Sebelum menjalankan skripmu, ada beberapa kebiasaan sederhana yang dapat menjaga proses scraping JS-mu efektif, stabil dan mematuhi ketentuan penggunaan situs-situs yang dimaksud. Penting juga untuk memastikan bahwa kamu langkah tersebut sah secara hukum tergantung konteksnya.

• Hormati file robots.txt : itulah aturan emasnya. Sebelum melakukan scraping pada sebuah halaman web, buka https://exemple.com/robots.txt. Jika jalur yang dimaksud berada di Larang, jangan meng-scrape-nya. Dengan begitu, kamu bisa menghindari masalah etika dan hukum.
• Berikan jeda antar permintaanmu : Jangan membanjiri situs tersebut. Berikan jeda di antara setiap permintaan agar tetap tidak mencolok dan terhindar dari pemblokiran.
• Sesuaikan User-Agent-mu : secara default, scraper JS mudah terdeteksi. Dengan Puppeteer, tentukan header yang realistis melalui page.setUserAgent() untuk meniru browser yang sesungguhnya.
• Mengatasi Kesalahan dan Gangguan : masukkan panggilan-panggilanmu ke dalam satu blok try / catch agar timeout atau CAPTCHA tidak menyebabkan seluruh skrip macet.

Alternatif apa yang harus dipertimbangkan?

Web scraping tidak hanya terbatas pada JavaScript. Tergantung pada proyekmu, bahasa pemrograman atau alat lain mungkin lebih sesuai dengan kebutuhanmu.

• Python : perpustakaan Scrapy dan BeautifulSoup sangat ampuh untuk mengekstrak konten dari banyak halaman web.
• PHP : berguna jika kamu ingin mengintegrasikan scraping langsung ke dalam situs yang sudah dikodekan menggunakan bahasa pemrograman tersebut.
• Alat tanpa kode seperti Bright Data, Octoparse, dan Apify: aplikasi-aplikasi ini memungkinkanmu mengumpulkan data dari web tanpa perlu menulis satu baris kode pun.

API scraping atau solusi DIY: mana yang sebaiknya dipilih?

Pertanyaan sebenarnya bukanlah soal bahasa pemrograman, melainkan tingkat kompleksitas yang siap kamu tangani sendiri. Skrip scraping buatanmu sendiri dengan Puppeteer Di mana Cheerio tetap menjadi pilihan terbaik ketika volume rendah dan lokasi tersebut kurang terlindungi.

A Mengikis API (seperti yang ditawarkan oleh Bright Data) menjadi semakin relevan saat kamu menghadapi pemblokiran tingkat lanjut: rotasi alamat IP, pemecahan CAPTCHA otomatis, serta rendering JavaScript dalam skala besar.

Singkatnya: Lakukan Sendiri membantu kamu menghemat uang dan mengajarkan banyak hal. L’API membantu Anda menghemat waktu dalam menangani proyek-proyek besar atau yang berulang.

FAQ

Apa alat scraping web JavaScript terbaik?

Itu semua tergantung pada jenis halaman web yang ingin kamu ambil datanya.

• Cheerio : cepat dan ringan, cocok untuk menganalisis HTML halaman statis.
• Puppeteer : sangat cocok untuk mengoperasikan browser yang sesungguhnya Chrome dan mengelola konten yang ditampilkan menggunakan JavaScript.
• Playwright : dekat dengan Puppeteer, tetapi dengan dukungan multi-browser (Chrome, Firefox, WebKit) serta fitur-fitur lanjutan lainnya.

Apa bahasa pemrograman terbaik untuk melakukan scraping?

Tidak ada bahasa universal yang paling baik. Pilihannya bergantung pada proyekmu dan lingkungannya.

• Python : sangat populer untuk proyek-proyek cepat dan volume data web yang besar.
• JavaScript : langkah yang tepat jika kamu sudah bekerja di ekosistem web dengan Node.js.
• PHP : praktis untuk mengintegrasikan scraping secara langsung ke dalam situs yang sudah ada.

itu scraping web dalam JavaScript tetap menjadi pilihan yang sangat baik untuk mengumpulkan data web, bahwa kamu melewati Cheerio, Puppeteer Di mana Playwright.

Untuk mempelajari lebih lanjut tanpa perlu menulis kode, silakan lihat panduan kami tentang Data Cerah, Octoparse dan Apify.