HTML安全截断方法及标签保留技巧

以下是一个轻量、无依赖（无需 jQuery）、健壮的纯 JavaScript 实现：

function truncateHtml(html, maxLength = 50) {
  let result = '';
  let tempText = ''; // 缓存当前句号前的可见文本（不含标签）
  let tagOpen = false; // 是否处于 HTML 标签内（<...>）
  let visibleCount = 0; // 已累计的可见字符数（非标签内容）

  // 第一遍：提取文本 + 捕获句号边界
  for (const char of html) {
    if (char === '<' || char === '>') {
      tagOpen = !tagOpen;
      tempText += char;
      continue;
    }

    if (tagOpen) {
      tempText += char; // 标签内部字符（如 href="..."）也保留
    } else if (char === '.' && visibleCount < maxLength) {
      // 遇到句号且尚未超限 → 提交整句（含前面缓存的标签+文本+句号）
      result += tempText + '.';
      tempText = '';
      visibleCount = result.replace(/<[^>]*>/g, '').length; // 重算可见长度
    } else if (visibleCount < maxLength) {
      tempText += char;
      visibleCount++;
    }
  }

  // 第二遍：将剩余 tempText 中的 HTML 标签（仅标签，不含文本）补入 result
  // 确保未闭合的标签被带出（如 
... 截断后需保留 
）
  let tagBuffer = '';
  let inTag = false;
  for (const char of tempText) {
    if (char === '<') {
      inTag = true;
      tagBuffer += char;
    } else if (char === '>') {
      inTag = false;
      tagBuffer += char;
      result += tagBuffer;
      tagBuffer = '';
    } else if (inTag) {
      tagBuffer += char;
    }
  }

  return result;
}

✅ 使用示例