C как парсить сайт

ass="future">

Итог любого браузера с JS:

То есть, в итоге будет создан полноценный DIV элемент. К слову, токенизация тега SCRIPT то ещё дело. Мне пришлось рисовать

1. Поддержка C99
2. Возможность отделить хтмл парсер от отрисовщика чтобы использовать отдельно
3. Без внешних зависимостей

1. Парсер хтмл
2. Парсер цэсс
3. Селекторы (Selectors)
4. Отрисовщик inline, inline-block, block, table.

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

• Асинхронно парсить HTML, обрабатывать токены, строить дерево
• Полная поддержка HTML 5 по спецификации html.spec.whatwg.org/multipage
• Имеем два API: «Высокого» уровня и «низкого». Первое-это публичное апи, которое имеет описание и вообще, всё как у людей, но не позволяет видеть структуры. Второе-это использование исходников напрямую.
• Возможность манипулировать элементами: добавлять, удалять, изменять .
• Возможность манипуляции с атрибутами элементов: добавлять, удалять, изменять
• Поддерживает 34 кодировки на вход. На выход только UTF-8, и вся работа внутри только в UTF-8
• Может определять кодировку текста. Сейчас доступны unicode: UTF-8, UTF-16LE, UTF-16BE (+ определение по BOM) и русские: windows-1251, koi8-r, iso-8859-5, x-mac-cyrillic, ibm866
• Может работать в Single Mode — без тредов
• Парсить фрагменты HTML
• Парсить кусками (chunks). Можно отдавать резанные куски HTML (разорванные в произвольном месте) и он будет их парсить, без предварительного накопления буфера.
• Не имеет внешних зависимостей
• Поддерживает C99
• Работа с памятью. Память кешируется, выделяется кусками и под объекты. К примеру, удаление десяти элементов, а потом добавление десяти других не съест память под новые

На очереди CSS парсер и Render. Делаю всё один, «бензина» должно хватить.
Любая помощь крайне приветствуется!

Спасибо за внимание! Надеюсь вам будет это полезно!

P.S.: Если сообщество проявит к этой теме интерес то могу писать узконаправленные статьи о том как работает расчёт отрисовки и с какими сложностями сталкивался/сталкиваюсь.

Как спарсить любой сайт?

Меня зовут Даниил Охлопков, и я расскажу про свой подход к написанию скриптов, извлекающих данные из интернета: с чего начать, куда смотреть и что использовать.

Написав тонну парсеров, я придумал алгоритм действий, который не только минимизирует затраченное время на разработку, но и увеличивает их живучесть, робастность, масштабируемость.

TL;DR

Чтобы спарсить данные с вебсайта, пробуйте подходы именно в таком порядке:

1. Найдите официальное API,
2. Найдите XHR запросы в консоли разработчика вашего браузера,
3. Найдите сырые JSON в html странице,
4. Отрендерите код страницы через автоматизацию браузера,
5. Если ничего не подошло - пишите парсеры HTML кода.

Совет профессионалов: не начинайте с BS4/Scrapy

BeautifulSoup4 и Scrapy - популярные инструменты парсинга HTML страниц (и не только!) для Python.

Крутые вебсайты с крутыми продактами делают тонну A/B тестов, чтобы повышать конверсии, вовлеченности и другие бизнес-метрики. Для нас это значит одно: элементы на вебстранице будут меняться и переставляться. В идеальном мире, наш написанный парсер не должен требовать доработки каждую неделю из-за изменений на сайте.

Приходим к выводу, что не надо извлекать данные из HTML тегов раньше времени: разметка страницы может сильно поменяться, а CSS-селекторы и XPath могут не помочь. Используйте другие методы, о которых ниже. ⬇️

Используйте официальный API

�� Ого? Это не очевидно ��? Конечно, очевидно! Но сколько раз было: сидите пилите парсер сайта, а потом БАЦ - нашли поддержку древней RSS-ленты, обширный sitemap.xml или другие интерфейсы для разработчиков. Становится обидно, что поленились и потратили время не туда. Даже если API платный, иногда дешевле договориться с владельцами сайта, чем тратить время на разработку и поддержку.

Sitemap.xml - список страниц сайта, которые точно нужно проиндексировать гуглу. Полезно, если нужно найти все объекты на сайте. Пример: http://techcrunch.com/sitemap.xml

RSS-лента - API, который выдает вам последние посты или новости с сайта. Было раньше популярно, сейчас все реже, но где-то еще есть! Пример: https://habr.com/ru/rss/hubs/all/

Поищите XHR запросы в консоли разработчика

Все современные вебсайты (но не в дарк вебе, лол) используют Javascript, чтобы догружать данные с бекенда. Это позволяет сайтам открываться плавно и скачивать контент постепенно после получения структуры страницы (HTML, скелетон страницы).

Обычно, эти данные запрашиваются джаваскриптом через простые GET/POST запросы. А значит, можно подсмотреть эти запросы, их параметры и заголовки - а потом повторить их у себя в коде! Это делается через консоль разработчика вашего браузера (developer tools).

В итоге, даже не имея официального API, можно воспользоваться красивым и удобным закрытым API. ☺️

Даже если фронт поменяется полностью, этот API с большой вероятностью будет работать. Да, добавятся новые поля, да, возможно, некоторые данные уберут из выдачи. Но структура ответа останется, а значит, ваш парсер почти не изменится.

Алгорим действий такой:

1. Открывайте вебстраницу, которую хотите спарсить
2. Правой кнопкой -> Inspect (или открыть dev tools как на скрине выше)
3. Открывайте вкладку Network и кликайте на фильтр XHR запросов
4. Обновляйте страницу, чтобы в логах стали появляться запросы
5. Найдите запрос, который запрашивает данные, которые вам нужны
6. Копируйте запрос как cURL и переносите его в свой язык программирования для дальнейшей автоматизации.

Вы заметите, что иногда эти XHR запросы включают в себя огромные строки - токены, куки, сессии, которые генерируются фронтендом или бекендом. Не тратьте время на ревёрс фронта, чтобы научить свой парсер генерировать их тоже.

Вместо этого попробуйте просто скопипастить и захардкодить их в своем парсере: очень часто эти строчки валидны 7-30 дней, что может быть окей для ваших задач, а иногда и вообще несколько лет. Или поищите другие XHR запросы, в ответе которых бекенд присылает эти строчки на фронт (обычно это происходит в момент логина на сайт). Если не получилось и без куки/сессий никак, - советую переходить на автоматизацию браузера (Selenium, Puppeteer, Splash - Headless browsers) - об этом ниже.

Поищите JSON в HTML коде страницы

Как было удобно с XHR запросами, да? Ощущение, что ты используешь официальное API. �� Приходит много данных, ты все сохраняешь в базу. Ты счастлив. Ты бог парсинга.

Но тут надо парсить другой сайт, а там нет нужных GET/POST запросов! Ну вот нет и все. И ты думаешь: неужели расчехлять XPath/CSS-selectors? ��‍♀️ Нет! ��‍♂️

Чтобы страница хорошо проиндексировалась поисковиками, необходимо, чтобы в HTML коде уже содержалась вся полезная информация: поисковики не рендерят Javascript, довольствуясь только HTML. А значит, где-то в коде должны быть все данные.

Современные SSR-движки (server-side-rendering) оставляют внизу страницы JSON со всеми данные, добавленный бекендом при генерации страницы. Стоп, это же и есть ответ API, который нам нужен! ������

Вот несколько примеров, где такой клад может быть зарыт (не баньте, плиз):

Алгоритм действий такой:

1. В dev tools берете самый первый запрос, где браузер запрашивает HTML страницу (не код текущий уже отрендеренной страницы, а именно ответ GET запроса).
2. Внизу ищите длинную длинную строчку с данными.
3. Если нашли - повторяете у себя в парсере этот GET запрос страницы (без рендеринга headless браузерами). Просто requests.get .
4. Вырезаете JSON из HTML любыми костылямии (я использую html.find("= <") ).

Отрендерите JS через Headless Browsers

Если XHR запросы требуют актуальных tokens, sessions, cookies. Если вы нарываетесь на защиту Cloudflare. Если вам обязательно нужно логиниться на сайте. Если вы просто решили рендерить все, что движется загружается, чтобы минимизировать вероятность бана. Во всех случаях - добро пожаловать в мир автоматизации браузеров!

Если коротко, то есть инструменты, которые позволяют управлять браузером: открывать страницы, вводить текст, скроллить, кликать. Конечно же, это все было сделано для того, чтобы автоматизировать тесты веб интерфейса. I'm something of a web QA myself.

После того, как вы открыли страницу, чуть подождали (пока JS сделает все свои 100500 запросов), можно смотреть на HTML страницу опять и поискать там тот заветный JSON со всеми данными.

driver.get(url_to_open) html = driver.page_source

Selenoid - open-source remote Selenium cluster

Для масштабируемости и простоты, я советую использовать удалённые браузерные кластеры (remote Selenium grid).

Недавно я нашел офигенный опенсорсный микросервис Selenoid, который по факту позволяет вам запускать браузеры не у себя на компе, а на удаленном сервере, подключаясь к нему по API. Несмотря на то, что Support team у них состоит из токсичных разработчиков, их микросервис довольно просто развернуть (советую это делать под VPN, так как по умолчанию никакой authentication в сервис не встроено). Я запускаю их сервис через DigitalOcean 1-Click apps: 1 клик - и у вас уже создался сервер, на котором настроен и запущен кластер Headless браузеров, готовых запускать джаваскрипт!

Вот так я подключаюсь к Selenoid из своего кода: по факту нужно просто указать адрес запущенного Selenoid, но я еще зачем-то передаю кучу параметров бразеру, вдруг вы тоже захотите. На выходе этой функции у меня обычный Selenium driver, который я использую также, как если бы я запускал браузер локально (через файлик chromedriver).

def get_selenoid_driver( enable_vnc=False, browser_name="firefox" ): capabilities = < "browserName": browser_name, "version": "", "enableVNC": enable_vnc, "enableVideo": False, "screenResolution": "1280x1024x24", "sessionTimeout": "3m", # Someone used these params too, let's have them as well "goog:chromeOptions": , "prefs": < "credentials_enable_service": False, "profile.password_manager_enabled": False >, > driver = webdriver.Remote( command_executor=SELENOID_URL, desired_capabilities=capabilities, ) driver.implicitly_wait(10) # wait for the page load no matter what if enable_vnc: print(f"You can view VNC here: ") return driver

Заметьте фложок enableVNC . Верно, вы сможете смотреть видосик с тем, что происходит на удалённом браузере. Всегда приятно наблюдать, как ваш скрипт самостоятельно логинится в Linkedin: он такой молодой, но уже хочет познакомиться с крутыми разработчиками.

Парсите HTML теги

Мой единственный совет: постараться минимизировать число фильтров и условий, чтобы меньше переобучаться на текущей структуре HTML страницы, которая может измениться в следующем A/B тесте.

Даниил Охлопков - Data Lead @ Runa Capital

Подписывайтесь на мой Телеграм канал, где я рассказываю свои истории из парсинга и сливаю датасеты.

Надеюсь, что-то из этого было полезно! Я считаю, что в парсинге важно, с чего ты начинаешь. С чего начать - я рассказал, а дальше ваш ход ��

Парсинг веб-страниц с помощью C++

Веб-скрапинг — это распространенная техника сбора данных в Интернете, при которой клиент HTTP обрабатывает запрос пользователя на получение данных и использует парсер HTML для извлечения этой информации. Это помогает программистам более легко получать необходимую информацию для своих проектов.

Существует множество вариантов использования веб-скрапинга. Он позволяет получить доступ к данным, которые могут быть недоступны через API, а также к данным из нескольких разрозненных источников. С помощью этого метода можно собрать и проанализировать мнения пользователей о продукте, а также получить представление о состоянии рынка, например, о волатильности цен или проблемах дистрибуции. Однако собрать эти данные или интегрировать их в свои проекты не всегда было просто.

К счастью, веб-скрапинг стал более совершенным, и ряд языков программирования поддерживают его, включая C++. Этот популярный язык системного программирования также обладает рядом особенностей, которые делают его полезным для веб-скрапинга, например, скоростью, строгой статической типизацией и стандартной библиотекой, включающей в себя вывод типов, шаблоны для общего программирования, примитивы для параллелизма и лямбда-функции.

В этом руководстве вы узнаете, как использовать C++ для реализации веб-скрапинга с помощью библиотек libcurl и gumbo. Вы можете следить за развитием событий на GitHub.

Предварительные условия

Для этого урока вам понадобится следующее:

• базовое понимание HTTP
• C++ 11 или новее, установленный на вашей машине
• g++ 4.8.1 или новее
• библиотеки libcurl и gumbo C
• ресурс с данными для скрапинга (вы будете использовать сайт Merriam-Webster)

О веб-скрапинге

На каждый запрос HTTP, сделанный клиентом (например, браузером), сервер выдает ответ. И запросы, и ответы сопровождаются заголовками, которые описывают аспекты данных, которые клиент намерен получить, и объясняют все нюансы отправленных данных для сервера.

Например, допустим, вы сделали запрос на сайт Merriam-Webster для получения определений слова «эзотерический», используя cURL в качестве клиента:

GET /dictionary/esoteric HTTP/2 Host: www.merriam-webster.com user-agent: curl/7.68.0 accept: */*

Сайт Merriam-Webster будет отвечать заголовками, чтобы идентифицировать себя как сервер, HTTP-кодом ответа для обозначения успеха (200), форматом данных ответа — HTML в данном случае — в заголовке content-type, директивами кэширования и дополнительной метаданными CDN. Это может выглядеть примерно так:

HTTP/2 200 content-type: text/html; charset=UTF-8 date: Wed, 11 May 2022 11:16:20 GMT server: Apache cache-control: max-age=14400, public pragma: cache access-control-allow-origin: * vary: Accept-Encoding x-cache: Hit from cloudfront via: 1.1 5af4fdb44166a881c2f1b1a2415ddaf2.cloudfront.net (CloudFront) x-amz-cf-pop: NBO50-C1 x-amz-cf-id: HCbuiqXSALY6XbCvL8JhKErZFRBulZVhXAqusLqtfn-Jyq6ZoNHdrQ== age: 5787

Вы должны получить аналогичные результаты после создания своего скрапера. Одна из двух библиотек, которые вы будете использовать в этом учебнике, — libcurl, на основе которой написан cURL.

Создание веб-скрапера

Скрапер, который вы собираетесь создать на C++, будет получать определения слов с сайта Merriam-Webster, избавляя вас от необходимости набирать текст, связанный с обычным поиском слов. Вместо этого вы сведете процесс к одному набору нажатий клавиш.

В этом руководстве вы будете работать в каталоге с именем scraper и с единственным одноименным файлом C++: scraper.cc.

Настройка библиотек

Две библиотеки на языке C, которые вы собираетесь использовать, libcurl и gumbo, работают здесь благодаря тому, что C++ хорошо взаимодействует с C. В то время как libcurl — это API, которое позволяет использовать несколько функций, связанных с URL и HTTP, и используется в клиенте с тем же именем, который был использован в предыдущем разделе, gumbo — это легковесный парсер HTML-5 с привязками к нескольким языкам, совместимым с С.

Использование vcpkg

Разработанный компанией Microsoft, vcpkg является кроссплатформенным менеджером пакетов для проектов C/C++. Следуйте этому руководству, чтобы настроить vcpkg на вашей машине. Вы можете установить libcurl и gumbo, набрав в консоли следующее:

$ vcpkg install curl $ vcpkg install gumbo

Если вы работаете в среде IDE, а именно в Visual Studio Code, выполните следующий фрагмент в корневом каталоге вашего проекта, чтобы интегрировать пакеты:

$ vcpkg integrate install

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

Использование apt

Если вы работали с Linux, вы должны быть знакомы с apt, которая позволяет удобно находить источники и управлять библиотеками, установленными в системе. Чтобы установить libcurl и gumbo с помощью apt, введите в консоль следующее:

$ sudo apt install libcurl4-openssl-dev libgumbo-dev

Установка библиотек

Вместо того чтобы выполнять установку вручную, вы можете воспользоваться методом, показанным ниже.

Сначала клонируйте репозиторий curl и установите его глобально:

$ git clone https://github.com/curl/curl.git $ cd $ autoreconf -fi $ ./configure $ make

Затем клонируйте репозиторий gumbo и установите пакет:

$ sudo apt install libtool $ git clone https://github.com/google/gumbo-parser.git $ cd $ ./autogen.sh $ ./configure $ make && sudo make install

Пишем парсер (скрапер)

Первым шагом в написании парсера является создание инструмента для выполнения HTTP-запроса. Артефакт — функция с названием request — позволит инструменту для скрапинга словаря получать разметку с сайта Merriam-Webster.

В функции request, определенной в файле scraper.cc, в приведенном ниже фрагменте кода, определены неизменяемые примитивы — имя клиента, которое идентифицирует скрапер через заголовок user-agent, и артефакты языка для записи разметки ответа сервера в память. Единственным параметром является слово, которое является частью пути URL, определения которого получает скрапер.

typedef size_t( * curl_write)(char * , size_t, size_t, std::string * ); std::string request(std::string word) < CURLcode res_code = CURLE_FAILED_INIT; CURL * curl = curl_easy_init(); std::string result; std::string url = "https://www.merriam-webster.com/dictionary/" + word; curl_global_init(CURL_GLOBAL_ALL); if (curl) < curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, static_cast < curl_write >([](char * contents, size_t size, size_t nmemb, std::string * data) -> size_t < size_t new_size = size * nmemb; if (data == NULL) < return 0; >data -> append(contents, new_size); return new_size; >)); curl_easy_setopt(curl, CURLOPT_WRITEDATA, & result); curl_easy_setopt(curl, CURLOPT_URL, url.c_str()); curl_easy_setopt(curl, CURLOPT_USERAGENT, "simple scraper"); res_code = curl_easy_perform(curl); if (res_code != CURLE_OK) < return curl_easy_strerror(res_code); >curl_easy_cleanup(curl); > curl_global_cleanup(); return result; >

Не забудьте включить соответствующие заголовки в преамбулу вашего файла .cc или .cpp для библиотеки curl и библиотеки строк C++. Это позволит избежать проблем с компиляцией при подключении библиотек.

#include “curl/curl.h” #include “string”

Следующий шаг, разбор разметки, требует выполнения четырех функций: scrape, find_definitions, extract_text и str_replace. Поскольку gumbo занимает центральное место в разборе разметки, добавьте соответствующий заголовок библиотеки следующим образом:

#include “gumbo.h”

Функция scrape передает разметку из запроса в find_definitions для выборочного итеративного обхода DOM. В этой функции вы будете использовать парсер gumbo, который возвращает строку, содержащую список определений слов:

std::string scrape(std::string markup) < std::string res = ""; GumboOutput *output = gumbo_parse_with_options(&kGumboDefaultOptions, markup.data(), markup.length()); res += find_definitions(output->root); gumbo_destroy_output(&kGumboDefaultOptions, output); return res; >

Функция find_definitions ниже рекурсивно собирает определения из элементов HTML span с уникальным идентификатором класса «dtText«. Она извлекает текст определения с помощью функции extract_text на каждой успешной итерации из каждого HTML-узла, в котором находится этот текст.

std::string find_definitions(GumboNode *node) < std::string res = ""; GumboAttribute *attr; if (node->type != GUMBO_NODE_ELEMENT) < return res; >if ((attr = gumbo_get_attribute(&node->v.element.attributes, "class")) && strstr(attr->value, "dtText") != NULL) < res += extract_text(node); res += "\n"; >GumboVector *children = &node->v.element.children; for (int i = 0; i < children->length; ++i) < res += find_definitions(static_cast(children->data[i])); > return res; >

Далее, функция extract_text ниже извлекает текст из каждого узла, который не является тегом script или style. Функция направляет текст на процедуру str_replace, которая заменяет ведущее двоеточие на бинарный символ >.

std::string extract_text(GumboNode *node) < if (node->type == GUMBO_NODE_TEXT) < return std::string(node->v.text.text); > else if (node->type == GUMBO_NODE_ELEMENT && node->v.element.tag != GUMBO_TAG_SCRIPT && node->v.element.tag != GUMBO_TAG_STYLE) < std::string contents = ""; GumboVector *children = &node->v.element.children; for (unsigned int i = 0; i < children->length; ++i) < std::string text = extract_text((GumboNode *)children->data[i]); if (i != 0 && !text.empty()) < contents.append(""); >contents.append(str_replace(":", ">", text)); > return contents; > else < return ""; >>

Функция str_replace (вдохновленная одноименной функцией PHP) заменяет каждый экземпляр заданной строки поиска в большей строке на другую строку. Она выглядит следующим образом:

std::string str_replace(std::string search, std::string replace, std::string &subject) < size_t count; for (std::string::size_type pos<>; subject.npos != (pos = subject.find(search.data(), pos, search.length())); pos += replace.length(), ++count) < subject.replace(pos, search.length(), replace.data(), replace.length()); >return subject; >

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

#include ”algorithm”

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

Добавьте функцию, которая преобразует входные строки в их эквиваленты в нижнем регистре:

std::string strtolower(std::string str)

Далее следует логика ветвления, которая выборочно анализирует один аргумент командной строки:

if (argc != 2)

Основная функция в вашем скрапере должна выглядеть так, как показано ниже:

int main(int argc, char **argv) < if (argc != 2) < std::cout std::string arg = argv[1]; std::string res = request(arg); std::cout

Вы должны включить библиотеку iostream C++, чтобы гарантировать, что примитивы ввода/вывода (IO), определенные в функции main, работают ожидаемым образом:

#include “iostream”

Чтобы запустить ваш скрапер, скомпилируйте его с помощью g++. Введите в консоль следующий текст, чтобы скомпилировать и запустить ваш скрапер. Он должен извлечь шесть перечисленных определений слова «эзотерика»:

$ g++ scraper.cc -lcurl -lgumbo -std=c++11 -o scraper $ ./scraper esoteric

Вы должны увидеть следующее:

Заключение

Как вы увидели в этой статье, C++, который обычно используется для системного программирования, также хорошо подходит для веб-скрапинга благодаря своей способности анализировать HTTP. Эта дополнительная функциональность может помочь расширить ваши знания в C++.

Обратите внимание, что этот пример был относительно простым и не рассматривал, как будет работать скрапинг для сайта с более сложной JavaScript-кодом, например, использующего Selenium. Чтобы выполнять скрапинг на сайте с более динамической отрисовкой, можно использовать безголовый браузер с библиотекой C++ для Selenium. Эта тема будет рассмотрена в будущей статье.

Чтобы проверить свою работу по этой статье, обратитесь к GitHub gist.