Bagaimana cara memotong teks di Angular2?


126

Apakah ada cara agar saya bisa membatasi panjang string menjadi karakter angka? misalnya: Saya harus membatasi panjang judul menjadi 20 {{ data.title }}.

Apakah ada pipa atau filter untuk membatasi panjangnya?

Jawaban:


380

Dua cara untuk memotong teks menjadi bersudut.

let str = 'How to truncate text in angular';

1. Solusi

  {{str | slice:0:6}}

Keluaran:

   how to

Jika Anda ingin menambahkan teks apa pun setelah string irisan seperti

   {{ (str.length>6)? (str | slice:0:6)+'..':(str) }}

Keluaran:

 how to...

2. Solusi (Buat pipa khusus)

jika Anda ingin membuat pipa potong kustom

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'truncate'
})

export class TruncatePipe implements PipeTransform {

transform(value: string, args: any[]): string {
    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
   }
}

Di Markup

{{ str | truncate:[20] }} // or 
{{ str | truncate:[20, '...'] }} // or

Jangan lupa untuk menambahkan entri modul.

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

Solusi mana yang bagus kinerjanya. Solusi 1 atau solusi 2. Menurut saya solusi 1 bagus kinerjanya.
Rigin Oommen

Anda mungkin ingin menambahkan cek nol ke pernyataan pengembalian, dalam kasus saya, saya mengirimkan string kosong dan itu menyebabkan aplikasi saya macet. return value && value.length > limit ? value.substring(0, limit) + trail : value;
Wildhammer

@ketan: Pak, saya sudah mencoba kedua solusi itu bekerja dengan sempurna tetapi skenario saya berbeda, kami awalnya menampilkan 50 karakter dan lebih banyak teks akan ditampilkan setelah klik tautan baca lebih lanjut jadi beri tahu saya kemungkinan dengan di atas?
Kapil soni

Dalam solusi 2, transform(value: string, args: string[]): stringharus transform(value: string, args: any[]): stringkarena argumen pertama yang diberikan ke pipa adalah angka.
MattOnyx

Hai Ketan, bisakah Anda menjawab ini: stackoverflow.com/questions/61040964/…
Tanzeel

83

Truncate Pipe dengan parameter opsional :

  • limit - panjang maksimal string
  • completeWords - Bendera untuk memotong kata lengkap terdekat, bukan karakter
  • elipsis - ditambahkan akhiran akhiran

-

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }
    return value.length > limit ? value.substr(0, limit) + ellipsis : value;
  }
}

Jangan lupa untuk menambahkan entri modul.

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

Pemakaian

Contoh String:

public longStr = 'A really long string that needs to be truncated';

Markup:

  <h1>{{longStr | truncate }}</h1> 
  <!-- Outputs: A really long string that... -->

  <h1>{{longStr | truncate : 12 }}</h1> 
  <!-- Outputs: A really lon... -->

  <h1>{{longStr | truncate : 12 : true }}</h1> 
  <!-- Outputs: A really... -->

  <h1>{{longStr | truncate : 12 : false : '***' }}</h1> 
  <!-- Outputs: A really lon*** -->

7
Terima kasih telah menyediakan pipa, limit = value.substr(0, 13).lastIndexOf(' ');seharusnya begitu limit = value.substr(0, limit).lastIndexOf(' ');.
Tomnar

1
Anda juga dapat menambahkan sesuatu seperti itu: if (!value) { return ''; }dan if (value.length <= limit) { return value; }
Jarek Szczepański

saya harus menambahkannya ke bagian ekspor @ngModule juga untuk membuatnya berfungsi. tidak yakin mengapa
tibi

@tibi itu seperti sebuah komponen baru dan Anda perlu mendeklarasikan (declarations array) untuk menggunakannya.
calios

1
Untuk menghindari penambahan elipsis ke nilai yang tidak perlu tambahkan penggunaan `if (value.length <limit) {return value; } lain {kembali ${value.substr(0, limit)}${ellipsis}; } `
jabu.hlong

15

Anda dapat memotong teks berdasarkan CSS. Ini membantu untuk memotong teks berdasarkan lebar bukan memperbaiki karakter.

Contoh

CSS

.truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.content {
            width:100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

HTML

<div class="content">
    <span class="truncate">Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</div>

Catatan: kode ini menggunakan penuh untuk satu baris tidak untuk lebih dari satu.

Solusi Ketan adalah yang terbaik jika Anda ingin melakukannya dengan Angular


2
Ini. Seribu kali ini!
brunner

sempurna untuk Aksesibilitas
Antonello Pasella


3

Berikut adalah pendekatan alternatif menggunakan interfaceuntuk mendeskripsikan bentuk objek opsi yang akan diteruskan melalui pipedi markup.

@Pipe({
  name: 'textContentTruncate'
})
export class TextContentTruncatePipe implements PipeTransform {

  transform(textContent: string, options: TextTruncateOptions): string {
    if (textContent.length >= options.sliceEnd) {
      let truncatedText = textContent.slice(options.sliceStart, options.sliceEnd);
      if (options.prepend) { truncatedText = `${options.prepend}${truncatedText}`; }
      if (options.append) { truncatedText = `${truncatedText}${options.append}`; }
      return truncatedText;
    }
    return textContent;
  }

}

interface TextTruncateOptions {
  sliceStart: number;
  sliceEnd: number;
  prepend?: string;
  append?: string;
}

Kemudian di markup Anda:

{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}


1

Jika Anda ingin memotong sejumlah kata dan menambahkan elipsis, Anda dapat menggunakan fungsi ini:

truncate(value: string, limit: number = 40, trail: String = '…'): string {
  let result = value || '';

  if (value) {
    const words = value.split(/\s+/);
    if (words.length > Math.abs(limit)) {
      if (limit < 0) {
        limit *= -1;
        result = trail + words.slice(words.length - limit, words.length).join(' ');
      } else {
        result = words.slice(0, limit).join(' ') + trail;
      }
    }
  }

  return result;
}

Contoh:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 5, '…')
> "Bacon ipsum dolor amet sirloin…"

diambil dari: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Jika Anda ingin memotong beberapa huruf tetapi tidak memotong kata, gunakan ini:

truncate(value: string, limit = 25, completeWords = true, ellipsis = '…') {
  let lastindex = limit;
  if (completeWords) {
    lastindex = value.substr(0, limit).lastIndexOf(' ');
  }
  return `${value.substr(0, limit)}${ellipsis}`;
}

Contoh:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, true, '…')
> "Bacon ipsum dolor…"

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, false, '…')
> "Bacon ipsum dolor a…"

1

Baru saja mencoba jawaban @Timothy Perez dan menambahkan baris

if (value.length < limit)
   return `${value.substr(0, limit)}`;

untuk

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {

   if (value.length < limit)
   return `${value.substr(0, limit)}`;

   if (completeWords) {
     limit = value.substr(0, limit).lastIndexOf(' ');
   }
   return `${value.substr(0, limit)}${ellipsis}`;
}
}

0

Coba yang ini, jika Anda ingin memotong berdasarkan Kata-kata alih-alih karakter sambil juga mengizinkan opsi untuk melihat teks lengkap.

Datang ke sini mencari solusi Baca Lebih Lanjut berdasarkan kata-kata , berbagi kebiasaan yang Pipeakhirnya saya tulis.

Pipa:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'readMore'
})
export class ReadMorePipe implements PipeTransform {

  transform(text: any, length: number = 20, showAll: boolean = false, suffix: string = '...'): any {

    if (showAll) {
      return text;
    }

    if ( text.split(" ").length > length ) {

      return text.split(" ").splice(0, length).join(" ") + suffix;
    }

    return text;
  }

}

Dalam Template:

<p [innerHTML]="description | readMore:30:showAll"></p>
<button (click)="triggerReadMore()" *ngIf="!showAll">Read More<button>

Komponen:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Dalam Modul:

import { ReadMorePipe } from '../_helpers/read-more.pipe';

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.