Как я могу получить HTML элементов между двумя независимыми тегами

Question

Я использую кукловод. У меня есть ситуация, когда мне нужно получить контент между двумя тегами, которые не находятся в отношениях родитель-потомок.

<h1>neverchangeA<h1>
<span>abc<span>
<span>abc2<span>
<h1>neverchangeB<h1>

Ожидаемые элементы

<span>abc<span>
<span>abc2<span>

Проще говоря, мне нужно что-то вроде регулярное выражение, подобное этому:

regex.matchBetween(<h1>neverchangeA<h1>,<h1>neverchangeB<h1>)

Answer 1

Получение родственного брата elementHandle в Puppeteer объясняет, как получить предыдущего брата элемента с кукольником. Есть аналогичная функция для получения следующего брата элемента. Вы можете применить это к своей ситуации, написав al oop, который начинается с первого элемента <h1>, а затем многократно получает следующего брата, пока вы не дойдете до второго элемента <h1>.

Answer 2

Решение с использованием XPath

Это хороший вариант использования XPath . Следующий запрос ищет элементы span, у которых есть тег h1 с содержимым neverchangeA перед ними и тег h1 с содержимым neverchangeB после них:

//span[preceding::h1="neverchangeA" and following::h1="neverchangeB"]

Чтобы использовать Выражение XPath в кукловоде, используйте page.$x.

Пример кода

const spans = await page.$x('//span[preceding::h1="neverchangeA" and following::h1="neverchangeB"]');

Answer 3

Вы можете сделать это с помощью JS и метода оценки.

https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction -args

Этот пример возвращает HTML желаемых элементов в виде строки.

const result = await page.evaluate(() => {
  const h1s = [...document.querySelectorAll('h1')]
  const neverChangeA = h1s.find(elem => elem.innerText === "neverchangeA")
  if(neverChangeA){
    const siblings = [...neverChangeA.parentNode.children]
    const indexOfFirstH1 = siblings.findIndex(elem => elem.innerText === "neverchangeA")
    const indexOfSecondH1 =  siblings.findIndex(elem => elem.innerText === "neverchangeB")
    const betweenELems = siblings.slice(indexOfFirstH1 + 1, indexOfSecondH1)
    const htmlOfElems = betweenELems.map(elem => elem.outerHTML)
    const result = htmlOfElems.join('')
    return Promise.resolve(result)
  }
  else {
    return Promise.resolve(null)
 }
})
console.log(result)

Answer 4

Вы должны использовать regex . Это: <h1>.*<h1> выберет тег h1 и все, что находится между тегом. Один из способов - удалить результат этого из текста, и вы получите нужный результат.