Ако веб локација не пружи добар АПИ, ваша следећа најбоља опклада је да уклоните њен садржај. Цхеерио и Екпресс.јс ће вам помоћи да урадите управо то.
Веб сцрапинг је техника која омогућава добијање података са одређене веб локације. Веб локације користе ХТМЛ за описивање свог садржаја. Ако је ХТМЛ чист и семантичан, лако га је користити за лоцирање корисних података.
Обично ћете користити веб стругач за добијање и праћење података и праћење будућих промена на њима.
јКуери концепти које вреди знати пре него што употребите Цхеерио
јКуери је један од најпопуларнијих ЈаваСцрипт пакета који постоје. То олакшава рад са Модел објекта документа (ДОМ), управљати догађајима, анимацијама и још много тога. Цхеерио је пакет за веб сцрапинг који се надограђује на јКуери – дели исту синтаксу и АПИ, док истовремено олакшава рашчлањивање ХТМЛ или КСМЛ докумената.
Пре него што научите како да користите Цхеерио, важно је да знате како да изаберете ХТМЛ елементе помоћу јКуери-ја. Срећом, јКуери подржава већину ЦСС3 селектора што олакшава преузимање елемената из ДОМ-а. Погледајте следећи код:
$("#container");
У блоку кода изнад, јКуери бира елементе са ид од "контејнера". Слична имплементација која користи уобичајени стари ЈаваСцрипт би изгледала отприлике овако:
document.querySelectorAll("#container");
Упоређујући последња два кодна блока, можете видети да је први блок кода много лакши за читање од другог. То је лепота јКуери-ја.
јКуери такође има корисне методе као што су текст(), хтмл(), и више који омогућавају манипулацију ХТМЛ елементима. Постоји неколико метода које можете користити за прелазак преко ДОМ-а, на пример родитељ(), браћа и сестре(), прев(), и следећи().
Тхе сваки() метода у јКуери-ју је веома популарна у многим Цхеерио пројектима. Омогућава вам да прелазите преко објеката и низова. Синтакса за сваки() метода изгледа овако:
$().each(<arrayorobject>, callback)
У блоку кода изнад, позове покреће се за сваку итерацију аргумента низа или објекта.
Учитавање ХТМЛ-а са Цхеерио
Да бисте започели рашчлањивање ХТМЛ или КСМЛ података са Цхеерио, можете користити цхеерио.лоад() методом. Погледајте овај пример:
const $ = cheerio.load('Hello, world!
');
console.log($('h1').text())
Овај блок кода користи јКуери текст() метода преузима текстуални садржај х1 елемент. Потпуна синтакса за лоад() метода изгледа овако:
load(content, options, mode)
Тхе садржаја параметар се односи на стварне ХТМЛ или КСМЛ податке које прослеђујете лоад() методом. Опције је опциони објекат који може да модификује понашање методе. Подразумевано, тхе лоад() метода уводи хтмл, глава, и тело елементе ако недостају. Ако желите да зауставите ово понашање, уверите се да сте подесили режим на лажно.
Сцрапинг Хацкер Невс витх Цхеерио
Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.
Време је да комбинујете све што сте до сада научили и направите једноставан веб стругач. Хацкер Невс је популарна веб локација за предузетнике и иноваторе. То је такође савршена веб локација на којој можете искористити своје вештине веб-стругања јер се брзо учитава, има веома једноставан интерфејс и не приказује никакве огласе.
Уверите се да имате Ноде.јс анд тхе Ноде Пацкаге Манагер ради на вашој машини. Направите празан фолдер, а затим а пацкаге.јсон датотеку и додајте следећи ЈСОН унутар датотеке:
{
"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"
}
}
Након што то урадите, отворите терминал и покрените:
npm i
Ово би требало да инсталира неопходне зависности које су вам потребне да бисте направили стругач. Ови пакети укључују Цхеерио за рашчлањивање ХТМЛ-а, ЕкпрессЈС за креирање сервера и—као развојну зависност—Нодемон, услужни програм који слуша промене у пројекту и аутоматски поново покреће сервер.
Постављање ствари и креирање неопходних функција
Направите ан индек.јс датотеку и у тој датотеци креирајте константну променљиву под називом „ПОРТ“. Комплет ЛУКА на 5500 (или било који број који одаберете), а затим увезите Цхеерио и Екпресс пакете респективно.
const PORT = 5500;
const cheerio = require("cheerio");
const express = require("express");
const app = express();
Затим дефинишите три варијабле: урл, хтмл, и финисхедПаге. Комплет урл на УРЛ Хацкер Невс.
const url = 'https://news.ycombinator.com';
let html;
let finishedPage;
Сада креирајте функцију под називом гетХеадер() који враћа неки ХТМЛ који претраживач треба да прикаже.
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>
`}
Креирајте другу функцију гетСцрипт() који враћа неки ЈаваСцрипт за покретање претраживача. Обавезно проследите променљиву тип као аргумент кога називате.
functiongetScript(type){
return`