Pokud webová stránka neposkytuje dobré API, dalším nejlepším řešením je seškrábat její obsah. Cheerio a Express.js vám s tím pomohou.
Web scraping je technika, která umožňuje získat data z konkrétní webové stránky. Webové stránky používají HTML k popisu svého obsahu. Pokud je HTML čistý a sémantický, je snadné jej použít k nalezení užitečných dat.
K získávání a sledování dat a sledování budoucích změn obvykle použijete webový škrabák.
Koncepty jQuery, které stojí za to znát, než použijete Cheerio
jQuery je jedním z nejpopulárnějších balíčků JavaScriptu. Usnadňuje práci s Objektový model dokumentu (DOM), zpracovávat události, animace a další. Cheerio je balíček pro web scraping, který staví na jQuery – sdílí stejnou syntaxi a API a zároveň usnadňuje analýzu HTML nebo XML dokumentů.
Než se naučíte používat Cheerio, je důležité vědět, jak vybrat prvky HTML pomocí jQuery. Naštěstí jQuery podporuje většinu selektorů CSS3, což usnadňuje zachycení prvků z DOM. Podívejte se na následující kód:
$("#container");
Ve výše uvedeném bloku kódu jQuery vybere prvky s id "kontejneru". Podobná implementace pomocí běžného starého JavaScriptu by vypadala asi takto:
document.querySelectorAll("#container");
Při porovnání posledních dvou bloků kódu můžete vidět, že první blok kódu je mnohem snáze čitelný než druhý. To je krása jQuery.
jQuery má také užitečné metody, jako je text(), html()a další, které umožňují manipulovat s prvky HTML. Existuje několik metod, které můžete použít k procházení DOM, např rodič(), sourozenci(), předchozí(), a další().
The každý() metoda v jQuery je velmi populární v mnoha projektech Cheerio. Umožňuje vám iterovat objekty a pole. Syntaxe pro každý() metoda vypadá takto:
$().each(<arrayorobject>, callback)
V bloku kódu výše zpětné volání běží pro každou iteraci pole nebo argumentu objektu.
Načítání HTML pomocí Cheerio
Chcete-li začít analyzovat data HTML nebo XML pomocí Cheerio, můžete použít cheerio.load() metoda. Podívejte se na tento příklad:
const $ = cheerio.load('Hello, world!
');
console.log($('h1').text())
Tento blok kódu používá jQuery text() metoda načte textový obsah h1 živel. Úplná syntaxe pro zatížení() metoda vypadá takto:
load(content, options, mode)
The obsah parametr odkazuje na skutečná data HTML nebo XML, která předáváte zatížení() metoda. možnosti je volitelný objekt, který může modifikovat chování metody. Ve výchozím nastavení je zatížení() metoda zavádí html, hlava, a tělo prvky, pokud chybí. Pokud chcete toto chování zastavit, ujistěte se, že jste nastavili režimu na falešné.
Škrábání Hacker News S Cheerio
Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT.
Je čas spojit vše, co jste se doposud naučili, a vytvořit jednoduchý webový škrabák. Hacker News je oblíbený web pro podnikatele a inovátory. Je to také perfektní webová stránka, na které můžete využít své dovednosti v oblasti škrábání webu, protože se rychle načítá, má velmi jednoduché rozhraní a nezobrazuje žádné reklamy.
Ujistěte se, že máte Node.js a Správce balíčků uzlů běžící na vašem stroji. Vytvořte prázdnou složku a poté a package.json a do souboru přidejte následující JSON:
{
"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"
}
}
Poté otevřete terminál a spusťte:
npm i
Tím by se měly nainstalovat potřebné závislosti, které potřebujete k sestavení škrabky. Tyto balíčky zahrnují Cheerio pro analýzu HTML, ExpressJS pro vytvoření serveru a – jako vývojovou závislost –Nodemon, nástroj, který naslouchá změnám v projektu a automaticky restartuje server.
Nastavení věcí a vytváření nezbytných funkcí
Vytvořit index.js a v tomto souboru vytvořte konstantní proměnnou nazvanou "PORT". Soubor PŘÍSTAV na 5500 (nebo jakékoli číslo, které si vyberete), poté importujte balíčky Cheerio a Express.
const PORT = 5500;
const cheerio = require("cheerio");
const express = require("express");
const app = express();
Dále definujte tři proměnné: url, html, a hotová stránka. Soubor url na adresu URL Hacker News.
const url = 'https://news.ycombinator.com';
let html;
let finishedPage;
Nyní vytvořte funkci s názvem getHeader() který vrací nějaké HTML, které by měl prohlížeč vykreslit.
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>
`}
Vytvoří další funkci getScript() který vrací nějaký JavaScript, aby prohlížeč mohl spustit. Ujistěte se, že jste předali proměnnou typ jako argument, když tomu říkáte.
functiongetScript(type){
return`