Многим знакома ситуация, когда хочется получить данные со страницы какого-нибудь сайта в упорядоченном виде.
Подавляющее большинство примеров парсинга страниц сайтов сводится к использованию селекторов CSS.
Попробуем использовать просто смысловой анализ HTML DOM. Может все намного проще, чем в тех примерах ...
Построение дерева HTML DOM и свойства узла "plaintext", "innertext", "outertext" надеюсь объяснять не надо
Итак, рассмотрим слдующий HTML-код
<div>
<span>Парсинг. Создание парсера HTML DOM. Простые узлы</span>
<div>
<a href="#">Ссылка на "Смышлёный парсер"</a>
</div>
<div>
<img src="/images/parser.jpg" />
</div>
<div>
<img src="/images/parser.jpg" title="заголовок картинки" />
</div>
<div>
<img src="/images/parser.jpg" title="заголовок картинки" alt="альтернативный текст для картинки" />
</div>
</div>
Распознавание по правилам "текстовое содержимое"
Правила
Очевидны
Результат:
id | Тип | Имя | Значение | html |
4 | Текст | Парсинг. Создание парсера HTML DOM. Простые узлы | <span>Парсинг. Создание парсера HTML DOM. Простые узлы</span> | |
9 | Ссылка | Ссылка на "Смышлёный парсер" | <a href="#">Ссылка на "Смышлёный парсер"</a> |
Итог:
- нет имени узла
- пропущены узлы с тегом <img>, так как для них текст ("plaintext") не предусмотрен
Распознавание по правилам "с учетом атрибутов"
Введем понятие "комплексный" узел и, используя его "действительную" и "реальную" части
Правила
Также очевидны
Результат:
# | id | Тип | Имя | Значение | html | real | imag |
#1 | 4 | Текст | Парсинг. Создание парсера HTML DOM. Простые узлы | <span>Парсинг. Создание парсера HTML DOM. Простые узлы</span> | Парсинг. Создание парсера HTML DOM. Простые узлы | ||
#2 | 9 | Ссылка | Ссылка на "Смышлёный парсер" | # | <a href="#">Ссылка на "Смышлёный парсер"</a> | Ссылка на "Смышлёный парсер" | # |
#3 | 15 | Картинка | images/parser.jpg | <img src="/images/parser.jpg"> | images/parser.jpg | ||
#4 | 20 | Картинка | заголовок картинки | images/parser.jpg | <img src="/images/parser.jpg" title="заголовок картинки"> | заголовок картинки | images/parser.jpg |
#5 | 25 | Картинка | альтернативный текст картинки | images/parser.jpg | <img src="/images/parser.jpg" title="заголовок картинки" alt="альтернативный текст картинки"> | альтернативный текст картинки | images/parser.jpg |
Итог:
- имена, где можно, появились
- появились узлы с тегом <img>
Теперь добавим картинку в ссылку
<div>
<a href="#"><img src="/images/parser.jpg" /></a>
</div>
Правила
Такие-же как правила "с учетом атрибутов"
Результат:
# | id | Тип | Имя | Значение | html | real | imag |
#1 | 5 | Картинка | images/parser.jpg | <img src="/images/parser.jpg"> | images/parser.jpg |
Итог:
- НЕТ ссылки
Похоже правила для "простых" узлов себя исчерпали...
Правила для "сложных" ("составных". "композитнных") узлов и соответственные результаты - в следующей статье...