在Web开发中，经常需要处理大量的HTML内容，尤其是在展示文章预览、动态加载内容或限制显示长度等场景中。直接截断HTML字符串可能会导致页面布局混乱、样式错误或标签不完整等问题。为了安全地截断HTML内容，我们可以利用jsdom库来解析HTML，并构建截断后的HTML字符串。
1、引入JSDOM库
首先，确保已经安装了jsdom库。如果尚未安装，可以使用npm（Node.js的包管理器）进行安装：
npm install jsdom2、安全截断HTML内容的策略
安全截断HTML内容的关键在于确保截断后的HTML依然保持结构的完整性。以下是一个使用jsdom库来实现安全截断HTML内容的策略：
- 使用JSDOM解析HTML：创建一个
JSDOM实例来解析HTML内容，并获取到解析后的DOM树。 - 遍历DOM树：从DOM树的根节点开始，逐个遍历子节点。
- 处理文本节点：当遇到文本节点时，检查其长度是否超过最大长度限制。如果超过，则截断文本并添加省略号；否则，直接添加文本内容。
- 处理元素节点：当遇到元素节点时，首先检查整个元素（包括其内容）的长度是否超过最大长度限制。如果未超过，则直接添加该元素的outerHTML；如果超过，则需要进一步处理。
- 处理元素节点的内部文本：对于超过长度限制的元素节点，需要遍历其内部的文本节点，并尝试截断文本。由于直接截断元素可能会导致未关闭的标签，因此我们只截断内部的文本内容，并保留元素的开放标签。
- 返回截断后的HTML：遍历完成后，返回截断后的HTML字符串。
3、具体实现方法
下面是使用上述策略实现安全截断HTML内容的示例代码：
const { JSDOM } = require('jsdom'); function truncateHtml(html, maxLength) { // 创建一个包含传入HTML的完整文档 const dom = new JSDOM(`<!DOCTYPE html><html><head></head><body>${html}</body></html>`); const { document } = dom.window; let totalLength = 0; let truncatedHtml = ''; let currentNode = document.body.firstChild; // 遍历DOM树 while (currentNode) { if (currentNode.nodeType === Node.TEXT_NODE) { // 文本节点 const textContent = currentNode.textContent; const remainingLength = maxLength - totalLength; if (textContent.length > remainingLength) { // 截断文本并添加省略号 truncatedHtml += textContent.substring(0, remainingLength) + '...'; break; } else { truncatedHtml += textContent; totalLength += textContent.length; } } else if (currentNode.nodeType === Node.ELEMENT_NODE) { // 元素节点 // 检查整个元素（包括内容）的长度 const elementHtml = currentNode.outerHTML; if (totalLength + elementHtml.length <= maxLength) { truncatedHtml += elementHtml; totalLength += elementHtml.length; } else { // 如果超过长度限制，则截断元素内的文本节点 const clone = currentNode.cloneNode(false); // 不复制子节点 truncatedHtml += '<' + clone.nodeName + '>'; // 添加开放标签 // 遍历子节点并尝试截断文本 for (let child of currentNode.childNodes) { if (child.nodeType === Node.TEXT_NODE) { const textClone = child.cloneNode(true); // 复制文本节点 const textContent = textClone.textContent; const textLength = textContent.length; if (totalLength + textLength <= maxLength) { truncatedHtml += textContent; totalLength += textLength; } else { truncatedHtml += textContent.substring(0, maxLength - totalLength) + '...'; break; } } } // 跳出循环，因为已经处理了超过长度的元素 break; } } currentNode = currentNode.nextSibling; } // 返回截断后的HTML return truncatedHtml;
} // 使用示例
const pageContent = '<p>这是一篇<b>很长</b>的文章，包含<a href="#">多个</a>HTML<br>标签。</p>';
const truncatedContent = truncateHtml(pageContent, 50);
console.log
