根据 headers 切片 HTML

Question

我有一份 HTML 文档，大致如下所示：

<h1><a id="first-id"></a>First header</h1>
<h2>Foo</h2>
<p>Some text</p>
<h3>Bar 1</h3>
<p>Some text</p>
<h3>Bar 2</h3>
<p>Some text</p>
<h3>Bar 3</h3>
<p>Some text</p>
<h2>Baz</h2>
<p>Some text</p>
<h3>Bar 4</h3>
<p>Some text</p>
<h3>Bar 5</h3>
<p>Some text</p>
<h1>Second header</h1>

所有 header 都可以在其中额外包含一个或多个锚标记（如第一个 header）。

我的目标是：

按 h1 个标签拆分文档
能够分别处理Bar \d之间的内容

即我想分别获取以下部分：

<h1><a id="first-id"></a>First header</h1>
<h2>Foo</h2>
<p>Some text</p>

<h3>Bar 1</h3>
<p>Some text</p>

<h3>Bar 2</h3>
<p>Some text</p>

<h3>Bar 3</h3>
<p>Some text</p>

<h2>Baz</h2>
<p>Some text</p>

<h3>Bar 4</h3>
<p>Some text</p>

<h3>Bar 5</h3>
<p>Some text</p>

<h1>Second header</h1>

直到现在，我一直在研究 cheerio，但我没能找到一种方法将 HTML 很好地分割成不同的部分。

我怎样才能实现我的目标？有没有更适合我需要的图书馆？我想避免纯字符串操作，因为它很可能会弄乱所有锚标记...

Answer 1

将段的 html 代码放在带有 id 的 div 标记之间并按 id 定位 div 似乎是一个很好的做法：

<div id="firstHeader">
  <h1><a id="first-id"></a>First header</h1>
  <h2>Foo</h2>
  <p>Some text</p>
  <h3>Bar 1</h3>
  <p>Some text</p>
  <h3>Bar 2</h3>
  <p>Some text</p>
  <h3>Bar 3</h3>
  <p>Some text</p>
  <h2>Baz</h2>
  <p>Some text</p>
  <h3>Bar 4</h3>
  <p>Some text</p>
  <h3>Bar 5</h3>
  <p>Some text</p>
</div>

<div id="secondHeader">
  <h1>Second header</h1>
</div>

然后通过 javascript 使用此目标：

const firstHeader = document.getElementById('firstHeader')
const secondHeader = document.getElementById('secondHeader')

不确定这是否是您的意思。

Answer 2

您想使用 nextUntil 进行迭代：

$('h1').each((i, h1) => {
  console.log('-' + $.html($(h1)))
  let  = cheerio.load($.html($(h1).nextUntil('h1')))
  ('h2,h3').each((i, h2) => {
    console.log('--' + $.html($(h2)))
    console.log('---' + $.html($(h2).nextUntil('h2,h3')))
  })
})

根据 headers 切片 HTML

Slice HTML according to headers

html

node.js

cheerio