如何在React（含Next.js）项目中修复被截断的不完整HTML字符串

解决方案 #

你遇到的是HTML字符串被强制截断后出现标签不闭合、结构不合法的问题，之前基于document对象的方案无法在Next.js中使用，是因为Next.js的SSR/SSG阶段运行在Node.js环境，不存在浏览器端的DOM全局对象。以下是适配Next.js全场景的可落地方案：

可用第三方包（均支持Node.js环境，无需浏览器DOM）

• sanitize-html：轻量的HTML清洗修复工具，除了可以过滤XSS风险内容外，会自动补全不闭合的标签、修复断裂的HTML结构，是该场景的首选方案。
  1. 安装命令：npm install sanitize-html
  2. 使用示例：

  import sanitizeHtml from 'sanitize-html';
  
  const brokenHtml = '<div>loremlalal..<p>dsdM</p> - that\'s all';
  const validHtml = sanitizeHtml(brokenHtml, {
    // 可根据业务需求配置允许保留的标签、属性
    allowedTags: [...sanitizeHtml.defaults.allowedTags, 'div', 'p']
  });
  

  输出的validHtml会自动补全缺失的</div>闭合标签，为完全合法的HTML结构。
• cheerio：Node.js环境下的类jQuery工具，适合需要对HTML做更多自定义操作的场景，加载不完整HTML时会自动完成结构修复。
  1. 安装命令：npm install cheerio
  2. 使用示例：

  import * as cheerio from 'cheerio';
  
  const brokenHtml = '<div>loremlalal..<p>dsdM</p> - that\'s all';
  const $ = cheerio.load(brokenHtml);
  const validHtml = $.html();
  

额外优化建议

如果你的需求本质是要对完整HTML做截断同时保证结构合法，可以直接使用html-truncate包，它支持按字符数截断HTML的同时自动维护标签闭合，不需要事后修复：

1. 安装命令：npm install html-truncate
2. 使用示例：

import truncate from 'html-truncate';

const fullHtml = '<div>完整的长HTML内容...</div>';
// 按指定长度截断，输出的结果天然是合法HTML
const truncatedHtml = truncate(fullHtml, 30);

内容的提问来源于stack exchange，提问作者Rostyk