Ha egy webhely nem biztosít jó API-t, a következő legjobb megoldás az, ha kikaparja a tartalmát. A Cheerio és az Express.js ebben segítenek.

A webkaparás egy olyan technika, amely lehetővé teszi adatok beszerzését egy adott webhelyről. A webhelyek HTML-kódot használnak a tartalom leírására. Ha a HTML tiszta és szemantikus, akkor könnyen használható a hasznos adatok megkeresésére.

Általában webkaparót használ az adatok lekérésére és figyelésére, valamint az adatok jövőbeni változásainak nyomon követésére.

A jQuery fogalmai, amelyeket érdemes tudni a Cheerio használata előtt

A jQuery az egyik legnépszerűbb JavaScript-csomag. Ez megkönnyíti a munkát a Dokumentumobjektum-modell (DOM), kezelheti az eseményeket, animációkat és egyebeket. A Cheerio a jQueryre épülő webkaparási csomag – ugyanazt a szintaxist és API-t osztja meg, miközben megkönnyíti a HTML- vagy XML-dokumentumok elemzését.

Mielőtt megtanulná a Cheerio használatát, fontos tudnia, hogyan válassza ki a HTML elemeket a jQuery segítségével. Szerencsére a jQuery támogatja a legtöbb CSS3 választót, ami megkönnyíti az elemek megragadását a DOM-ból. Vessen egy pillantást a következő kódra:

instagram viewer 

$("#container");

A fenti kódblokkban a jQuery kiválasztja az elemeket a id a „tartályból”. Egy hasonló, hagyományos, régi JavaScriptet használó megvalósítás valahogy így nézne ki:

document.querySelectorAll("#container");

Az utolsó két kódblokkot összehasonlítva látható, hogy az előbbi kódblokk sokkal könnyebben olvasható, mint az utóbbi. Ez a jQuery szépsége.

A jQuery hasznos módszerekkel is rendelkezik, mint pl szöveg(), html(), és még sok más, amely lehetővé teszi a HTML-elemek kezelését. Számos módszer használható a DOM bejárására, pl szülő(), testvérek (), előző(), és következő().

A minden egyes() A jQuery módszere nagyon népszerű számos Cheerio projektben. Lehetővé teszi az objektumok és tömbök közötti iterációt. A szintaxis a minden egyes() a módszer így néz ki:

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

A fenti kódblokkban visszahív lefut a tömb vagy objektum argumentum minden iterációjára.

HTML betöltése Cheerio segítségével

A HTML vagy XML adatok Cheerio segítségével történő elemzésének megkezdéséhez használja a cheerio.load() módszer. Vessen egy pillantást erre a példára:

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

Ez a kódblokk a jQuery-t használja szöveg() metódus lekéri a szöveges tartalmát h1 elem. A teljes szintaxis a Betöltés() a módszer így néz ki:

load(content, options, mode)

A tartalom paraméter az átadott tényleges HTML vagy XML adatokra vonatkozik Betöltés() módszer. lehetőségek egy opcionális objektum, amely módosíthatja a metódus viselkedését. Alapértelmezés szerint a Betöltés() módszer bemutatja html, fej, és test elemeket, ha hiányoznak. Ha meg szeretné állítani ezt a viselkedést, győződjön meg arról, hogy beállította mód hogy hamis.

Hackerhírek kaparása Cheerioval

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható.

Ideje kombinálni mindazt, amit eddig tanult, és létrehozni egy egyszerű webkaparót. A Hacker News egy népszerű webhely a vállalkozók és az újítók számára. Tökéletes webhely a webkaparási készségeinek hasznosítására is, mert gyorsan betöltődik, nagyon egyszerű felülettel rendelkezik, és nem jelenít meg hirdetéseket.

Győződjön meg arról, hogy rendelkezik Node.js-val és a Node Package Manager fut a gépeden. Hozzon létre egy üres mappát, majd a package.json fájlt, és adja hozzá a következő JSON-t a fájlon belül:

{
"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"
 }
}

Ezt követően nyissa meg a terminált, és futtassa:

npm i

Ennek telepítenie kell a kaparó felépítéséhez szükséges függőségeket. Ezek a csomagok magukban foglalják a Cheerio-t a HTML elemzéséhez, az ExpressJS-t a kiszolgáló létrehozásához, és – fejlesztési függőségként –Nodemon, egy segédprogram, amely figyeli a változásokat a projektben, és automatikusan újraindítja a szervert.

A dolgok beállítása és a szükséges funkciók létrehozása

Hozzon létre egy index.js fájlt, és ebben a fájlban hozzon létre egy "PORT" nevű állandó változót. Készlet KIKÖTŐ 5500-ra (vagy bármilyen választott számra), majd importálja a Cheerio és Express csomagokat.

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

Ezután határozzon meg három változót: url, html, és elkészült Oldal. Készlet url a Hacker News URL-jére.

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

Most hozzon létre egy függvényt getHeader() amely visszaad egy HTML-kódot, amelyet a böngészőnek meg kell jelenítenie.

functiongetHeader(){
return`

Hozzon létre egy másik funkciót getScript() amely visszaad némi JavaScriptet a böngésző futtatásához. Ügyeljen arra, hogy átadja a változót típus érvként, amikor úgy hívod.

functiongetScript(type){
return`