Веб сцрапинг је техника која омогућава добијање података са одређене веб локације. Веб локације користе ХТМЛ за описивање свог садржаја. Ако је ХТМЛ чист и семантичан, лако га је користити за лоцирање корисних података.
Обично ћете користити веб стругач за добијање и праћење података и праћење будућих промена на њима.
Преглед садржаја
јКуери концепти које вреди знати пре него што употребите Цхеерио
јКуери је један од најпопуларнијих ЈаваСцрипт пакета који постоје. Олакшава рад са моделом објеката документа (ДОМ), руковање догађајима, анимацијом и још много тога. Цхеерио је пакет за веб сцрапинг који се надограђује на јКуери – дели исту синтаксу и АПИ, а истовремено олакшава рашчлањивање ХТМЛ или КСМЛ докумената.
Пре него што научите како да користите Цхеерио, важно је да знате како да изаберете ХТМЛ елементе помоћу јКуери-ја. Срећом, јКуери подржава већину ЦСС3 селектора што олакшава преузимање елемената из ДОМ-а. Погледајте следећи код:
$("#container");
У блоку кода изнад, јКуери бира елементе са ИД-ом „контејнер“. Слична имплементација која користи уобичајени стари ЈаваСцрипт би изгледала отприлике овако:
document.querySelectorAll("#container");
Упоређујући последња два кодна блока, можете видети да је први блок кода много лакши за читање од другог. То је лепота јКуери-ја.
јКуери такође има корисне методе као што су тект(), хтмл() и још много тога које омогућавају манипулисање ХТМЛ елементима. Постоји неколико метода које можете користити за прелазак кроз ДОМ, као што су парент(), сиблингс(), прев() и нект().
Метода евери() у јКуери-ју је веома популарна у многим Цхеерио пројектима. Омогућава вам да прелазите преко објеката и низова. Синтакса за методу евери() изгледа овако:
$(<element>).each(<array or object>, callback)
У блоку кода изнад, повратни позив се покреће за сваку итерацију аргумента низа или објекта.
Учитавање ХТМЛ-а са Цхеерио
Да бисте започели рашчлањивање ХТМЛ или КСМЛ података помоћу Цхеерио-а, можете користити метод цхеерио.лоад(). Погледајте овај пример:
const $ = cheerio.load('<html><body><h1>Hello, world!</h1></body></html>');
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;
Сада креирајте функцију под називом гетХеадер() која враћа неки ХТМЛ који претраживач треба да прикаже.
function getHeader(){
return `
<div style="display:flex; flex-direction:column; align-items:center;">
<h1 style="text-transform:capitalize">Scraper News</h1>
<div style="display:flex; gap:10px; align-items:center;">
<a href="https://www.makeuseof.com/" id="news" onClick='showLoading()'>Home</a>
<a href="https://wilku.top/best" id="best" onClick='showLoading()'>Best</a>
<a href="https://wilku.top/newest" id="newest" onClick='showLoading()'>Newest</a>
<a href="https://wilku.top/ask" id="ask" onClick='showLoading()'>Ask</a>
<a href="https://wilku.top/jobs" id="jobs" onClick='showLoading()'>Jobs</a>
</div>
<p class="loading" style="display:none;">Loading...</p>
</div>
`}
Креирајте другу функцију гетСцрипт() која враћа неки ЈаваСцрипт за покретање претраживача. Обавезно проследите тип променљиве као аргумент када је позовете.
function getScript(type){
return `
<script>
document.title = "${type.substring(1)}" window.addEventListener("DOMContentLoaded", (e) => {
let navLinks = [...document.querySelectorAll("a")];
let current = document.querySelector("#${type.substring(1)}");
document.body.style = "margin:0 auto; max-width:600px;";
navLinks.forEach(x => x.style = "color:black; text-decoration:none;");
current.style.textDecoration = "underline";
current.style.color = "black";
current.style.padding = "3px";
current.style.pointerEvents = "none";
})
function showLoading(e){
document.querySelector(".loading").style.display = "block";
document.querySelector(".loading").style.textAlign = "center";
}
</script>`
}
На крају, креирајте асинхрону функцију која се зове фетцхАндРендерПаге(). Ова функција ради управо оно што ви мислите — скрапа страницу у Хацкер Невс-у, анализира је и форматира је помоћу Цхеерио-а, а затим шаље ХТМЛ назад клијенту на рендеровање.
async function fetchAndRenderPage(type, res) {
const response = await fetch(`${url}${type}`)
html = await response.text();
}
На Хацкер Невс-у су доступне различите врсте постова. Постоји „вести“, које су ствари на насловној страни, постови који траже одговоре од других чланова Хакер вести имају ознаку „питајте“. Објаве у тренду имају ознаку „најбољи“, најновији постови имају ознаку „најновији“, а објаве у вези са слободним радним местима имају ознаку „послови“.
фетцхАндРендерПаге() преузима листу постова са странице Хацкер Невс на основу типа који унесете као аргумент. Ако је операција преузимања успешна, функција везује хтмл променљиву за текст одговора.
Затим додајте следеће линије функцији:
res.set('Content-Type', 'text/html');
res.write(getHeader());const $ = cheerio.load(html);
const articles = [];
let i = 1;
У блоку кода изнад, метода сет() поставља поље ХТТП заглавља. Метода врите() је одговорна за слање дела тела одговора. Функција лоад() узима хтмл као аргумент.
Затим додајте следеће редове да бисте изабрали одговарајућу децу свих елемената са класом „титлелине“.
$('.titleline').children('a').each(function(){
let title = $(this).text();
articles.push(`<h4>${i}. ${title}</h4>`);
i++;
})
У овом блоку кода, свака итерација преузима текстуални садржај циљног ХТМЛ елемента и чува га у променљивој наслова.
Затим гурните одговор из функције гетСцрипт() у низ чланака. Затим креирајте променљиву, финисхедПаге, која ће држати готов ХТМЛ за слање претраживачу. На крају, користите метод врите() да пошаљете финисхедПаге као комад и завршите процес одговора методом енд().
articles.push(getScript(type))
finishedPage = articles.reduce((c, n) => c + n);
res.write(finishedPage);
res.end();
Дефинисање рута за руковање ГЕТ захтевима
Одмах испод функције фетцхАндРендерПаге, користите експресну методу гет() да бисте дефинисали одговарајуће руте за различите типове постова. Затим користите метод слушања да бисте слушали везе са наведеним портом на вашој локалној мрежи.
app.get("https://www.makeuseof.com/", (req, res) => {
fetchAndRenderPage('/news', res);
})app.get("https://wilku.top/best", (req, res) => {
fetchAndRenderPage("https://wilku.top/best", res);
})
app.get("https://wilku.top/newest", (req, res) => {
fetchAndRenderPage("https://wilku.top/newest", res);
})
app.get("https://wilku.top/ask", (req, res) => {
fetchAndRenderPage("https://wilku.top/ask", res);
})
app.get("https://wilku.top/jobs", (req, res) => {
fetchAndRenderPage("https://wilku.top/jobs", res);
})
app.listen(PORT)
У блоку кода изнад, сваки гет метод има функцију повратног позива која позива функцију фетцхАндРендерПаге преносећи одговарајуће типове и рес објекте.
Када отворите терминал и покренете нпм рун старт. Сервер би требало да се покрене, а затим можете да посетите лоцалхост:5500 у свом претраживачу да видите резултате.
Честитамо, управо сте успели да обришете Хацкер Невс и преузмете наслове постова без потребе за спољним АПИ-јем.
Узмите ствари даље уз Веб Сцрапинг
Са подацима које извучете из Хакерских вести, можете да креирате различите визуелизације као што су графикони, графикони и облаци речи да бисте представили увиде и трендове у сварљивијем формату.
Такође можете да изгребете корисничке профиле да бисте анализирали репутацију корисника на платформи на основу фактора као што су примљени гласови, коментари и још много тога.