В этой статье мы сделаем парсер сайтов Node.js, или просто на JavaScript, думаю вам будет интересно.
Но стоит предупредить, что по сути это будет перевод другой статьи, ссылка на оригинал в ссылке внизу.
Ещё мы уже делали парсеры страниц но на других языках программирования, вот они:
Подготовка проекта:
У вас должен быть установлен Node.JS, если не знаете как это сделать, то почитайте эти статьи:
Теперь нужно подготовить проект, для этого создайте папку где будет храниться его, вписываем эту команду:
1 | npm init -y |
То есть таким образом мы инициализировали проект, теперь скачаем все нужные библиотеки, через команду npm
.
1 | npm install --save request request-promise cheerio |
На этом подготовка закончена
Пишем парсер на javascript:
Сначала мы будем начинать с более простого примера, и постепенно всё сложнее и солжне.
Берем HTML страницу:
Давайте для примера получим страницу со американскими президентами из Википедии, откроем для этого текстовой редактор и напишем функцию для получения HTML-кода.
1 2 3 4 5 6 7 8 9 10 11 | const rp = require('request-promise'); const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States'; rp(url) .then(function(html){ //Получилось! console.log(html); }) .catch(function(err){ //ошибка }); |
В терминале у нас должно появиться весь HTML документ.
Использование Chrome DevTools:
Круто, мы получили необработанный HTML с веб-страницы! Но теперь нам нужно разобраться в этом гигантском куске текста. Для этого нам нужно использовать Chrome DevTools, чтобы мы могли легко искать что нам нужно в HTML.
Использовать Chrome DevTools просто: просто откройте Google Chrome и щелкните правой кнопкой мыши на элемент, который вы хотите посмотреть (я щелкаю правой кнопкой мыши на Джорджа Вашингтона) :
Теперь просто нажмите кнопку «Посмотреть код», и Chrome откроет панель инструментов DevTools, позволяющую легко проверить исходный HTML-код страницы.
Парсим HTML с помощью Cheerio.js:
Замечательно, Chrome DevTools теперь показывает нам точный шаблон, который мы должны искать в коде (тег big
с гиперссылкой внутри него).
Давайте воспользуемся Cheerio.js для синтаксического анализа полученного ранее HTML, чтобы вернуть список ссылок на отдельные страницы Википедии президентов США.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const rp = require('request-promise'); const $ = require('cheerio'); const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States'; rp(url) .then(function(html){ // Получили HTML console.log($('big > a', html).length); console.log($('big > a', html)); }) .catch(function(err){ // Ошибка }); |
Вот что должно вывестись в терминале:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 45 { '0': { type: 'tag', name: 'a', attribs: { href: '/wiki/George_Washington', title: 'George Washington' }, children: [ [Object] ], next: null, prev: null, parent: { type: 'tag', name: 'big', attribs: {}, children: [Array], next: null, prev: null, parent: [Object] } }, '1': { type: 'tag' ... |
То есть суть библиотеки Cheerio.js в том, что вы можете брать элемент по селектору из строчного элемента и вы получаете объект со всеми его параметрами, что бы подробнее узнать о библиотеки, перейдите по ссылке ссылке.
Мы проверяем, что возвращено ровно 45 элементов (количество президентов США), а это означает, что на странице нет никаких дополнительных скрытых тегов big
.
Теперь мы можем пройти и получить список ссылок на страницу Википедии на всех 45 президентов, взяв их из раздела «атрибуты» каждого элемента.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const rp = require('request-promise'); const $ = require('cheerio'); const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States'; rp(url) .then(function(html){ // Получили Страницу const wikiUrls = []; for (let i = 0; i < 45; i++) { wikiUrls.push($('big > a', html)[i].attribs.href); } console.log(wikiUrls); }) .catch(function(err){ // Ошибка }); |
Вот что должно вывестись в терминал:
1 2 3 4 5 6 7 8 9 10 | [ '/wiki/George_Washington', '/wiki/John_Adams', '/wiki/Thomas_Jefferson', '/wiki/James_Madison', '/wiki/James_Monroe', '/wiki/John_Quincy_Adams', '/wiki/Andrew_Jackson', ... ] |
Мы получили ссылки на 45 президентов США, таким же образом вы можете формировать новые теги и выводить их на сайт, или отправлять по RestAPI.
В целом это ещё не вся переведённая статья, но мне кажется этого хватит чтобы сделать хороший парсер на Node.JS, если надо всё перевести, то пишите комментарии.
Вывод:
В этой статье вы прочитали как сделать парсер сайтов Node.js, думаю вам было интересно и полезно.