个人中心
gpt4 book ai didi

javascript - 如何剪切 HTML 以保留结束标签？

转载 作者：行者123 更新时间：2023-12-03 09:35:00 26 4
gpt4 key购买 nike

如何创建以 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，然后修复未关闭的标签？

最佳答案

预览后

这是一项具有挑战性的任务，让我挣扎了大约两天，并让我发布了我的第一个 新品管理 包 post-preview 这可以解决您的问题。一切都在其自述文件中进行了描述，但如果您想知道如何将其用于您的特定问题:
首先使用 安装软件包NPM 或从 下载其源代码GitHub
然后，您可以在用户将其博客帖子发布到服务器之前使用它，并将其结果(预览)与完整帖子一起发送到后端并验证其长度并清理其 html 并将其保存到您的后端存储(数据库等)并发送当您想向他们展示博客文章预览而不是完整文章时，它会返回给用户。
示例:
以下代码将接受 .blogPostContainer HTMLElement 作为输入并返回它的摘要 HTML 字符串版本，*maximum 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, dolor sit amet consectetur adipisicing elit. Neque, fugit hic! Quas similique
        cupiditate illum vitae eligendi ha
      </p>
    </div>
  </div>
</div>
这是一个同步任务，因此如果您想一次针对多个帖子运行它，您最好在工作人员中运行它以获得更好的性能。
谢谢你让我做一些研究!
祝你好运!

关于javascript - 如何剪切 HTML 以保留结束标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65458631/

26 4 0
文章推荐： python - 对可变长度序列进行训练和预测
文章推荐： javascript - 在 chrome 中获取错误的窗口高度
文章推荐： prolog - 带约束规划的方形拼图问题解决方案
文章推荐： haskell - 如何在实物签名中要求功能依赖？