时间戳

首页 > 解决方案 > 根据特定标签将 HTML 字符串拆分为多个部分？

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

问题描述

我有一个代表这样的 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，保存一个标题，然后为每个p后面的h1，推送到数组......”或者我应该使用正则表达式，尽管通常建议不要在 HTML 上使用正则表达式？

标签： javascripthtml

解决方案

如果你想使用 Cheerio，你可以使用该nextUntil()方法来获取所有元素，直到一个由传递的选择器标识

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

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

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 演示

推荐阅读