0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>H2</h2>
<p>P</p>
<div><code>Python code</code></div>
<div><code>JS code</code></div>
<p>Example</p>

</body>
</html>

Вот есть такой HTML код.
Хочу написать XPath для выборки всех данных в тегах code, т.е. мне нужен список в конце с элементами <code>Python code</code> и <code>JS code</code>.

Проблема заключается в том, что нужен такой XPath, который бы собирал все теги code, которые вложены в дивы перед тегом p в котором text()='Example'.

Играюсь с following-sibling и preceding-sibling и не могу подобрать нужный икспас.
Спасибо.

2 ответа 2

1

Ищем code, который вложен в div, относительно которого первой следующей нодой, не содержащей дочерний code, является p с текстом Example :

//code[ancestor::div/following-sibling::*[not(.//code)][1][self::p][text()='Example']]

const xpath = "//code[ancestor::div/following-sibling::*[not(.//code)][1][self::p][text()='Example']]";

function getElementByXpath(xpathToExecute){
  var result = [];
  var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
  for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
    result.push( nodesSnapshot.snapshotItem(i) );
  }
  return result;
}

console.log( getElementByXpath(xpath) );
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>

    <code>dont touch me 1</code>
    <h2>H2</h2>
    <p>P</p>
    <div>
      <code>dont touch me 2</code>
    </div>
    <div>
      <code>dont touch me 3</code>
    </div>
    <code>dont touch me 4</code>
    <p>Example</p>
    <code>dont touch me 5</code>
    <div>
      <code>dont touch me 6</code>
    </div>
    <div>
      <code>dont touch me 7</code>
    </div>
    <p>Invalid Example</p>
    <div>
      <code>Python code</code>
    </div>
    <div>
      <code>JS code</code>
    </div> 
    <p>Example</p>
  </body>
</html>

2
  • 1
    добавьте или перенесите <div><code>Python code</code></div> <div><code>JS code</code></div> <code>dont touch me 3</code> <p>Example</p> в конец и посмотрите, что получится
    – splash58
    28 сен 2019 в 13:01
  • Спасибо; пофиксил-отредактировал
    – fpsthirty
    28 сен 2019 в 20:46
1

Ищем div'ы, за которыми сразу следует параграф с текстом Example, и берем дочерние code

//div[following-sibling::p[1][text()='Example']]/code
2
  • Заметка: в вашем случае разыскивается не первая нода после div, а первая нода параграфа, т.е. игнорируются все ноды между дивом и первым параграфом. Правда, тут на усмотрение автора: вдруг нет нужды в данной дотошности.
    – fpsthirty
    28 сен 2019 в 20:53
  • да, первый после див параграф. Я не знаю, правильнее ли будет following-sibling::*[1][name() = 'p' and text()='Example'] - это html, там все что угодно, включая текстовые ноды, может быть
    – splash58
    28 сен 2019 в 21:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.