Xpath получить все до определенного елемента.
и мне нужно оттуда дёрнуть все до
see also
то есть суть такая что есть некий контент и обычно он в каком то теге с каким то id или class тут же сделано не так и много чего лишнего идет. и мне ето не нужно можно как то отфильтровать лишнее?
На сайте с 08.02.2010
9 июня 2020, 15:57
lutskboy:
кто знает
можно как то отфильтровать лишнее?
можно! одно но я не знаю что такое xpath но я вижу текст и знаю возможности JS, php, с++, что позволило мне дать такой ответ.
На сайте с 22.11.2013
9 июня 2020, 16:01
Anamnado:
я не знаю что такое xpath
значит ета тема не для вас
На сайте с 08.02.2010
9 июня 2020, 16:02
не факт я уже вбил это слово в поиск и читаю. — есть [xpath — обычный текстовый файл с определенным языком разметки, (возможно он же xml но мне это уже не важно)] ок — ответ я дал и уверен в нем на все 102% — удачи! [ Вам советую дописать к вопросу — «если да то как».. или теперь уже можно без «еcли да» ]
Как с помощью XPath получить значение между двумя тэгами
Как с использованием XPath получить значение текста «some_text_3» ? Только XPath без кода на ЯП — решение в одну строку вида //node/. /text() .
Отслеживать
задан 19 июл 2015 в 7:53
43 1 1 серебряный знак 7 7 бронзовых знаков
Это именно текст или набор тэгов? — Это совершенно разные вопросы и ответы
19 июл 2015 в 7:55
Это обычный текст
19 июл 2015 в 7:58
Мой ответ продолжает работать 🙂
19 июл 2015 в 9:10
Суть проблемы была в самом вопросе — «между двумя тэгами». Пример же описывал один из многих сценариев. Ваше решение работает для конкретного примера, представленного ранее. Изменил содержание примера, что бы оно полностью описывало проблему (суть не изменилась). Для него Ваш ответ не работает 🙁
19 июл 2015 в 10:54
Я обновил ответ
19 июл 2015 в 13:27
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
//node/text() вы получите набор из трех строк, поскольку текст разорван дочерними нодами
Text='' Text='some_text_2' Text='' UPDATE Все, что я вам могу предложить, это
//node/text()[2] но это, если он всегда второй фрагмент текста.
update2 Комментарий к ответу Дмитрия
Не знал, что text() можно рассматривать как самостоятельную единицу, а не свойство ноды — спасибо Дмитрию. Это, действительно, дает возможность правильного решения задачи. В его ответе приведено первое приближение.Для общего случая будем думать, что нужный нам текст мжт быть рассечен другими тэгами, например, так
some_text
3
Его решение даст только some_text . Чтобы действительно найти весь текст между заданными тэгами, выражение должно быть чуть сложнее
//node/sub_node_1/following-sibling::text()[following-sibling::sub_node_2] Для примера выше оно даст
Text='some_text' Text='3' XPath — примеры запросов в html для парсинга сайта
Парсим данные с сайтов при помощи XPath и Screaming Frog без помощи программистов. Синтаксис XPath для выбора, ссылка на удобное расширение для извлечения пути, примеры для парсинга любых данных + запись моего мастер-класса в гостях у Михаила Шакина.
Всем привет. Меня зовут Толстенко Александр. Я частный SEO специалист. В сфере разработки и продвижения бизнеса в интернете я с 2009 года. Ознакомиться с другими статьями, можно в профиле habr.
XPath — Что это такое
XPath (XML Path Language) — это язык запросов, используемый для навигации и поиска информации в XML-документах. Он позволяет точно указать путь к элементам, атрибутам и текстовым данным, которые нужно найти в структуре XML файлов и получить данные при необходимости.
XPath предлагает набор выражений, операторов и функций для указания конкретных путей обхода XML-деревьев и фильтрации данных с помощью различных критериев. Эти выражения состоят из элементов и операторов, которые можно комбинировать, чтобы получить нужные результаты.
Для чего нужен XPath
XPath используется для навигации и выбора элементов XML-документов. Он позволяет находить пути к элементам и их атрибутам, а также выполнять операции с ними: поиск, фильтрация, выборка.
Вот некоторые основные случаи использования XPath:
1) Поиск элементов: XPath позволяет найти определенные элементы в XML-документе с помощью путей и фильтров. Например, можно найти все элементы определенного типа или имеющие определенное значение атрибута.
2) Извлечение данных: XPath позволяет извлекать конкретные значения из XML-документа. Например, можно получить содержимое элемента или значение его атрибута.
3) Проверка условий: XPath позволяет задавать условия и проверять их в XML-документе. Например, можно проверить, что значение атрибута соответствует определенному критерию или что в XML-документе есть определенный элемент.
4) Навигация по структуре: XPath позволяет перемещаться по структуре XML-документа, находить конкретные узлы и выполнять с ними операции. Например, можно перейти к родительскому или дочернему элементу, выбрать первый или последний элемент, перейти на следующий или предыдущий элемент, а также совершать другие действия для исследования структуры XML-документа.
Использование XPath позволяет эффективно и удобно работать с XML-данными, особенно при обработке и анализе больших объемов информации.
Кому и зачем нужен Xpath
Если коротко — XPath нужен всем, кто работает с XML.
XPath широко используется в различных областях: программирование, веб-скрапинг, автоматизацию тестирования и анализ данных. Язык запросов позволяет легко и эффективно обращаться к нужным элементам в структурированных документах XML к нужным элементам, совершать какие то операции или получить необходимые данные.
Это лишь часть сценариев, в когда язык XPath может помочь — на самом деле, сценариев может быть намного больше.
Синтаксис XPath
Для выбора узлов в XML документе с помощью XPath используются выражения путей. Выборка узла производится следуя по заданному пути или по, так называемым, шагам.
Синтаксис XPath описывает правила для создания выражений, которые позволяют точно указать, какие элементы и атрибуты должны быть выбраны из XML-структуры. Точно указать, какой элемент выбрать нужно с помощью XPath можно при помощи:
2) Пути выбора элементов
3) Оси направления выбора
Выбор узлов
Чтобы выбрать нужный узел в XML документе, нужно обратиться к нему при помощи языка запросов XPath, указав путь к нужному элементу. Узел выбирается следуя по заданному пути.
Базовый синтаксис XPath для парсинга элементов:
1) * — Выбрать любой элемент.
2) [] — Найти конкретный элемент. Пример: //li[1]
имя_узла — Выбирает все узлы с указанным именем узла. Пример: div, p и т.д.
3) / — Ищет от корневого узла html
4) // — Ищет узлы в документе от текущего узла, который соответствует выбору, независимо от того, где они находятся
5) . — Ищет текущий узел
6) .. — Ищет родителя текущего узла
7) @ — Ищет нужный атрибут. Пример: //p[@value=»2008″]
Абсолютные и относительные пути обращения к элементам
К конкретному элементу можно обратиться двумя способами:
1) Абсолютным. Абсолютный xpath начинается со слеша ( / ) и указывает на полный путь от корневого узла до целевого узла.
Пример выражения в XPath: /html/body/div[1]/h1
Конструкция означает: «выбрать первый элемент div, который находится по пути html > body > div и затем выбрать его дочерний элемент h1».
2) Относительным. Относительный путь начинается с двух слешей (//) и указывает на путь от любого узла, который соответствует определенным критериям, до целевого узла. Пример: //div[@id=’main’]
Конструкция означает: «выбрать любой элемент div, который имеет атрибут id со значением ‘main'».
Общие функции XPath
Язык XPath имеет набор встроенных функций, которые позволяют осуществлять различные операции с XML-документами. Вот некоторые из основных функций XPath:
1) text() — возвращает текстовое содержимое элемента.
2) count() — возвращает количество элементов, соответствующих указанному выражению.
3) normalize-space() — удаляет лишние пробелы из строки и заменяет последовательности пробелов на одиночные пробелы.
4) starts-with(x,y) — проверяет, начинается ли строка с x-y.
5) contains(x,y) — проверяет, содержит ли строка x-y.
6) last() — возвращает последнюю позицию элемента в выборке.
7) position() — возвращает позицию текущего элемента в выборке.
8) name() — возвращает имя текущего элемента.
9) sum() — суммирует значения элементов выборки.
10) string() — преобразует узел в строку.
11) lower-case() — преобразует текст в нижний регистр.
12) @attribute — выбирает значение указанного атрибута.
13) concat() — объединяет две или более строки.
14) string-length() — возвращает длину строки.
15) substring() — возвращает подстроку из строки, начиная с указанной позиции.
Кроме этих основных функций, XPath также предоставляет более сложные функции, такие как функции математических операций (например, floor(), round(), sum()), функции работы с датами и временем и другие.
Оси XPath
Ось в XPath — это специальная концепция, которая используется для указания направления движения при поиске элементов в документе. Оси позволяют выбирать элементы, которые относятся к определенным отношениям с другими элементами в дереве XML или HTML.
В XPath есть несколько осей, которые можно использовать при создании выражений:
1) child::note — Выбирает все узлы note, которые являются прямыми потомками текущего узла
2) attribute::date — Выбирает атрибут date текущего узла
3) child::* — Выбирает всех прямых потомков текущего узла
4) attribute::* — Выбирает все атрибуты текущего узла
5) child::text() — Выбирает все текстовые узлы текущего узла
6) child::node() — Выбирает всех прямых потомков текущего узла
7) descendant::note — Выбирает всех потомков note текущего узла
8) ancestor::note — Выбирает всех предков note текущего узла
9) ancestor-or-self::note — Выбирает всех предков note текущего узла, а также сам текущий узел, если это узел note
10) child::*/child::heading — Выбирает всех прямых потомков прямых потомков (“внуков») heading текущего узла
11) last() — Выделяет последний элемент в дереве.
Предикаты (Коллекции)
Предикаты — конструкции, которые используются для фильтрации элементов и выбора конкретных элементов с помощью определенных условий.
Вот несколько примеров использования предикатов в XPath для :
1) //a — Выберите все элементы в документе
2) //a[@class=’active’] — Выберите все элементы, у которых атрибут class равен «active»
3) //input[@type=’checkbox’] — Выберите все элементы input, у которых атрибут type равен «checkbox»
4) //input[@type=’text’] — Выберите все элементы input с атрибутом type равным «text»
5) //p[contains(text(), ‘Lorem’)] — Выберите все элементы, у которых текст содержит слово «Lorem»
6) //div[count(p) > 3] — Выберите все элементы, у которых количество дочерних элементов больше 3
7) //a[starts-with(@href, ‘https://’)] — Выберите все элементы, у которых атрибут href начинается с «https://»
8) //input[matches(@value, ‘^\d+$’)] — Выберите все элементы input, у которых атрибут value содержит только цифры
9) //p[@value=»01/2008″] — Выбирает все элементы p, у которых есть атрибут value со значением «01/2008»
10) //p[@value] — Выбирает все элементы p, у которых есть атрибут value
11) //p/text() — Выделит все текстовые узлы внутри всех элементов p
12) //div[not(p)] — Выберите все элементы
, у которых не существует дочернего элемента
14) //tag[position()=1] — Выбирает первый элемент с тегом «tag»
15) /div/ul/li[1] — Выбирает первый элемент li, который является прямым потомком элемента ul в div
16) //li[a] — Выделяет элементы li, в которых есть элемент a
17) //li[last()] — Выделяет последний элемент li в документе
18) //a | //h2 — Выделить все элементы a и h2 с помощью оператора объединения |
19) //tag[@value > 9] — Получить узлы tag, value которых больше 9-ти.
20) //div[note[@value > 9]]/а — Получить только имена узлов, value которых больше 9-ти
21) //div[4]/h2[text() = «Текст»] — Выделит четвертый элемент div, h2 которого содержит слово: Текст
22) /div/note[last()] — Выбирает последний элемент note, который является прямым потомком элемента div
23) /div/note[last()-1] — Выбирает предпоследний элемент note, который является прямым потомком элемента div
24) //*[@id] — Выберите все элементы с атрибутом id
25) //div[contains(@class, ‘content’)]/p — Выберите все элементы, которые являются дочерними элементами с классом «content»
26) //img[contains(@src, ‘logo’)] — Выберите все элементы , у которых атрибут src содержит слово «logo»
27) //*[@href[contains(text(), ‘.pdf’)]] — Выберите все элементы со значением атрибута href, оканчивающимся на .pdf
28) //*[@data-toggle=’modal’] — Выберите все элементы с атрибутом data-toggle и значением «modal»
29) //tag[@attribute>5] — Выбирает все элементы с тегом «tag» и атрибутом «attribute», значение которого больше 5
30) //tag[@attribute=»value»] — Выбирает все элементы с тегом «tag» и атрибутом «attribute» со значением «value»
Это лишь некоторые примеры запросов для получения данных. Существует много других комбинаций формирования запросов XPath.
Какие данные можно извлечь с сайта при помощи XPath и парсера
XPath и парсеры могут извлекать различные данные с веб-сайтов. Вот несколько типов данных, которые можно получить при помощи этих инструментов:
- Количество товаров в категориях;
- Описание, характеристики и цену товара;
- Изображения;
- Наличие и количество отзывов;
- Количество просмотров статей;
- Количество лайков у статей;
- Почтовые ящики;
- Хлебные крошки;
- Страницы с видео;
- Какие страницы, имеют сколько отзывов;
- На каких страницах размещен определенный текстовый блок или нет;
- Даты публикаций статей или товаров;
- Рейтинги товаров или статей.
Это лишь некоторые примеры того, что можно извлечь с помощью XPath. Фактически, вы можете извлекать любые данные или атрибуты, доступные на веб-странице в зависимости от ее структуры и организации информации.
Формулы по извлечению HTML атрибутов которые будут полезны СЕОшникам
1) //@href — Извлечь все ссылки
2) //a[starts-with(@href,’mailto’)]/@href — Получить ссылки, которые содержат “mailto” (email адрес)
3) //a[contains(@href,’tel:’)]/@href — Получить все телефоны
4) //img/@src — Получить все URL адреса картинок
5) //img[contains(@class,’name-class’)]/@src — Получить все URL адреса источников изображений с именем класса
6) //div[@class=’class’] — Получить элементы в тегах с определенным классом, указанным в кавычках
7) count(//h2) — Посчитать количество элементов на странице
8) //*[@itemtype]/@itemtype — Извелчь какие типы микроразметок есть на странице
9) //*[@itemprop=’price’]/@content — Узнать значение поля свойства разметки
10) //iframe[contains(@src,’https://www.youtube.com/’)]/@src — Найти ссылки на все видео с ютуба
11) //table[@class=’product-table’]//td/text() — Извлечь текст всех ячеек таблицы с классом «product-table»
12) //td[contains(text(),’Weight’)]/following-sibling::td — Извлечение данных из ячеек таблиц
13) contains(//meta[@name=’description’]/@content, ‘таргетированное-ключевое-слово’) — Проверяет наличие ключевого слова в мета теге
14) //link[@rel=’amphtml’]/@href — Получить URL-адрес AMP
15) //form[*]/input[@type=’text’]/@name — Имена всех текстовых полей внутри форм
Это далеко не весь список, чего можно достать с сайта конкурента. Более того, в конкретном случае, синтаксис будет разный. Составить формулу можно при помощи расширения XPath Helper или нажав правой кнопкой на html элементе и выбрать скопировать XPath
Как извлечь данные при помощи XPath со страницы
Для извлечения данных со страниц, я использую расширение «XPath Helper».
2) После установки, обновите страницу или откройте новую вкладку и перейдите на любую веб-страницу.
3) Нажмите Ctrl-Shift-X (или Command-Shift-X в OS X) или нажмите кнопку XPath Helper на панели инструментов, чтобы открыть консоль XPath Helper.
3) Удерживая нажатой клавишу Shift, наведите указатель мыши на элементы на странице. Поле запроса будет постоянно обновляться, чтобы отображать запрос XPath для элемента под указателем мыши, а в окне результатов будут отображаться результаты для текущего запроса.
4) При желании отредактируйте XPath-запрос прямо в консоли. В окне результатов немедленно отразятся ваши изменения.
5) Повторите шаг (3), чтобы закрыть консоль.
Если консоль вам мешает, удерживайте нажатой клавишу Shift, а затем наведите на нее указатель мыши; он переместится на противоположную сторону страницы.
Что можно сделать с помощью Screaming Frog SEO Spider
Запись можно посмотреть на канале Михаила Шакина тут.
На этом все, спасибо за внимание.
Есть, чем поделиться или дополнить? Буду только рад! Пишите в комменты. Спасибо.
Введение в XPath
Язык разметки XML с самого первого стандарта окружает пользователей компьютеров. Таблицы в Excel, выгрузки из интернет-магазинов, RSS-ленты с новостями — все это основано на XML. Хоть визуальное отображение отличается на устройствах и в программах, но в основе всегда лежит единый формат.
Внутри XML-файла может находиться огромное количество информации, поэтому и встает вопрос о перемещении и выборке внутри документа. Как это сделать быстро? Какие средства применять, чтобы в интернет-магазине найти нужный товар из десятков тысяч других? Для навигации и поиска внутри XML используется язык запросов XPath.
В этой статье разберем:
- для кого может быть полезен XPath
- базовые конструкции языка для поиска информации в XML
- чем XPath отличается от CSS-селекторов при поиске в HTML
- Синтаксис XPath
- Отличия от CSS-селекторов
- Кому нужен Xpath
- Заключение
Синтаксис XPath
Для начала создадим базовый пример XML, с которым и будем работать весь урок. Например, список курсов по верстке на Хекслете в XML будет выглядеть так:
courses > title >Курсы HTML и CSS (верстка) title > description >На курсах по верстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. description > course > name >Основы современной верстки name > tags >HTML5, CSS, DevTools, верстка tags > duration value="9 ">9 часов duration > url lang="ru ">https://ru.hexlet.io/courses/layout-designer-basics url > url lang="en ">https://hexlet.io/courses/layout-designer-basics url > course > course > name >Основы верстки контента name > tags >CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка tags > duration value="18 ">18 часов duration > url lang="ru ">https://ru.hexlet.io/courses/css-content url > url lang="en ">https://hexlet.io/courses/css-content url > course > course > name >Bootstrap 5: Основы верстки name > tags >Bootstrap 5, Адаптивность, HTML, CSS3 tags > duration value="10 ">10 часов duration > url lang="ru ">https://ru.hexlet.io/courses/bootstrap_basic url > url lang="en ">https://hexlet.io/courses/bootstrap_basic url > course > courses > Это учебный пример, но для отработки навыков XPath подойдет и любой другой XML. Принципы XPath сохранятся при любой структуре файла, потому что по стандарту XML можно использовать элементы с произвольными тегами.
Для тестирования результата подойдут такие онлайн-сервисы, как:
Абсолютные пути
Самый простой запрос состоит из обращения к корневому элементу. Для этого достаточно выполнить запрос /courses . Нам вернется XML в почти таком же виде, что и в примере выше. Обратите внимание на строку . Она отличается, потому что элемент не внутри :
courses > title >Курсы HTML и CSS (верстка) title > description >На курсах по верстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. description > course > name >Основы современной верстки name > tags >HTML5, CSS, DevTools, верстка tags > duration value="9 ">9 часов duration > url lang="ru ">https://ru.hexlet.io/courses/layout-designer-basics url > url lang="en ">https://hexlet.io/courses/layout-designer-basics url > course > course > name >Основы верстки контента name > tags >CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка tags > duration value="18 ">18 часов duration > url lang="ru ">https://ru.hexlet.io/courses/css-content url > url lang="en ">https://hexlet.io/courses/css-content url > course > course > name >Bootstrap 5: Основы верстки name > tags >Bootstrap 5, Адаптивность, HTML, CSS3 tags > duration value="10 ">10 часов duration > url lang="ru ">https://ru.hexlet.io/courses/bootstrap_basic url > url lang="en ">https://hexlet.io/courses/bootstrap_basic url > course > courses > В качестве результата XPath возвращает узлы XML-документа.
Продолжим цепочку и обратимся к описанию из элемента . Для этого добавим в запрос путь к description : /courses/description . Результатом выполнения станет:
description >На курсах по верстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. description > Путь, который строится от корневого элемента, называется абсолютным. Используем схему из прошлого запроса и обратимся к любому элементу внутри XML.
Попробуем обратиться к имени курса. В этом случае вернется поле из всех курсов. Запрос /courses/course/name вернет:
name >Основы современной верстки name > name >Основы верстки контента name > name >Bootstrap 5: Основы верстки name > Вот список некоторых базовых запросов и их результат:
| Запрос | Результат |
|---|---|
| /courses/course | Все данные из всех элементов |
| /courses/course/name | |
| /courses/course/duration |
Относительные пути
Прошлые запросы строились с помощью абсолютных путей — то есть мы указывали полный путь до информации. Бывают ситуации, когда полный путь не подходит: например, мы хотим обраться к какому-то уникальному полю или не знаем полный путь. В этом случае можно использовать относительный путь — он произведет поиск по всему XML и вернет узлы, подходящие под запрос.
Чтобы записать относительный путь, нужно использовать конструкцию // . После нее можно написать любое поле и получить результат. Например, //name вернет поля из всего XML:
name >Основы современной верстки name > name >Основы верстки контента name > name >Bootstrap 5: Основы верстки name > Проблема такого подхода — уникальность полей. В документах одни и те же имена полей могут обозначать разные данные в зависимости от расположения. Поэтому используйте относительные пути только там, где уверены в возвращаемых данных. Например, в нашем примере название курса может быть заключено в :
courses > title >Курсы HTML и CSS (верстка) title > course > title >Основы современной верстки title > course > course > title >Основы верстки контента title > course > course > title >Bootstrap 5: Основы верстки title > course > courses > Запрос //title вернет не только имена курсов, но и узел, который находится в :
title >Курсы HTML и CSS (верстка) title > title >Основы современной верстки title > title >Основы верстки контента title > title >Bootstrap 5: Основы верстки title > Чтобы сэкономить пару секунд, разработчики опускают корневой элемент и пользуются относительными путями. Например, вместо /courses/course/name они пишут //course/name . Для практики попробуйте прошлые примеры перевести на относительные пути с помощью такого механизма.
Несколько примеров запросов с идентичными ответами, как и в прошлой таблице:
| Запрос | Результат |
|---|---|
| //course | Все данные из всех элементов |
| //name | |
| //course/duration |
Предикаты
В примерах запросов к именам возвращались имена всех найденных курсов. В некоторых ситуациях это может быть избыточно. Что делать, если хочется получить данные только по первому курсу в ? На помощь приходят предикаты — конструкции, с помощью которых можно отфильтровать элементы по заданным условиям.
Выберем ключевые слова первого курса по верстке. Для этого достаточно использовать запрос //course[1]/tags :
tags >HTML5, CSS, DevTools, верстка tags > Обратите внимание на [1] . Это предикат с таким условием: «Взять элемент по индексу 1». Попробуйте сделать запрос ко второму или третьему элементу. Достаточно поменять всего одну цифру!
В XPath индексы элементов начинаются с единицы, а не с нуля, как в принятых стандартах программирования. Если вы уже программируете, это может немного запутать.
Предикаты помогают делать точные выборки. Например, получить ссылки на русскоязычные страницы курсов. Для этого нужно получить элементы , у которых атрибут lang равен ru . Делается это указанием атрибута и значения. Чтобы XPath отличил атрибут от элемента перед атрибутом указывается символ @ .
Теперь запрос будет выглядеть так: //course/url[@lang=»ru»]
url lang="ru ">https://ru.hexlet.io/courses/layout-designer-basics url > url lang="ru ">https://ru.hexlet.io/courses/css-content url > url lang="ru ">https://ru.hexlet.io/courses/bootstrap_basic url > Иногда полезно выбрать элементы, которые имеют хоть какой-то атрибут. Для этого можно использовать конструкцию //*[@*] :
duration value="9 ">9 часов duration > url lang="ru ">https://ru.hexlet.io/courses/layout-designer-basics url > url lang="en ">https://hexlet.io/courses/layout-designer-basics url > duration value="18 ">18 часов duration > url lang="ru ">https://ru.hexlet.io/courses/css-content url > url lang="en ">https://hexlet.io/courses/css-content url > duration value="10 ">10 часов duration > url lang="ru ">https://ru.hexlet.io/courses/bootstrap_basic url > url lang="en ">https://hexlet.io/courses/bootstrap_basic url > По примеру выше видно, знак * обозначает «все/любой».
Когда выбраны элементы по атрибутам, можно произвести дополнительную фильтрацию по этим значениям. Например, найдем элементы со значением атрибута value больше 9 . Внутри предикатов используются операторы сравнения, знакомые по языкам программирования:
Запрос будет выглядеть так: //course/duration[@value > 9] :
duration value="18 ">18 часов duration > duration value="10 ">10 часов duration > Мы разобрались, как выбирать одно поле — это интересная, но редкая задача. Чаще разработчики обрабатывают данные по всему файлу или нескольким полям. Попробуем одновременно использовать предикат и обратиться к другим полям. Обратите внимание на два момента:
- Предикат необязательно должен идти в конце запроса
- Внутри предиката могут находиться новые пути, которые нужно проверить
Мы уже знаем, как с помощью предиката отфильтровать данные по полю . Эту задачу мы выполняли с помощью конструкции duration[@value > 9] . А теперь попробуем сделать эту конструкцию предикатом для . Так мы получим данные о курсах с длительностью больше 9 часов: //course[duration[@value > 9]] :
course > title >Основы верстки контента title > tags >CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка tags > duration value="18 ">18 часов duration > url lang="ru ">https://ru.hexlet.io/courses/css-content url > url lang="en ">https://hexlet.io/courses/css-content url > course > course > title >Bootstrap 5: Основы верстки title > tags >Bootstrap 5, Адаптивность, HTML, CSS3 tags > duration value="10 ">10 часов duration > url lang="ru ">https://ru.hexlet.io/courses/bootstrap_basic url > url lang="en ">https://hexlet.io/courses/bootstrap_basic url > course > Можно продолжить этот запрос и получить только имена курсов. Тогда предикат будет в середине запроса, а не в его конце: //course[duration[@value > 9]]/name
name >Основы верстки контента name > name >Bootstrap 5: Основы верстки name > Функции
В прошлых примерах запросы затрагивали теги и атрибуты. Сами данные мы не затрагивали, хотя это огромный пласт информации, по которой можно делать выборки. Для решения этой задачи используются встроенные в XPath функции. Они являются частью предикатов — например, @ . Попробуем найти курс с названием «Основы верстки контента».
Для поиска по тексту внутри элемента используется функция text() . Ее задача — получить текстовое значение элемента и сравнить его с условием по необходимости. Вот как будет выглядеть запрос для поиска курса с нужным именем: //course[name[text()=»Основы верстки контента»]]
course > name >Основы верстки контента name > tags >CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка tags > duration value="18 ">18 часов duration > url lang="ru ">https://ru.hexlet.io/courses/css:content url > url lang="en ">https://hexlet.io/courses/css:content url > course > Но что, если нам известно только часть названия? Для этого существует функция contains() , которая принимает два аргумента:
- Строка, где будет производиться поиск
- Подстрока, которая будет искаться
Для примера найдем курс, у которого в ключевых словах есть слово «Bootstrap». Функция примет текстовое значение элемента tags и найдет там слово «Bootstrap»: //course[tags[contains(text(), «Bootstrap»)]]
course > name >Bootstrap 5: Основы верстки name > tags >Bootstrap 5, Адаптивность, HTML, CSS3 tags > duration value="10 ">10 часов duration > url lang="ru ">https://ru.hexlet.io/courses/bootstrap_basic url > url lang="en ">https://hexlet.io/courses/bootstrap_basic url > course > В стандарте XPath существует еще несколько функций, но цель статьи — показать принципы работы тех или иных механизмов, а не дать исчерпывающую документацию по всему языку.
Отличия от CSS-селекторов
Если вы писали на JavaScript, то знаете, что элементы можно искать с помощью CSS-селекторов, используя методы querySelector() или querySelectorAll() . Почему же разработчики иногда ищут элементы внутри HTML именно с помощью XPath?
Дело в концепции поиска элементов. Используя CSS, можно идти только в глубину без возможности обратиться к родительским элементам. В отличие от CSS, XPath позволяет в любой момент обращаться и к дочерним, и к родительским элементам.
Если вы хотите подробнее изучить поиск по HTML с помощью XPath, рекомендуем обратиться к статье Introduction to using XPath in JavaScript.
С помощью CSS нельзя найти все элементы div , внутри которых есть ссылки — можно найти сами ссылки, но не их родителей. XPath позволяет это сделать простым сочетанием div[a] . Постепенно ситуация меняется: в CSS появился селектор :has() , но он поддерживается еще не всеми новыми версиями браузеров. Со временем это изменится, но пока реальность именно такая.
Другой пример — поиск элементов по тексту внутри них. С этой задачей CSS никогда не справится, так как такой цели у него нет. XPath, как мы изучили, умеет это делать с помощью функции text() .
Кому нужен Xpath
Если коротко, Xpath нужен всем, кто работает с XML.
Чтобы разобраться подробнее, изучим несколько примеров:
SEO-специалисты. Специалисты по продвижению часто обрабатывают большие массивы данных и вытаскивают информацию со страниц сайта.
Например, для них критичны мета-теги — дополнительная информация, в которой содержатся иконки сайтов, название страницы, описание и так далее. Эту информацию SEO-специалист может автоматически парсить с помощью запросов в XPath.
Тестировщики. При работе с Front-end тестировщики часто проверяют тот или иной вывод информации на странице — для этого они выбирают отдельные элементы с нужной страницы. Это можно делать через XPath и DevTools, встроенный в браузеры на основе Chromium.
Разработчики. Они часто используют парсеры — это скрипты, которые ищут нужную информацию на страницах одного или нескольких сайтов. Например, мы хотим сравнить стоимость одного и того же товара в разных магазинах. Для такой задачи можно написать скрипт, который пройдется по всем нужным сайтам, сравнит цены и вернет данные. В этом случае для поиска информацию на странице можно использовать XPath.
Это лишь часть сценариев, в которых пригождается язык XPath — на самом деле, их десятки.
Заключение
В этой статье мы рассмотрели, где встречается XML и кому он может пригодиться. Мы научились составлять базовые запросы и изучили часто используемые конструкции XPath:
- Абсолютные и относительные пути
- Предикаты
- Поиск по атрибутам
- Операторы сравнения
- Функции
Также теперь вы знаете, что поиск по HTML с помощью XPath может быть эффективнее поиска с помощью CSS-селекторов.
В этой статье мы постарались дать знания, которые помогут справиться с большинством задач. Но это далеко не все возможности XPath — это более глубокий язык, чем представлено в статье. Как и с другими технологиями, тут важно набить руку. Чем больше вы практикуетесь, тем более точные и полезные запросы пишете.