javascript - 根据特定标签将 HTML 字符串拆分为多个部分？

Question

我有一个代表 HTML 片段的字符串，如下所示:

const bookString = "<h1>Chapter 1: The Beginning</h1>
<p>It was a dark and stormy night...</p>
<p>Tom ran up the stairs...</p>
<p>A shot rang out!</p>

<h1>Chapter 2: A Day at the Zoo</h1>
<p>The door swung open...</p>"

你明白了，在这本书中我只希望看到 h1、p、em/strong/i/b 标签。 (这来自 Mammoth 库，它接受一个 Word 文档并给我一个 HTML 字符串。)我想编写一些 JS 根据章节将其拆分，如下所示:

const chapters = [
  {
    title: "The Beginning",
    content: 
      "<p>It was a dark and stormy night...</p>
      <p>Tom ran up the stairs...</p>
      <p>A shot rang out!</p>"
    ]
  }
];

然后我可以将其传递给电子书生成库。

我应该使用像 Cheerio 这样的 HTML 解析库来做到这一点吗？我不太清楚选择，例如“对于每个 h1，保存一个标题，然后对于该 h1 之后的每个 p，推送到数组...”或者我应该使用正则表达式，尽管常见的建议是永远不要在 HTML 上使用正则表达式？

Answer 1

如果您想使用Cheerio，您可以使用nextUntil()方法获取由传递的选择器标识的所有元素

//get all elements until the next h1 is encountered
$('h1').nextUntil('h1')

使用它，您可以在 h1 集合上 map() 获取每组内容并最终创建您的对象

const chapters = $('h1').map((index,h1)=>{
  let content = $(h1).nextUntil('h1').map((index,p)=>$.html(p)).get().join('');
  return {
    title:$(h1).html(),
    content:content
  };
}).get();

repl.it Demo