Перейти к основному содержимому

Просмотр текста страницы

Пожалуйста, ознакомьтесь с Правилами использования материалов на данном ресурсе.

🔗 Оригинальная страница — Источник данного материала

Описание​

Этот инструмент позволяет просматривать исходный код (Source), DOM-модель и видимый текст веб-страницы, загруженной в браузере.

При использовании в проекте движка chrome

В качестве альтернативы можно применять стандартные инструменты веб-разработчика (DevTools).

Для чего это используется?​

Окно просмотра необходимо для глубокого анализа структуры страницы в следующих случаях:

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

Как открыть окно?​

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

image-20211226-162058

Принцип работы​

При нажатии на иконку инструмента открывается следующее окно:

image-20200815-142918

Выбор содержимого (1)​

Позволяет указать, в каком формате необходимо отобразить данные: DOM (выбрано по умолчанию), исходный код (Source) или видимый текст страницы.

Переносить по словам (2)​

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

Пример окна с включенным переносом строк:

image-20200815-143611

Копировать в конструктор регулярных выражений (3)​

Автоматически открывает Конструктор регулярных выражений и переносит в него всё текущее содержимое окна для дальнейшей работы и тестирования.

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

Предположим, нам нужно получить все теги <meta> с атрибутом property со страницы темы на форуме ZennoLab. Эти теги не отображаются на самой странице, поэтому найти их через Конструктор действий не получится. Вместо этого будем работать с кодом страницы.

Шаг 1. Найдите нужные теги в коде страницы​

Откройте нужную страницу и запустите окно просмотра кода.

В этом примере можно использовать как DOM, так и исходный код страницы — результат будет одинаковым.

Найдите теги <meta> с атрибутом property. На скриншоте показан один из них:

image-20200815-150735

Нужные нам теги имеют похожую структуру:

  • тег начинается с <meta property=";
  • после property указано название свойства;
  • в атрибуте content находится его значение;
  • тег заканчивается символом >.

Шаг 2. Создайте регулярное выражение​

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

(?<=<meta\ property=)"([a-z:]+)"\s+content="(.*?)"(?=>)

В нём используются две группы:

  1. ([a-z:]+) — получает значение атрибута property
  2. (.*?) — получает содержимое атрибута content

Шаг 3. Сохраните найденные значения​

Добавьте действие Обработка текста и выберите операцию Regex.

Укажите созданное регулярное выражение, выполните поиск по коду страницы и сохраните найденные значения в таблицу:

image-20200815-153331

В примере регулярное выражение применяется к DOM текущей вкладки. Содержимое страницы доступно через специальные переменные:

  • {-Page.Dom-} — DOM текущей вкладки;
  • {-Page.Source-} — исходный код страницы;
  • {-Page.Text-} — видимый текст страницы.

Другие доступные переменные можно посмотреть в Окне переменных.

Почему нужно исключить столбец 0?​

В регулярном выражении используются две группы:

([a-z:]+)
(.*?)

Однако в результате вы увидите три столбца:

  • столбец 0 содержит всё совпадение целиком;
  • столбец 1 содержит значение атрибута property;
  • столбец 2 содержит значение атрибута content.

То есть нумерация начинается с нуля. Поэтому, если полное совпадение вам не нужно, исключите столбец 0.

Посмотреть найденные группы можно на вкладке Группы в конструкторе регулярных выражений:

image-20200815-155656

Полезные ссылки​