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

Posted 2023-03-06

技术标签:

【中文标题】如何剪切 HTML 以保留结束标签？【英文标题】：How do I cut HTML so that the closing tags are preserved? 【发布时间】：2021-04-04 02:30:26 【问题描述】：

如何创建以 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（服务器端）然后修复未关闭的标签？

【问题讨论】：

您还可以在数据库字段中添加一个预览文本，该文本大约需要 100 个正文字符。问题是帖子实际上是用 HTML 编写的（所以我可以有更简单的样式等），这意味着正文中可能有一个标签。 【参考方案1】：

预览后

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

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

下载其源代码

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

示例：

以下代码将接受.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, dolor sit amet consectetur adipisicing elit. Neque, fugit hic! Quas similique
        cupiditate illum vitae eligendi ha
      </p>
    </div>
  </div>
</div>

这是一个同步任务，因此如果您想同时针对多个帖子运行它，最好在工作线程中运行它以获得更好的性能。

感谢您让我做一些研究！

祝你好运！

【讨论】：

您好，很抱歉没有尽快回复。问题是这个答案是针对前端的（使用document.querySelector），这是我做不到的（我不会使用 jsdom 什么的）。我希望能够在后端处理 HTML，所以我可能必须自己编写。在前端剪切文本有点违背了目的，因为加载时间会保持不变，如果不是变慢的话。您好，正如您已经提到的，此解决方案旨在解决前端的问题在将帖子发送到后端之前。因此，当用户第一次写帖子时，您可以将预览与完整帖子一起发回，并从后端检索预览，例如，当您想显示多个帖子预览而不是所有帖子时，您可以在何时检索实际帖子用户对该特定帖子的请求。这是一个同步任务，因此出于性能原因，您最好在工作线程中运行它。【参考方案2】：

猜测每个预渲染元素的高度是相当复杂的。但是，您可以使用以下伪规则按字符数剪切条目：

首先定义要保留的最大字符数。

< .. >

< .. />

然后从您停止的地方继续搜索标签。

我刚刚在javascript 中写的一个快速建议（可能可以改进，但就是这样）：

let str = `<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>`;

const MAXIMUM = 100; // Maximum characters for the preview
let currentChars = 0; // Will hold how many characters we kept until now

let list = str.split(/(<\/?[A-Za-z0-9]*>)/g); // split by tags

const isATag = (s) => (s[0] === '<'); // Returns true if it is a tag
const tagName = (s) => (s.replace('<', '').replace('>', '').replace('\/', '')) // Get the tag name
const findMatchingTag = (list, i) => 
    let name = tagName(list[i]);
    let searchingregex = new RegExp(`<\/ *$name *>`,'g'); // The regex for closing mathing tag
    let sametagregex = new RegExp(`< *$name *>`,'g'); // The regex for mathing tag (in case there are inner scoped same tags, we want to pass those)
    let buffer = 0; // Will count how many tags with the same name are in an inner hirarchy level, we need to pass those
    for(let j=i+1;j<list.length;j++)
        if(list[j].match(sametagregex)!=null) buffer++;
        if(list[j].match(searchingregex)!=null)
            if(buffer>0) buffer--;
            else
                return j;
            
        
    
    return -1;


let k = 0;
let endCut = false;
let cutArray = new Array(list.length);
while (currentChars < MAXIMUM && !endCut && k < list.length)  // As long we are still within the limit of characters and within the array
    if (isATag(list[k]))  // Handling tags, finding the matching tag
        let matchingTagindex = findMatchingTag(list, k);
        if (matchingTagindex != -1) 
            if (list[k].length + list[matchingTagindex].length + currentChars < MAXIMUM)  // If icluding both the tag and its closing exceeds the limit, do not include them and end the cut proccess
                currentChars += list[k].length + list[matchingTagindex].length;
                cutArray[k] = list[k];
                cutArray[matchingTagindex] = list[matchingTagindex];
            
            else 
                endCut = true;
            
        
        else 
            if (list[k].length + currentChars < MAXIMUM)  // If icluding the tag exceeds the limit, do not include them and end the cut proccess
                currentChars += list[k].length;
                cutArray[k] = list[k];
            
            else 
                endCut = true;
            
        
    
    else  // In case it isn't a tag - trim the text
        let cutstr = list[k].substring(0, MAXIMUM - currentChars)
        currentChars += cutstr.length;
        cutArray[k] = cutstr;
    
    k++;


console.log(cutArray.join(''))

【讨论】：

是的，按字符剪切就可以了。如果在合理的时间内没有更好的解决方案，我会接受这个答案，我希望有更好的方法来做到这一点，但是，是的，似乎我必须像你一样自己处理它。谢谢！

以上是关于如何剪切 HTML 以保留结束标签？的主要内容，如果未能解决你的问题，请参考以下文章

HTML元素分类

使用 JSX Harmony 时，如何让 WebStorm 调整结束标签的缩进以匹配其父标签？

HTML之元素属性标题段落笔记小结

Html 教程语法和属性

如何结束 HTML 的“元”标签？ [复制]

如何阻止 HTML Tidy 删除我的结束标签？