如何使用 Angular 10+ 将 API 的内容限制为 15 个字（不是字符）？

Question

我想将我的 API 中的一些内容（大约 50 多个字）限制为 15 个字，我正在尝试制作一个 Pipe 但没有用，我找到的管道是限制但仅限字符而不是单词..

我用这个：

@Pipe({
  name: 'limitToPipe'
})
export class LimitToPipePipe implements PipeTransform {

  transform(value: string, limit: number): string {
    let trail = '...';

return value.length > limit ? value.substring(0, limit) + trail : value;


 }

}

正如我之前所说，这不是我想要的，因为我需要 return 15 个单词而不是字符。

有人可以帮我做这个吗？我从早到晚都在浪费时间来做这件事。

Answer 1

您可以通过拆分单词而不是子字符串来分隔单词。请检查以下代码，它拆分了单词并且 returns 仅指定了限制，

import { Pipe, PipeTransform } from '@angular/core';
    
@Pipe({
   name: 'limitWords'
})
export class LimitWordsPipe implements PipeTransform {
   transform(value: any, limit: any): any {
      return value.length > limit ? value.split(' ').slice(0,limit).join(' ') + '...' :value;
   }
}

应用程序 Url - https://limitwordspipe.stackblitz.io
编辑 Url - https://stackblitz.com/edit/limitwordspipe?file=src/app/limit-words.pipe.ts

Answer 2

首先，请注意您需要确定一个词到底是什么，例如：您是否在对词的定义中包含标点符号；带连字符的单词算作一个还是两个单词...

我没有检查过你的代码，但看起来你的管道工作正常所以只需要 15 个字？我会使用正则表达式 - 像这样：

transform (value: string, words: number): string {
  const regex = new RegExp(`((\W*\w+){0,${words}})`);
  const result = value.match(regex)[1];
  return result.length < value.length ? result + '...' : result;
}

正则表达式是：

((\W*\w+){0,15}})

匹配 0 个或多个非单词字符“\W+”，后跟 1 个或多个单词字符“\w+”，然后查找 0 到 15 个匹配项，尽可能多地找到（以防万一您的初始字符串少于 15 个单词）。

如果您想比 \W \w 更具体地包含哪些字符，您可以将它们切换为显式字符类。例如向单词字符添加连字符（使带连字符的单词成为一个单词）：

transform (value: string, words: number): string {
  const chars='-A-Za-z0-9_';
  const regex = new RegExp(`(([^${chars}]*[${chars}]+){0,${words}})`);
  const result = value.match(regex)[1];
  return result.length < value.length ? result + '...' : result;
}

构建正则表达式：

(([^-A-Za-z0-9_]*[-A-Za-z0-9_]+){0,15}})

干杯，

如何使用 Angular 10+ 将 API 的内容限制为 15 个字（不是字符）？

How can I limit content from an API to 15 words (not chars) using Angular 10+?

javascript

api

frontend

backend

angular