如何截取Blogger API返回的长内容？解决splice无效问题

首先要明确：splice()是数组操作方法，你拿到的文章内容是字符串类型，直接调用它自然不会生效。要截断字符串，应该用字符串的slice(start, end)方法。

但直接截断HTML字符串会有两个核心问题：

• 截断位置刚好落在HTML标签中间，导致标签不闭合，页面渲染错乱
• 截断后的内容可能残留未完成的标签（比如你示例里的<img border="0"）

下面提供两种可行的解决方案：

方案1：剥离HTML标签，截断纯文本后展示 #

适合只需要纯文本摘要的场景，步骤清晰简单：

1. 用正则表达式去除所有HTML标签，提取纯文本内容
2. 对纯文本使用slice()截断到指定长度
3. 可选添加省略号标识内容未展示完全

示例代码（JavaScript）：

// 替换为你从Blogger API获取的内容
const htmlContent = "<h4 style='text-align: left;'>...</h4>"; 
// 移除所有HTML标签
const plainText = htmlContent.replace(/<[^>]*>/g, '');
// 截断到500字符，超出部分加省略号
const truncatedText = plainText.length > 500 ? plainText.slice(0, 500) + '...' : plainText;

方案2：安全截断HTML，保证标签闭合 #

如果需要保留部分HTML格式，必须处理标签的开闭状态，避免渲染错误。可以自己实现简易逻辑，或者使用成熟的第三方库：

简易自定义实现示例 #

function truncateHtml(html, maxLength) {
  let result = '';
  let tagStack = [];
  let currentPos = 0;

  while (currentPos < html.length && result.length < maxLength) {
    const char = html[currentPos];
    if (char === '<') {
      // 处理HTML标签
      const tagEnd = html.indexOf('>', currentPos);
      if (tagEnd === -1) break;
      const tag = html.slice(currentPos, tagEnd + 1);
      // 判断标签类型
      if (tag.startsWith('</')) {
        // 闭合标签，弹出栈
        tagStack.pop();
      } else if (!tag.match(/<(img|br|hr)/i)) {
        // 非自闭合标签，压入栈
        const tagName = tag.match(/<([a-z]+)/i)[1];
        tagStack.push(tagName);
      }
      result += tag;
      currentPos = tagEnd + 1;
    } else {
      // 处理普通文本
      result += char;
      currentPos++;
    }
  }

  // 闭合所有未关闭的标签
  while (tagStack.length > 0) {
    const tagName = tagStack.pop();
    result += `</${tagName}>`;
  }

  // 添加省略号（如果内容未截断完成）
  if (currentPos < html.length) {
    result += '...';
  }

  return result;
}

// 使用示例
const truncatedHtml = truncateHtml(yourBloggerApiContent, 500);

使用第三方库（更可靠） #

如果不想自己处理复杂的标签逻辑，可以用html-truncate库：

npm install html-truncate

const truncate = require('html-truncate');
const truncatedHtml = truncate(yourBloggerApiContent, { length: 500, ellipsis: '...' });

关键注意事项 #

• 字符串截断永远用slice()或substring()，不要用数组的splice()方法
• 直接截断HTML必须处理标签闭合，否则会导致页面布局混乱
• 纯文本摘要场景下，先剥离标签再截断是最省心的方案

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