如何获取两个独立标签之间的 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>)

- Ratheri2

---

这个回答解决了您的问题吗？ 在 Puppeteer 中获取一个 elementHandle 的兄弟节点 - Code-Apprentice

我不确定，我需要那两个h1元素之间的所有元素，就像正则表达式一样。 - Ratheri2

你打算如何处理标签之间的内容？你只需要原始的HTML还是需要Puppeteer处理元素的引用？ - WillD

原始 HTML 内容 - Ratheri2

你的示例HTML格式不正确，因为缺少斜杠“/”。 - Code-Apprentice

Answer 1

在 Puppeteer 中获取元素的兄弟节点 介绍了如何使用 puppeteer 获取元素的前一个兄弟节点。获取元素的下一个兄弟节点有类似的函数。你可以通过编写一个循环，从第一个 <h1> 元素开始，重复获取下一个兄弟节点，直到达到第二个 <h1> 元素。请注意保留 HTML 标签。

- Code-Apprentice

Answer 2

你可以使用JS和evaluate方法来实现这个。

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)

- WillD

Answer 3

XPath解决方案

这是使用XPath的一个很好的用例。以下查询查找具有在它们之前具有内容为neverchangeA的h1标签和在它们之后具有内容为neverchangeB的span元素：

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

要在Puppeteer中使用XPath表达式，可以使用page.$x函数。 代码示例

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

- Thomas Dondorf

Answer 4

你应该使用正则表达式。这个：<h1>.*<h1>将选择h1标签以及标签之间的任何内容。一种方法是从文本中删除此结果，然后你将得到所需的结果。

- JohnDoe_Scientist

---

我们在 Puppeteer 或纯 JavaScript 中是否有内置的正则表达式？ - Ratheri2

假设您使用捕获组修改正则表达式，该组将包含比 OP 想要的更多字符。 - Code-Apprentice