Основы HTML-скрапинга: Первые шаги

23 февр. 2025 г.

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

Глава 1: HTML Scaper Chad

Наше путешествие начинается с самого простого сценария - извлечения текста из простой HTML-страницы. Эта глава знакомит вас с основными концепциями:

  • Выполнение HTTP-запросов для получения веб-страниц
  • Загрузка HTML-контента в парсер
  • Основной выбор элементов DOM с помощью CSS-селекторов

Хотя пример может показаться тривиальным (это всего лишь "hello world"), он закладывает основу для всего, что следует дальше.

<!-- Пример HTML-структуры -->
<div class="content">
  <p>Какой-то текст, который мы хотим извлечь</p>
</div>

Вот образец того, с чем мы работаем:

// Основные концепции (не решение!)
import * as cheerio from 'cheerio';

// Загрузка HTML-контента
const $ = cheerio.load(htmlContent);

// Использование CSS-селекторов
const text = $('p').text();  // Выбирает все теги <p>
const specific = $('.content p').text();  // Более конкретный выбор

Глава 2: Структурированные данные

Становится интереснее, когда мы погружаемся в имитацию страницы товара электронной коммерции. Здесь мы сталкиваемся с несколькими элементами с похожими структурами:

<!-- Пример структуры продукта (упрощено) -->
<div class="product">
  <h2>Название продукта</h2>
  <span class="price">$99.99</span>
  <div class="specs">
    <ul>
      <li>Размер: M</li>
      <li>Цвет: Синий</li>
    </ul>
  </div>
</div>

При работе с такими структурированными данными стоит подумать о:

// Концептуальный подход (не решение!)
$('.product').each((index, element) => {
  // Для каждого продукта мы можем:
  // 1. Извлечь основную информацию
  const name = $(element).find('h2').text();

  // 2. Разобрать вложенные данные
  const specs = $(element).find('.specs li');

  // 3. Структурировать вывод
  const data = {
    name,
    specs: specs.map(/* ... */),
  };
});

Совет: Перед написанием любого кода уделите время анализу HTML-структуры. Ищите закономерности в организации данных - есть ли постоянные имена классов? Как связаны родительские и дочерние элементы?

Глава 3: Скрапинг с помощью ИИ

Теперь становится интересно! В то время как предыдущие задачи научили нас традиционным методам скрапинга, Глава 3 представляет современный подход: веб-скрапинг с помощью ИИ. Мы сталкиваемся с кошмарным сценарием - непоследовательными HTML-структурами, запутанными именами классов и смешанными шаблонами различных фреймворков.

Давайте посмотрим, что делает эту задачу особенной:

<!-- Традиционная структура продукта -->
<div data-testid="product-container-1" class="_3xj_item">
  <h2 data-qa="name">Красные кроссовки</h2>
  <span data-price-current="5999">$59.99</span>
</div>

<!-- Компонент в стиле React -->
<div class="ProductCard-root-1a2b3c">
  <div class="ProductCard-title-4d5e6f">Розовые прогулочные туфли</div>
  <div class="ProductCard-pricing-7g8h9i">$84.99</div>
</div>

<!-- Шаблон в стиле Vue -->
<div data-v-abcdef class="product">
  <h2 data-v-abcdef>Темно-синие корабельные туфли</h2>
  <span data-v-abcdef>$79.99</span>
</div>

Традиционные подходы к скрапингу столкнулись бы с трудностями, потому что:

  • Имена классов случайны или специфичны для фреймворка
  • Структуры данных различаются между продуктами
  • Разные фреймворки используют разные шаблоны
  • Семантический смысл теряется в разметке

Здесь на помощь приходит ИИ. Вместо написания хрупких селекторов, мы можем описать, что мы хотим, на естественном языке и позволить ИИ заняться сопоставлением шаблонов. Ключевые концепции в этой главе включают:

  • Инженерия промптов для веб-скрапинга
  • Использование ИИ для понимания семантического значения
  • Обработка непоследовательных структур данных
  • Работа с разметкой, специфичной для фреймворков
  • Поддержание согласованности данных при разных шаблонах

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

Примечание о использовании ИИ

Помните, что помощь ИИ не означает полностью автоматизированные решения. Лучшие результаты получаются при сочетании:

  • Четкого определения задачи
  • Хорошо структурированных промптов
  • Проверки данных
  • Человеческого контроля

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

Готовы объединить традиционные знания о веб-скрапинге с современными возможностями ИИ? Давайте разберемся, как ИИ может помочь решить даже с самым запутанным HTML!

Подсказки

  1. Экспериментируйте с различными CSS-селекторами:
// Различные способы выбора элементов
$('.class')           // По классу
$('#id')             // По ID
$('div > p')         // Прямые потомки
$('div p')           // Все потомки
$('[data-type="x"]') // По атрибуту
  1. Попробуйте изменить формат вывода
  2. Подумайте о обработке ошибок и крайних случаях
  3. Рассмотрите, как ваше решение может масштабироваться с более крупными наборами данных

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

git clone https://github.com/jonaylor89/housefly.git
cd hosuefly

Ищете подсказки? Исходный HTML для каждой задачи доступен в каталоге apps/chapter{n}/. А рабочие решенные примеры также доступны в _solved/chapter{n}/. Изучите структуру, спланируйте свой подход и помните - каждый эксперт когда-то был начинающим.

Помните о ответственном обращении с запросами:

// Пример обработки ошибок
async function fetchPage(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Ошибка HTTP! Статус: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    console.error('Не удалось загрузить страницу:', error);
    throw error;
  }
}

Удачного скрапинга!