Действие парсера «HTML: Поиск тегов»

Действие "HTML: Поиск тегов" является одним из основных действий программы, при помощи которого можно осуществлять разнообразные операции с html-тегами - поиск, удаление, извлечение из тегов атрибутов и т.д.

Видеоинструкция

На видео рассказывается о всех возможностях действия Поиск тегов в парсере:

Параметры действия:

Предназначение действия:

Извлечь нужные данные из исходного кода страницы сайта.

В качестве параметров задаётся: тип элемента (например, DIV или TABLE), название искомого атрибута (id, class, itemprop, name), значение проверяемого атрибута, и тип результата (innerHTML - только содержимое элемента, outerHTML - элемент целиком, или ConvertToText - преобразованное в текст содержимое).

Возвращаемое значение: один или несколько результатов (HTML или текст)

 


Параметр «Тип элемента»

Тип параметра: выбор из списка, или ввод вручную

Примеры значений параметра: div; span; ul; li; meta; input; img; meta; table; tr; a; p; h1; h2; h3; Any Tag

Значение по умолчанию: div

Можно указать (ввести или выбрать из списка) любое название тега.

Если нужно найти любые теги (независимо от названия тега), укажите в этом параметре Any Tag.
Можно использовать подстановочный символ * в начале или конце имени тега, а также использовать регулярные выражения (RegExp). Например, для поиска всех заголовков (теги h1, h2, h3 ... h6) можно применить записи вида h*, h[123456], h\d.

Если требуется искать 2 или больше названий тегов, применяется RegExp синтаксис вида (div|span)

 

Параметр «Название проверяемого атрибута»

Тип параметра: выбор из списка, или ввод вручную

Примеры значений параметра: AttributesPattern; id; name; class; title; type; itemprop

Можно указать (ввести или выбрать из списка) любое название атрибута, например class или id.
Для поиска значения (из третьего параметра) как в названиях атрибутов, так и в значениях, выберите в этом поле опцию AttributesPattern.

 

Параметр «Значение проверяемого атрибута»

Тип параметра: произвольное текстовое значение

 

Параметр «Тип результата / извлекаемый атрибут»

Тип параметра: выбор из списка, или ввод вручную

Примеры значений параметра: тег или его начинка (outerHTML; innerHTML), тег преобразованный в текст (ConvertToText), название извлекаемого атрибута (content; href; href_with_prefix; src; src_with_prefix; value; data), спец. команды (URL|Text; DeleteTags; ReplaceTagWithItsText; TagHeaderOnly)

Значение по умолчанию: innerHTML

В этом параметре допустимо указать 2 опции (через пробел):

Опция 1 (обязательная): тип результата / команда
Подробнее о всех типах результата можно узнать из видеоинструкции.

Опция 2 (необязательная): порядковый номер результата (на случай, если результатов несколько, а нужен только один)
Если в исходном HTML коде найдено несколько подходящих тегов, действие возвращает МАССИВ результатов (если порядковый номер не указан, т.е. тип результата задан в виде innerHTML или ConvertToText. Задав порядковый номер в виде числа (1, 2 и т.п.) или кодового слова last, мы получим на выходе один результат (первый, второй, или последний), например: innerHTML 1ConvertToText last.

 

Параметр «Сохранить результат в переменную»

Тип параметра: произвольное текстовое значение

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

 

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

Тип параметра: выбор из списка предопределенных значений

Допустимые значения параметра: да; нет

Значение по умолчанию: да

Этот параметр ставится равным НЕТ только в одном единственном случае, при выполнении сразу 2 условий:

  1. мы не будет использовать результат действия сразу, в следующем действии / выводе на лист (а только сохраняем его в переменную, для использования в другом месте парсера)
  2. для дальнейшей обработки (например, поиска следующего тега) нам нужен исходный HTML, а не результат выполнения этого действия

 

Примеры использования:

 

Действие Параметр Значение
HTML: Поиск тегов Тип элемента a
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<ul><li><a href="/popular" target="_self">Поиск HTML тегов</a></li>
<li><a href="/NewArticles2" target="_self">Последние публикации</a></li>
<li><a href="/tools" target="_self">Инструменты разработчика</a></li></ul>
 
<a href="/popular" target="_self">Поиск HTML тегов</a>
<a href="/NewArticles2" target="_self">Последние публикации</a>
<a href="/tools" target="_self">Инструменты разработчика</a>

В данном примере мы в куске кода ищем теги <a> и на выходе получаем массив из 3 элементов.

Параметр Тип элемента

Обязательный параметр, в котором указывается тип тега, который мы ищем. Может указываться любое значение - не только стандартные теги, но вообще любой тег. Например, в приведенном ниже куске XML мы можем искать тег matchCollectionId

Действие Параметр Значение
HTML: Поиск тегов Тип элемента matchCollectionId
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат
<tournament><id>72040</id><type>fantasy</type><userId></userId><whiteLabelId>1</whiteLabelId><matchCollectionId>7347</matchCollectionId><maxPlayersPerTeam>3</maxPlayersPerTeam><name>Full Round </name><buyIn>10.00</buyIn><freeroll>False</freeroll><substitutes>1</substitutes></tournament>
 
<matchCollectionId>7347</matchCollectionId>

Отдельно стоит указать, что можно использовать значение первого параметра - Any Tag - это значит, что будет искаться любой тег, удовлетворяющий условиям 2 и 3 параметров Действия.

Параметры Название проверяемого атрибута и Значение проверяемого атрибута

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

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута class
Значение проверяемого атрибута Main
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span class="Main">Поиск HTML тегов</span>
<span class="NotMain">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>
<span>Поиск HTML тегов</span>
<tr id="Main">Поиск HTML тегов</tr>
 
<span class="Main">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>

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

Если, например, класс состоит из нескольких слов, то не обязательно указывать его полностью. Достаточно, чтобы искомое слово (3 параметр) был отделен пробелом от остальных слов в классе.

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута class
Значение проверяемого атрибута row
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span class="row row-first">Поиск HTML тегов</span>
<span class="row row-second">Поиск HTML тегов</span>
<span class="end row">Поиск HTML тегов</span>
<span class="row-row-first">Поиск HTML тегов</span>
<span class="rowrow row-first">Поиск HTML тегов</span>
 
<span class="row row-first">Поиск HTML тегов</span>
<span class="row row-second">Поиск HTML тегов</span>
<span class="end row">Поиск HTML тегов</span>

Находятся все теги, где в классе "row" встречается как отдельное слово.

Если к третьему параметру добавить в начале и/или в конце *, то это будет означать "любые символы до и/или после" соответственно.

Чтобы звездочка сработала внутри значения, надо использовать два символа: точку и звездочку .*

 

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута class
Значение проверяемого атрибута *Main
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span class="Main">Поиск HTML тегов</span>
<span class="NotMain">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>
<span>Поиск HTML тегов</span>
<tr id="Main">Поиск HTML тегов</tr>
 
<span class="Main">Поиск HTML тегов</span>
<span class="NotMain">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>

Находится не только класс Main, но и NotMain, который удовлетворяет условию *Main

Также в 3 параметре могут быть записаны регулярные выражения. Например:

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута class
Значение проверяемого атрибута (First|Second)
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span class="First">Поиск HTML тегов</span>
<span class="Second">Поиск HTML тегов</span>
<div class="First">Поиск HTML тегов</div>
<tr id="First">Поиск HTML тегов</tr>
<span class="Third">Поиск HTML тегов</span>
<li class="Second">Поиск HTML тегов</li>
<div class="Third">Поиск HTML тегов</div>
 
<span class="First">Поиск HTML тегов</span>
<span class="Second">Поиск HTML тегов</span>
<div class="First">Поиск HTML тегов</div>
<li class="Second">Поиск HTML тегов</li>

Здесь ищутся классы First или Second.

В первый параметр Действия также можно записать поиск нескольких тегов при помощи аналогичного формата, например, (span|div) но это редко используется.

Третий параметр может использоваться отдельно (c пустым вторым)

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута  
Значение проверяемого атрибута Main
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span class="Main">Поиск HTML тегов</span>
<span class="NotMain">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>
<span>Поиск HTML тегов</span>
<tr id="Main">Поиск HTML тегов</tr>
 
<span class="Main">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>
<tr id="Main">Поиск HTML тегов</tr>

Обратите внимание, здесь дополнительно получен тег с id Main.
А вот заполненный второй параметр без третьего работать не будет.

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута class
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат
<span class="Main">Поиск HTML тегов</span>
<span class="NotMain">Поиск HTML тегов</span>
<div class="Main">Поиск HTML тегов</div>
<span>Поиск HTML тегов</span>
<tr id="Main">Поиск HTML тегов</tr>
  (пустая строка)

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

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута data
Значение проверяемого атрибута (First|Second)
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span data="First">Поиск HTML тегов</span>
<span class="Second">Поиск HTML тегов</span>
<div data="First">Поиск HTML тегов</div>
<tr id="First">Поиск HTML тегов</tr>
<span data="Third">Поиск HTML тегов</span>
<li class="Second">Поиск HTML тегов</li>
<div class="Third">Поиск HTML тегов</div>
 
<span data="First">Поиск HTML тегов</span>
<div data="First">Поиск HTML тегов</div>

Также во втором параметре заслуживает внимания спец. значение AttributesPattern. Кратко его можно охарактеризовать как наличие в атрибутах определенной последовательности символов. Например:

Действие Параметр Значение
HTML: Поиск тегов Тип элемента Any Tag
Название проверяемого атрибута AttributesPattern
Значение проверяемого атрибута data
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат (массив)
<span big-data="First">Поиск HTML тегов</span>
<span data-class="Second">Поиск HTML тегов</span>
<div notonlydata="First">Поиск HTML тегов</div>
<tr id="First" id="Second">Поиск HTML тегов</tr>
<span data="Third">Поиск HTML тегов</span>
<li class="data">Поиск HTML тегов</li>
<div class="Third">Поиск HTML тегов</div>
 
<span big-data="First">Поиск HTML тегов</span>
<span data-class="Second">Поиск HTML тегов</span>
<div notonlydata="First">Поиск HTML тегов</div>
<span data="Third">Поиск HTML тегов</span>
<li class="data">Поиск HTML тегов</li>

Здесь находятся все теги, где в атрибутах есть сочетание букв data. Можно было бы задать 3 параметр = "First", тогда нашлось бы всё с таким сочетанием букв в атрибутах.

При наличии в проверяемых атрибутах слов на русском языке Действие может не срабатывать. Попробуйте 2 параметр AttributesPattern

Параметр Тип результата / извлекаемый атрибут

Четвертый параметр имеет нестандартный синтаксис: обязательное первое слово (outerHTML, например), к которому может быть дописано необязательное второе слово или число (join, 5, last, например).

Обязательное первое слово может быть зарезервированным (Тип результата) или произвольным (Извлекаемый атрибут). Зарезервированные слова имеют свои функции, вот они:

  • outerHTML - берет тег целиком
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут outerHTML
 
Исходное значение   Результат
<div><span><a href="/parser">Парсер</a></span></div>
 
<span><a href="/parser">Парсер</a></span>
  • innerHTML - берет содержимое тега
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут innerHTML
 
Исходное значение   Результат
<div><span><a href="/parser">Парсер</a></span></div>
 
<a href="/parser">Парсер</a>
  • ConvertToText - преобразует содержимое тега в текст.
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут ConvertToText
 
Исходное значение   Результат
<div><span><a href="/parser">Парсер</a></span></div>
 
Парсер
  • DeleteTags - удаляет тег
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут DeleteTags
 
Исходное значение   Результат
<div><span><a href="/parser">Парсер</a></span></div>
 
<div></div>
  • ReplaceTagWithItsText - заменяет тег на содержащийся в нем текст
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут ReplaceTagWithItsText
 
Исходное значение   Результат
<div><span><a href="/parser">Парсер</a></span></div>
 
<div>Парсер</div>
  • TagHeaderOnly - берет открывающий тег целиком.
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут TagHeaderOnly
 
Исходное значение   Результат
<div><span class="Data"><a href="/parser">Парсер</a></span></div>
 
<span class="Data">

Все остальные слова относятся к произвольным, они возвращают значение искомого атрибута. Помимо вариантов из выпадающего списка (content, href, src, value, data), могут быть вписаны свои варианты. Например:

Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут big-source-photo
 
Исходное значение   Результат
<div><span class="Data" id="Link" big-source-photo="/1.jpg"><a href="/parser">Парсер</a></span></div>
 
/1.jpg

К произвольному слову может быть дописано выражение "_with_prefix", которое указывает на то, что к результату надо дописать зарезервированную переменную %WebSiteURL%, попросту говоря, домен сайта, который был загружен в этой же настройке одним из первых действий. Есть возможность выбрать в выпадающем списке готовые варианты href_with_prefix, src_with_prefix. 

Действие Параметр Значение
HTML: Поиск тегов Тип элемента a
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут href_with_prefix
 
Исходное значение   Результат
<div><span id="Link"><a href="/parser">Парсер</a></span></div>
 
http://excelvba.ru/parser

Выражение "_with_prefix" может быть дописано к любому произвольному слову:

Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут big-source-photo_with_prefix
 
Исходное значение   Результат
<div><span class="Data" id="Link" big-source-photo="/1.jpg"><a href="/parser">Парсер</a></span></div>
 
http://excelvba.ru/1.jpg

После пробела к первому обязательному слову может быть дописано необязательное зарезервированное слово или число:

  • join - объединяет массив результатов в строку с разделителем равным переводу строки. Обратите внимание, в примере получен не массив значений (тогда бы в скобках стояло "Массив"), а строка.
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут ConvertToText join
 
Исходное значение   Результат
<span>Парсер 1</span>
<span>Парсер 2</span>
<span>Парсер 3</span>
<span>Парсер 4</span>
 
Парсер 1
Парсер 2
Парсер 3
Парсер 4
  • last - последний найденный элемент массив
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут ConvertToText last
 
Исходное значение   Результат
<span>Парсер 1</span>
<span>Парсер 2</span>
<span>Парсер 3</span>
<span>Парсер 4</span>
 
Парсер 4
  • last-1 - предпоследний элемент массива, вместо единицы можно указывать любую цифру
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут ConvertToText last-1
 
Исходное значение   Результат
<span>Парсер 1</span>
<span>Парсер 2</span>
<span>Парсер 3</span>
<span>Парсер 4</span>
 
Парсер 3
  • Если просто указывается число, то берется элемент массива с таким порядковым номером
Действие Параметр Значение
HTML: Поиск тегов Тип элемента span
Название проверяемого атрибута  
Значение проверяемого атрибута  
Тип результата / извлекаемый атрибут ConvertToText 2
 
Исходное значение   Результат
<span>Парсер 1</span>
<span>Парсер 2</span>
<span>Парсер 3</span>
<span>Парсер 4</span>
 
Парсер 2

 

Примечания и рекомендации по использованию

  • Если html-код на странице некорректный, например, количество открывающих тегов не равно количеству закрывающих тегов (например, <div> больше, чем </div>), то Действие может работать некорректно. В этом случае  (это встречается ОЧЕНЬ редко, примерно на 1 сайте из 1000) можно воспользоваться одним из действий категории "Неиспользуемые", например "# HTML: Поиск тегов по имени класса" или "# HTML: Поиск заданных тегов". Они используют другой алгоритм работы и способны находить "незакрытые" теги. Однако постоянное их использование нежелательно ввиду того, что они потребляют оперативную память, что может привести к проблемам с функционированием программы (впрочем, встречается это крайне редко).
     
  • Если страница содержит закомментированные куски кода <!-- комментарий -->, то Действие может находить в том числе те теги, которые находятся внутри комментариев, и не отображаются на странице. Это может вызвать сложности в определенных случаях. Чтобы этого избежать вы можете использовать предварительно действие HTML: Удаление тегов / комментов. Однако на большинстве сайтов это не требуется.
     
  • Если страница очень большая, а одинаковых тегов много (например, карта сайта sitemap.xml, содержащая 20 тысяч тегов <loc>, из которых нужно взять ссылки на страницы), то скорость работы Действия существенно снижается. Зачастую вместо этого можно воспользоваться текстовой функцией "Взять блоки текста МЕЖДУ ..." (особенно, когда речь про XML карту сайта, где теги без атрибутов), — скорость работы существенно возрастет.

Комментарии

Игорь, просто извлекаете значение атрибута style (4-q параметр действия)
Получите на выходе действия background-image: url(https://image/url/pic.png)
Ну а дальше - текстовой функцией «Взять блоки текста между» — между ( и )

Игорь спасибо за ваш продукт!
Вопрос встал следующий. Как забрать картинку из тега style?
style="background-image: url(https://image/url/pic.png;")
Спасибо!

Тег ins программа не знает? Параметр Any Tag показывает результат, в котором этого тега нет.

Ну так надо указать не только название атрибута (class), но и значение атрибута (третий параметр - название класса)
Или найденный div может быть пустым, если тип результата innerHTML

Почему результат обработки - пустое значение? Что это значит?
Например, параметр div находит энное количество элементов, указываем название проверяемого атрибута: class, всё, уже пишет: результат обработки пустое значение.

Если предварительно парсер загрузил хоть одну страницу сайта, - префикс будет подставляться.
Если же зайти в настройки парсера, и сразу тестировать это действие на готовом HTML коде, - то префикс не подставится (парсер не знает в этот момент, какой сайт парсится, и потому не знает какой префикс подставлять)
А когда парсер выполнил загрузку какой-либо страницы, - он запоминает этот префикс.

пытаюсь взять ссылку на картинку(src). в типе результата указал "src_with_prefix", но префикс не добавляется и результат остаётся прежним

А в чем сложность?
Первый параметр — a
Четвёртый параметр — href

Здравствуйте! Подскажите как извлечь тег если ссылка имеeт путь a href=1111 title=

Подскажите пожалуйста, как можно из тега ниже, можно получить значение аттрибута notonlydata. То есть, что бы получить в выходных данных значение First?
Пример тега.
<div notonlydata="First">Поиск HTML тегов</div>

Ну так и укажите, поставив notonlydata в четвертый параметр действия

Подскажите пожалуйста, как можно из тега ниже, можно получить значение аттрибута notonlydata. То есть, что бы получить в выходных данных значение First?
Пример тега.
Поиск HTML тегов"