javascript - 如何在两个独立标签之间获取 HTML 元素

Question

我正在使用 puppeteer 操纵者。我有一种情况需要在两个不存在父子关系的标签之间获取内容。

<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

你可以用 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)