Часть 1: Как спарсить веб-сайт HTML

Возможно, вы оказались в той же ситуации, когда вам нужно собрать данные о различных объектах (например, финансовые данные разных компаний) с веб-сайта, и вы копируете/вставляете тысячи раз с веб-сайта в свою таблицу. Работа по сбору данных изнуряет вас. Поверьте мне, я был в такой же ситуации, как и вы.

Чтобы собирать и форматировать данные более эффективно и аккуратно, мы создадим небольшую программу, которая решит эту проблему за нас. После этого потребуется всего несколько секунд, чтобы получить онлайн-данные.

Статья разделена на две части:

• Первая часть представляет, как найти точки данных, которые мы хотим получить из HTML веб-сайта.
• Вторая часть показывает, как применить эти знания автоматическим образом с помощью небольшого скрипта NodeJS.

Эта часть начнется с примера сбора финансовой информации о компании Apple Inc. с веб-сайта фондового рынка martketwatch.com. Путь URL: https://www.marketwatch.com/investing/stock/aapl/financials.

Подход, который я покажу, основан на предположении, что нет доступного API, которое можно использовать напрямую. В случае с martketwatch.com, они отображают данные на сервере, что означает, что нужно разобрать отображаемую страницу. Давайте сделаем это!

Чтобы помочь нам исследовать, как получить нужные данные, давайте воспользуемся jQuery. Он имеет тот же интерфейс, что и cheerio, который будет использоваться позже.

Чтобы использовать jQuery на текущем веб-сайте, выполните следующее в консоли разработчика. Он добавляет тег скрипта на веб-сайт, который загрузит библиотеку jQuery для нашего использования.

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-latest.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Теперь символ $ должен быть доступен. Если его нет, возможно, из-за политики CSR веб-сайта, последним вариантом будет скопировать содержимое https://code.jquery.com/jquery-latest.min.js_ и вставить его в консоль разработчика._

Проверьте и выберите все теги input на веб-сайте:

$('input')

Теперь вы должны видеть, что некоторые теги input найдены с помощью селектора jQuery. Это замечательно, основная работа сделана для нашего приключения!

Теперь давайте посмотрим, как мы можем выбрать нужные нам данные, в данном случае - финансовые данные акций компании с укушенным фруктом.

Нас интересуют данные о продажах с 2015 по 2019 год, вопрос в том, как мы можем их извлечь? Ну, вы, наверное, уже догадались, с помощью селектора jQuery. Давайте посмотрим на HTML-код этого. С помощью селектора элемента в инструментах разработчика вы можете выбрать элемент в представлении.

После выбора поля элемент будет найден в HTML.

Посмотрев на окружающий HTML, мы видим тег div с классом financials. Внутри этого тега находится фактический тег table, в котором есть тег tbody. Внутри него находится тег tr, который содержит теги td с нашими нужными данными, которые мы хотим собрать! Надеюсь, вы поняли меня до сих пор :)

Давайте попробуем придумать селектор, который будет работать для jQuery. Класс financials является идеальной якорной точкой, потому что он уникален в HTML. Затем давайте попробуем выбрать только класс valueCell.

$('.financials td.valueCell')

Теперь это немного широко, и мы выбрали слишком много тегов с классом valueCell, нам нужно немного сузить выборку. Посмотрев, какие другие теги были выбраны, кажется, что нам нужно ограничиться первой строкой тегов с классом valueCell. К счастью, есть тег tr, который имеет класс partialSum.

$('.financials tr.partialSum:nth-child(1) td.valueCell')

Теперь у нас есть именно те ячейки, которые мы хотим получить! Следующий шаг - использовать это в нашей автоматизации!