Skraćivanje teksta je uobičajen zadatak u web razvoju, posebno kada se radi o dugačkom tekstualnom sadržaju koji treba da se uklopi u određene granice prezentacije bez preopterećenja pogleda. To se obično dešava u scenarijima kao što su vijesti, pregledi teksta ili bilo gdje gdje biste se odlučili za funkciju tipa „pročitaj više“.
Približavanje problemu skraćivanja
Za skraćivanje teksta u JavaScript-u, postoji nekoliko različitih metoda koje možemo koristiti, bilo korištenjem čistog JavaScripta ili korištenjem biblioteka kao što je Lodash, svaka sa svojim pristupom i razmatranjima slučaja upotrebe.
Ključ u svim ovim pristupima je podniz() metoda. Ova metoda vraća dio niza između početnog i krajnjeg indeksa, ili do kraja niza.
let str = "Hello world!"; let res = str.substring(1, 4);
U ovom JavaScript kodu kreiramo string koji glasi “Zdravo svijete!” a zatim pomoću metode podstringa za vraćanje njegovog dijela. U ovom slučaju, res će biti “ell”.
Objašnjenje korak po korak
Hajde da napravimo JavaScript funkciju da skratimo dati deo teksta na određenu dužinu:
function truncateString(str, num) {
if (str.length <= num) {
return str
}
return str.slice(0, num > 3 ? num - 3 : num) + '...'
}
Evo kako to radi:
- Funkcija uzima dva parametra: string i maksimalnu dužinu skraćenog niza.
- Ako je dužina stringa manja ili jednaka maksimalnoj dužini, funkcija će vratiti originalni niz. To znači da ako je naš string kraći od dužine na koju želimo da skraćimo, neće biti skraćen.
- Ako je niz duži, funkcija će ga preseći. Ako je maksimalna dužina veća od 3, isjeći će niz na (dužina – 3), a zatim dodati '...' na kraju.
Korišćenje biblioteka
Iako izvorne JavaScript funkcije pružaju solidno i brzo rješenje za skraćivanje teksta, postoji i nekoliko biblioteka koje možete koristiti za postizanje sličnih rezultata.
Jedna takva biblioteka je Lodash, koja uključuje a skrati funkcija. Lodashova funkcija truncate je malo sofisticiranija, omogućavajući vam da odredite dužinu skraćenja, završne znakove, pa čak i da zadržite cijele riječi.
_.truncate('this is some long text', {
'length': 10,
'separator': ' '
});
// => 'this is...'
U ovom primjeru, Lodashova funkcija truncate se koristi za skraćivanje niza nakon određenog broja znakova, istovremeno osiguravajući da riječi ne budu prepolovljene. Ovo otvara više opcija za prilagođavanje i kontrolu nad načinom na koji je vaš tekst skraćen.
Sve u svemu, skraćivanje teksta u JavaScript-u može se postići na različite načine, od kojih svaki nudi drugačiji nivo prilagođavanja i složenosti, a metoda koju odaberete u konačnici ovisi o potrebama vašeg projekta. Ključna stvar je zapamtiti da koju god metodu odaberete, pobrinite se da ona najbolje odgovara korisničkom iskustvu i cjelokupnom izgledu i dizajnu web stranice.
