Демо-код здесь
Это будет первым в серии преподавания, как сделать веб-соскреб. Цель этих постов будет в основном по отношению к людям, которые сделали едва какие-либо программирование, но хотели бы попасть в веб-соска. Этот конкретный пост будет сосредоточен на веб-соскании с Ceriojs,
Я собираюсь попытаться сделать это как простым и легко понять, насколько это возможно, не сосредоточив внимание на программировании. Веб-соскоб будет фокусом этой серии и не программирования.
Инструменты и начать
Этот раздел я буду включать в каждом посте этой серии. Он собирается перейти на инструменты, которые вам нужно будет установить. Я собираюсь попытаться сохранить его до минимума, так что вам не нужно добавлять кучу вещей.
Nodejs – Это работает JavaScript. Это очень хорошо поддерживается и обычно устанавливается примерно через минуту. Вы захотите скачать версию LTS, которая является 12.13.0
В настоящее время. Я бы порекомендовал просто бить дальше через все. Вам не нужно нужно проверять любые коробки. Вам не нужно ничего делать дальше с этим в это время.
Визуальный студийный код – Это просто текстовый редактор. 100% бесплатно, разработано Microsoft. Он должен устанавливать очень легко и не поставляется с любым Bloadware.
Вам также понадобится демонстрационный код, указанный в верхней и нижней части этой статьи. Вы захотите ударить кнопку «Clone или Download» и загрузите ZIP-файл и расстегните его к предпочтительному расположению.
После того, как вы его загружены и с установленными Nodejs, вам необходимо открыть код Visual Studio, а затем перейдите в файл> Открыть папку и выберите папку, в которую вы загрузили код.
Мы также будем использовать терминал для выполнения команд, которые будут запущены скрипт. В заказе Откройте терминал в Visual Studio Code, вы снова переходите в верхнее меню и перейдите к терминалу> Новый терминал. Терминал откроется на дне выглядит что-то (но, вероятно, не совсем так) это:
Важно, чтобы терминал открыл до фактического местоположения кода, или он не сможет найти скрипты, когда мы пытаемся запустить их. В вашей стороне Navbar в Visual Studio Code, без каких-либо папок расширены, вы должны увидеть > SRC
папка. Если вы этого не видите, вы, вероятно, в неправильном месте, и вам нужно снова открыть папку в правильном месте.
После того, как у вас будет загруженный пакет, и вы находитесь в терминале, ваша первая команда будет Установка NPM
. Это будет загружать все необходимые библиотеки, необходимые для этого проекта.
Войти Cheeriojs.
Cheeriojs – это библиотека JavaScript, которая делает его чрезвычайно простым в анализе HTML. Он использует селекторы CSS, чтобы выбрать свойства текста или HTML, которые вы хотите. Вы можете найти все подробный код и инструкции здесь Отказ
Пока я планирую перейти на самое распространенное использование с Ceriojs, используя селекторы CSS, I сильно Рекомендую получить знакомые с помощью селекторов CSS и Basic HTML-форматом. Селекторы CSS имеют решающее значение для почти любой библиотеки, которая делает веб-соскреб. Концепция довольно проста, и есть обильные ресурсы, помогающие, поэтому я не буду здесь глубин. Это руководство W3School очень хорош, и я посещаю его регулярно.
HTML Parser.
В обычном проекте Web Scraping мы позвоним на некоторую внешнюю страницу, получите HTML, а затем получить то, что мы хотели из HTML. В этом примере мы просто изолируем HTML и тестируем его локально. Я взял HTML для этого примера с любимого сайта – http://pizza.com Отказ Потому что я люблю пиццу.
Вот, пицца!
Вы можете увидеть в SRC
каталог, что есть образец html.ts
файл. Этот файл содержит все HTML с этой страницы в большой строке. Это можно легко использовать для симуляции, как если бы мы на самом деле называем страницу. На вершине нашего SRC/index.ts
файл (где мы будем делать все наше кодирование на этот раз), вы можете увидеть, что мы импортируем Образец-HTML
с Импорт {sammethtml} из './sample-html';
Отказ
Всякий раз, когда я перехожу на сайт, я всегда смотрю на HTML, чтобы увидеть, как выбрать элементы, которые я хочу. Инструменты разработчика – мой лучший друг и должен быть твоей. Вы можете открыть его с F12, а затем увидите все HTML там. Когда вы выделяете на разных частях HTML, он выделит на экране. Смотрите этот пример:
Вот как мы находим, какие селекторы CSS, которые мы собираемся использовать, чтобы выбрать элементы, которые мы хотим.
К коду
Хорошо, раздел кода будет довольно простым. Помните, что вы можете запустить свой код в любое время, набрав NPM начать
В терминале, где мы вы побежали Установка NPM
И это должно выводить все наши console.log
S в SRC/index.ts
Отказ
Первое, что мы с Cheeriojs – это импортировать библиотеку Cheeriojs, а затем загружать HTML следующим образом:
import cheerio from 'cheerio'; const $ = cheerio.load(sampleHtml);
Теперь мы можем использовать $
На протяжении всего нашего кода выберите элементы, которые мы хотим. Первая и простая часть для выбора будет называться нашей страницей. Код выглядит так:
// Search by element const title = $('title').text(); console.log('title', title);
Потому что заголовок является элементом HTML, мы можем просто выбрать его с «Название»
и ничего больше. Затем мы получаем текст из этого HTML-элемента.
В инструментах разработчиков вы можете увидеть заголовочный элемент, содержащий «Pizza.com». Название – самый простой селектор, но вы будете редко иметь только один из HTML-элемента. Название является исключением из этого правила.
Еще один полезный совет с инструментами разработчика – это кнопка со стрелкой в верхнем правой части панели элементов. Мы можем использовать его, чтобы выбрать товар, который мы ищем, и он найдет его в HTML для нас.
Таким образом, мы можем видеть выше, что если бы мы хотели получить информацию от первой кнопки NAV, мы могли бы найти с классом «Home_Link». Код для этого выглядит так:
// Search by class const homeButton = $('.home_link').text(); console.log('Home button', homeButton);
Всякий раз, когда мы выбираем с классом, мы помещаем один период перед именем класса. В этом примере '.home_link. '
это то, что мы ищем. Это выводит «домой», потому что он идет и находит весь текст в этом элементе, включая его дети. Я говорю, что дети, потому что HTML описан с семейными условиями. Родитель будет главным уровнем HTML-элементом, в то время как что-то внутри этого было бы детьми. Любые элементы внутри этих детей будут внуками. Вы также используете братья и сестры и дедушку, чтобы помочь описать их отношение к каждому.
Чтобы выделить это, давайте схватим текст со всех верхних кнопок NAV. Структура HTML выглядит следующим образом:
UL
Родитель всех тех Ли
элементы и дедушка любых элементов внутри этого. И, как вы можете видеть из того, что мы выделили на нашем сайте, он представляет весь навигатель. Код для выбора это похоже на это:
// Search by class and child const topNavButtons = $('.word-only li').text(); console.log('top nav buttons', topNavButtons);
На этот раз мы используем класс, а затем выбирая все элементы списка Ли
Это дети .слово- Только
сорт. Журнал в терминале для этого элемента выглядит так:
Теперь, что случилось здесь? Я знаю, что наш журнал немного отсечка Но я определенно больше предметов, чем ожидалось, не там? Это самый сложный бит веб-соска. Селекторы CSS найдут все элементы, которые соответствуют селектору, которое вы используете. Если мы немного смотрим вниз в нашем HTML, мы видим, что есть другой раздел, который также имеет тот же HTML, с тем же классом ( . Pword-Port
) и элемент ( li
) Отказ
Итак, иногда мы должны использовать другие методы, чтобы получить более конкретную о том, что мы хотим. Один из тех инструментов является то, что вы можете выбрать элементы по их свойствам.
// Search by property const pizzaNews = $('a[href="/pizza-news"]').text(); console.log('pizza news', pizzaNews);
Это выйдет в систему текста из этого элемента, который является «Новости Pizza». До сих пор все, что мы использовали для поиска этих элементов, использовали селекторы CSS. Не забудьте оглянуться на то, что W3Schools Cheat лист всякий раз, когда вам нужно.
Далее мы будем использовать некоторые из инструментов Ceriojs. Иногда есть большой список предметов, и мы хотим только первого в списке. Chereijs делает это очень просто с чем-то вроде этого:
// Search by property and find only the first const firstNavLink = $('li a').first().text(); console.log('first nav link', firstNavLink);
Это выглядит находит элемент с этим селектором Ли а
А потом находит только первый из них. В этом случае он выходит из журналов «Домой».
Вы также можете сделать это с последним элементом.
// Search by property and find only the last const lastNavLink = $('li a').last().text(); console.log('last nav link', lastNavLink);
Иногда вы не хотите текст элемента, но что-то еще. Ceriojs также позволяет вам захватить свойство из элементов HTML, как это:
/ Get propery from element const funFactsLink = $('.last a').prop('href'); console.log('fun facts link', funFactsLink);
Наконец, с помощью Web Scropping вы часто хотите много данных из таблицы, которые все имеют тот же селектор. Так что вы хотите, чтобы один кусок кода пойти и выбрать все это И тогда вы хотите что-то сделать с каждым элементом, как нажимайте его в CSV, например. Chereijs позволяет это очень легко с этим:
// Access each of a list in a loop $('li').each(function (index, element) { console.log('this text', $(element).text()); });
Мы выбираем все элементы списка и петлей через них с помощью .каждый
а потом мы выходим в систему текста каждого Но мы, безусловно, можем сделать что-нибудь еще. Журнал выглядит так:
Конец сердца
Это завершит мою вступление к креажу. Это очень мощный инструмент, но просто. Если вы чувствуете себя более амбициозным, я настоятельно рекомендую попробовать с вашим собственным HTML. Просто перейдите на веб-сайт, щелкните правой кнопкой мыши, а затем нажмите «Просмотр источника страницы». Оттуда вы можете выбрать все и заменить большую строку в SRC/образец-HTML.TS
Отказ
Если вы ищете более передовые использования Ceriojs, у меня есть сообщение в блоге, где я использую Ceriojs при соскоре Craigslist Отказ
Демо-код здесь
Ищете бизнес-ливок?
Использование техники говорилось здесь в JavascriptWebscrapingguy.com Мы смогли запустить способ доступа к удивительному бизнесу. Узнать больше в Cobalt Intelligence Действительно
Пост Ceriojs. Джордан учит Web Scraping появился первым на JavaScript Web Scraping Guy Отказ
Оригинал: “https://dev.to/aarmora/cheeriojs-jordan-teaches-web-scraping-20”