Парсер сайтов на примере Яндекс парсера

Предлагаемая вашему вниманию статья не содержит готового решения, но является пошаговой инструкцией создания парсера сайтов на примере парсинга страниц выдачи поисковой системы Яндекс. Изучив «матчасть», вы сможете сэкономить время и силы, начать парсить веб-страницы сайтов используя готовые наработки, решения и инструменты.

Шаг 1: создание карты HTML-документа

Карта HTML-документа — шаблон (каркас), состоящий из шапки, сайдбаров, контента и подвала. Пройдите от BODY до элемента парсинга* и определите смысловое значение элементов.

Пример: вот как выглядит карта HTML-документа выдачи Яндекс:

Карта HTML-документа выдачи Яндекс

...где выделены все основные элементы:

  • серые — второстепенные структурные элементы;
  • цветные — интересующие элементы, от BODY до элемента парсинга DIV.serp-item;
  • троеточием (…) — пропущенные элементы и значения.

Инструменты: для составления карты HTML-документа я использую:

  • «инспектором элементов» браузера (для Google Chrome это Ctrl+Shif+I);
  • букмарклет source для просмотра исходного кода веб-страницы, включая динамически подгруженный контент.
  • онлайн-инструмент для структурирования кода Dirty Markup;
  • бесплатный текстовый редактор с подсветкой и деревом кода Notepad++.

Шаг 2: определение уникального элемента обёртки

Элемент обёртки — родительский (выше по иерархии) элемент с уникальным идентификатором, включающий в себя элементы парсинга*. Уникальным идентификатором бывают значения атрибутов: id,class, name и прочее.

Инструменты: для выявления уникального элемента обёртки я использую букмарклет «Diag», который выводит в консоль браузера (console.dir()) объект, состоящий из названий атрибутов (id, class, name) и объектов их значений (значение и количество упоминаний):

Количество упоминаний значений из атрибутов id, class, name

При необходимости, добавьте дополнительные или уберите лишние атрибуты из переменной result, вот код букмарклета:

(function(d){
  var result = {'id': {}, 'class': {}, 'name': {}};
  [].forEach.call(
    d.body.querySelectorAll('*'),
    function(element){
      for( attr_key in result ){
        if( element.hasAttribute(attr_key) ){
          var attr_vals = element.getAttribute(attr_key).trim().split(/\s+/);
          attr_vals.forEach(function(attr_val){
            if( attr_val in result[attr_key] ){
              result[attr_key][attr_val]++;
            } else {
              result[attr_key][attr_val] = 1;
            }
          });
        }
      }
    }
  );
  console.dir(result);
}(document));

Пример: в качестве элемента обёртки элементов парсинга DIV.serp-item из выдачи Яндекс я использовал DIV.content__left.

Шаг 3: выявление признаков и/или шаблонов элемента парсинга

Элемент парсинга — интересующие нас фрагменты кода.

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

Основная задача — собрать примеры шаблонов элементов парсинга и выявить их уникальные признаки.

Пример: в выдаче Яндекс, стоит обратить внимание на шаблоны сниппетов со спецданными и поисковые колдунщики.

Основная проблема — изменения вёрстки HTML-документа. Нужно выявить максимально (!) уникальные (не изменяемые) признаки элементов парсинга.

Например, последняя версия букмарклета «Яндекс.Нумератор» учитывала 5 признаков элементов парсинга:

  1. DIV.serp-item содержит CSS-класс .i-bem (подробней о бэмах);
  2. DIV.serp-item не содержит элемента с CSS-классом .serp-adv-item__label (маркер рекламы);
  3. DIV.serp-item содержит элемент с CSS-классом .serp-item__title (заголовок сниппета);
  4. DIV.serp-item__title содержит тег A с CSS-классом .serp-item__title-link (ссылка в заголовке сниппета);
  5. A.serp-item__title-link содержит атрибут onmousedown, значение которого начинает с «rc(this» (для события клика, сбора статистики и редиректа).

Шаг 4: тестирование парсера сайта

Не советую тестировать парсер «вживую» — создадите нагрузку на сайт, получите блокировку, да и выявить ошибку сложнее. Советую тестировать парсер на сохранённой копии HTML-документа (в Google Chrome это Ctrl+S) — проще, быстрее и легче выявить ошибки. Подробней см. видео «Парсим и нумеруем выдачу Яндекс - обновление!»

Короткая ссылка: http://goo.gl/jb64RN