Pengikisan web adalah teknik yang memungkinkan untuk memperoleh data dari situs web tertentu. Situs web menggunakan HTML untuk mendeskripsikan kontennya. Jika HTML bersih dan semantik, mudah digunakan untuk menemukan data yang berguna.

Anda biasanya akan menggunakan pengikis web untuk mendapatkan dan memantau data serta melacak perubahan di masa mendatang.

Konsep jQuery Perlu Diketahui Sebelum Anda Menggunakan Cheerio

jQuery adalah salah satu paket JavaScript paling populer yang ada. Itu membuatnya lebih mudah untuk bekerja dengan Model Objek Dokumen (DOM), menangani acara, animasi, dan lainnya. Cheerio adalah paket untuk pengikisan web yang dibuat di atas jQuery—berbagi sintaks dan API yang sama, sekaligus memudahkan penguraian dokumen HTML atau XML.

Sebelum Anda mempelajari cara menggunakan Cheerio, penting untuk mengetahui cara memilih elemen HTML dengan jQuery. Untungnya, jQuery mendukung sebagian besar pemilih CSS3 yang membuatnya lebih mudah untuk mengambil elemen dari DOM. Lihatlah kode berikut:

$("#container");

Di blok kode di atas, jQuery memilih elemen dengan pengenal dari "wadah". Implementasi serupa menggunakan JavaScript lama biasa akan terlihat seperti ini:

document.querySelectorAll("#container");

Membandingkan dua blok kode terakhir, Anda dapat melihat blok kode sebelumnya jauh lebih mudah dibaca daripada yang terakhir. Itulah keindahan jQuery.

jQuery juga memiliki metode yang bermanfaat seperti teks(), html(), dan banyak lagi yang memungkinkan untuk memanipulasi elemen HTML. Ada beberapa metode yang bisa Anda gunakan untuk melintasi DOM, seperti induk(), saudara(), sebelumnya(), Dan Berikutnya().

Itu setiap() metode di jQuery sangat populer di banyak proyek Cheerio. Ini memungkinkan Anda untuk beralih ke objek dan array. Sintaks untuk setiap() metode terlihat seperti ini:

$().each(<arrayorobject>, callback)

Pada blok kode di atas, panggilan balik berjalan untuk setiap iterasi argumen array atau objek.

Memuat HTML Dengan Cheerio

Untuk mulai mem-parsing data HTML atau XML dengan Cheerio, Anda dapat menggunakan cheerio.beban() metode. Lihatlah contoh ini:

const $ = cheerio.load('
Hello, world!
');
console.log($('h1').text())

Blok kode ini menggunakan jQuery teks() metode mengambil konten teks dari h1 elemen. Sintaks lengkap untuk memuat() metode terlihat seperti ini:

load(content, options, mode)

Itu isi parameter mengacu pada data HTML atau XML aktual yang Anda berikan memuat() metode. pilihan adalah objek opsional yang dapat mengubah perilaku metode. Secara default, memuat() metode memperkenalkan html, kepala, Dan tubuh elemen jika mereka hilang. Jika Anda ingin menghentikan perilaku ini, pastikan Anda mengaturnya mode untuk palsu.

Scraping Hacker News Dengan Cheerio

Saatnya menggabungkan semua yang telah Anda pelajari sejauh ini dan membuat pengikis web sederhana. Hacker News adalah situs web populer untuk pengusaha dan inovator. Ini juga merupakan situs web yang sempurna untuk memanfaatkan keterampilan pengikisan web Anda karena memuat dengan cepat, memiliki antarmuka yang sangat sederhana, dan tidak menayangkan iklan apa pun.

Pastikan Anda memiliki Node.js dan Manajer Paket Node berjalan di mesin Anda. Buat folder kosong, lalu a package.json file, dan tambahkan JSON berikut di dalam file:

{
"name": "web-scraper",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
 },
"author": "",
"license": "MIT",
"dependencies": {
"cheerio": "^1.0.0-rc.12",
"express": "^4.18.2"
 },
"devDependencies": {
"nodemon": "^3.0.1"
 }
}

Setelah melakukan itu, buka terminal dan jalankan:

npm i

Ini harus menginstal dependensi yang diperlukan yang Anda perlukan untuk membuat scraper. Paket-paket ini termasuk Cheerio untuk mem-parsing HTML, ExpressJS untuk membuat server, dan—sebagai ketergantungan pengembangan—Nodemon, utilitas yang mendengarkan perubahan dalam proyek dan secara otomatis me-restart server.

Mengatur Berbagai Hal dan Membuat Fungsi yang Diperlukan

Buat sebuah index.js file, dan di file itu, buat variabel konstanta yang disebut "PORT". Mengatur PELABUHAN ke 5500 (atau nomor apa pun yang Anda pilih), lalu impor paket Cheerio dan Express masing-masing.

const PORT = 5500;
const cheerio = require("cheerio");
const express = require("express");
const app = express();

Selanjutnya, tentukan tiga variabel: url, html, Dan halaman selesai. Mengatur url ke URL Berita Peretas.

const url = 'https://news.ycombinator.com';
let html;
let finishedPage;

Sekarang buat fungsi yang disebut getHeader() yang mengembalikan beberapa HTML yang harus dirender oleh browser.

functiongetHeader(){
return`
"display: flex; flex-direction: column; align-items: center;">
"text-transform: capitalize">Scraper News</h1>
"display: flex; gap: 10px; align-items: center;">
"/" id="news" onClick='showLoading()'>Home</a>
"/best" id="best" onClick='showLoading()'>Best</a>
"/newest" id="newest" onClick='showLoading()'>Newest</a>
"/ask" id="ask" onClick='showLoading()'>Ask</a>
"/jobs" id="jobs" onClick='showLoading()'>Jobs</a>
 </div>
class="loading" style="display: none;">Loading...</p>
 </div>
`}

Buat fungsi lain getScript() yang mengembalikan beberapa JavaScript untuk dijalankan oleh browser. Pastikan Anda meneruskan variabel jenis sebagai argumen ketika Anda menyebutnya.

functiongetScript(type){
return`