Angular 6中如何按单词而非字符截断文本？

我来帮你搞定这个问题——当前你的截断管道是按字符数来截取文本的，这就是为啥明明指定了35，却只截了35个字符而不是35个单词。咱们把逻辑改成按单词处理就行。

问题根源分析 #

你当前的transform方法里，value.substring(0, limit)是直接从字符串的第0位截取到第limit位的字符，完全没考虑单词的边界。要实现按单词截断，得先把文本拆成单词数组，再取指定数量的单词重新拼接。

修改后的管道实现 #

@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
  constructor(private item: SearchEntry, private config: ConfigService) { }

  transform(value: string, args: string[]): string {
    // 处理空值或非字符串情况，避免报错
    if (!value || typeof value !== 'string') return '';

    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';

    // 将文本按任意空白字符分割成单词数组（支持多空格、制表符等场景）
    const words = value.split(/\s+/);
    
    // 如果单词总数小于等于指定数量，直接返回原文本
    if (words.length <= limit) {
      return value;
    }

    // 取前limit个单词重新拼接，加上后缀
    return words.slice(0, limit).join(' ') + trail;
  }
}

关键修改说明 #

• 新增空值校验：防止传入null或非字符串时触发报错
• 单词分割逻辑：用split(/\s+/)替代简单的空格分割，兼容多种空白字符场景
• 边界判断：如果文本本身的单词数就没超过限制，直接返回原文本，避免多余的拼接操作
• 单词拼接：用slice(0, limit)取指定数量的单词，再用join(' ')还原成正常的句子格式

HTML用法验证 #

你的原有HTML写法是正确的，保持原样即可：

<p *ngIf="item.description.length > 0">
  <span class="body-12-bold">Description: </span>
  <span>{{ description | truncate:[35] }}</span>
</p>

如果需要自定义后缀（比如换成... 查看更多），可以写成：

{{ description | truncate:[35, '... 查看更多'] }}

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