如何解决如何剪切 HTML 以保留结束标记？

如何创建以 HTML 格式存储的博客文章的预览？换句话说，我如何“剪切”HTML，确保标签正确关闭？目前，我正在前端渲染整个内容（使用 react 的 dangerouslySetInnerHTML），然后设置 overflow: hidden 和 height: 150px。我更喜欢一种可以直接剪切 HTML 的方式。这样我就不需要将整个 HTML 流发送到前端；如果我有 10 个博客文章预览，那将是大量的 HTML 发送，访问者甚至都看不到。

如果我有 HTML（假设这是整个博客文章）

<body>
   <h1>Test</h1>
   <p>This is a long string of text that I may want to cut.. blah blah blah foo bar bar foo bar bar</p>
</body>

尝试对其进行切片（进行预览）是行不通的，因为标签会变得不匹配：

<body>
   <h1>Test</h1>
   <p>This is a long string of text <!-- Oops! unclosed tags -->

我真正想要的是：

<body>
   <h1>Test</h1>
   <p>This is a long string of text</p>
</body>

我正在使用 next.js，因此任何 node.js 解决方案都应该可以正常工作。有没有办法做到这一点（例如 next.js 服务器端的库）？还是我只需要自己解析 HTML（服务器端）然后修复未关闭的标签？

解决方法

预览后

这是一项具有挑战性的任务，让我挣扎了大约两天，并让我发布了我的第一个 NPM 包 post-preview，它可以解决您的问题。所有内容都在其自述文件中进行了描述，但如果您想知道如何将其用于您的特定问题：

首先使用 NPM 安装软件包或从 GitHub

下载其源代码

然后您可以在用户将他们的博客文章发布到服务器之前使用它，并将其结果（预览）连同完整的文章发送到后端，并验证其长度并清理其 html 并将其保存到您的后端存储（DB 等）。 ) 并在您想向用户显示博客文章预览而不是完整文章时将其发回给用户。

示例：

以下代码将接受 .blogPostContainer HTMLElement 作为输入并返回它的汇总 HTML 字符串版本，长度为 * 最大 200 个字符。

您可以在“previewContainer”.preview 中看到预览：

js：

import  postPreview  from  "post-preview";
const  postContainer = document.querySelector(".blogPostContainer");
const  previewContainer = document.querySelector(".preview");
previewContainer.innerHTML = postPreview(postContainer,200);

html（完整的博客文章）：

<div class="blogPostContainer">
  <div>
    <h2>Lorem ipsum</h2>
    <p>
      Lorem ipsum,dolor sit amet consectetur adipisicing elit. Neque,fugit hic! Quas similique
      cupiditate illum vitae eligendi harum. Magnam quam ex dolor nihil natus dolore voluptates
      accusantium. Reprehenderit,explicabo blanditiis?
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam non incidunt,corporis debitis
    ducimus eum iure sed ab. Impedit,doloribus! Quos accusamus eos,incidunt enim amet maiores
    doloribus placeat explicabo.Eaque dolores tempore,quia temporibus placeat,consequuntur hic
    ullam quasi rem eveniet cupiditate est aliquam nisi aut suscipit fugit maiores ad neque sunt
    atque explicabo unde! Explicabo quae quia voluptatem.
  </p>
</div>

<div class="preview"></div>

结果（博文预览）：

<div class="preview">
  <div class="blogPostContainer">
    <div>
      <h2>Lorem ipsum</h2>
      <p>
        Lorem ipsum,fugit hic! Quas similique
        cupiditate illum vitae eligendi ha
      </p>
    </div>
  </div>
</div>

这是一个同步任务，所以如果你想一次针对多个帖子运行它，你最好在一个工作器中运行它以获得更好的性能。

谢谢你让我做一些研究！

祝你好运！