Løst: avkorte tekst

Avkorting av tekst er en vanlig oppgave innen nettutvikling, spesielt når man arbeider med langvarig tekstinnhold som må passe innenfor visse presentasjonsgrenser uten å overbelaste visningen. Dette skjer vanligvis i scenarier som nyhetsfeeds, tekstforhåndsvisninger, eller faktisk hvor som helst du kan velge en funksjon av typen "les mer".

Nærmer seg trunkeringsproblemet

For å avkorte tekst i JavaScript, er det noen forskjellige metoder vi kan bruke, enten ved å bruke ren JavaScript eller ved å bruke biblioteker som Lodash, hver med sin egen tilnærming og brukscase-betraktninger.

Nøkkelen i alle disse tilnærmingene er delstreng () metode. Denne metoden returnerer delen av strengen mellom start- og sluttindeksen, eller til slutten av strengen.

let str = "Hello world!";
let res = str.substring(1, 4);

I denne JavaScript-koden lager vi en streng som lyder "Hallo verden!" og deretter bruke delstrengmetoden for å returnere en del av den. I dette tilfellet vil res være "ell".

Trinn-for-trinn forklaring

La oss konstruere en JavaScript-funksjon for å avkorte et gitt stykke tekst til en spesifisert lengde:

function truncateString(str, num) {
  if (str.length <= num) {
    return str
  }
  return str.slice(0, num > 3 ? num - 3 : num) + '...'
}

Her er hvordan det fungerer:

• Funksjonen tar to parametere: strengen og maksimal lengde på den avkortede strengen.
• Hvis lengden på strengen er mindre enn eller lik maksimal lengde, vil funksjonen returnere den opprinnelige strengen. Dette betyr at hvis strengen vår er kortere enn lengden vi ønsker å avkorte til, blir den ikke avkortet i det hele tatt.
• Hvis strengen er lengre, vil funksjonen kutte den. Hvis maksimal lengde er større enn 3, vil den kutte strengen til (lengde – 3) og deretter legge til '...' på slutten.

Bruk av biblioteker

Mens native JavaScript-funksjoner gir en solid og rask løsning for å avkorte tekst, er det også flere biblioteker du kan bruke for å oppnå lignende resultater.

Et slikt bibliotek er Lodash, som inkluderer en avkortes funksjon. Lodashs avkortingsfunksjon er litt mer sofistikert, slik at du kan spesifisere lengden på avkortingen, slutttegnene og til og med opprettholde hele ord.

_.truncate('this is some long text', {
  'length': 10,
  'separator': ' '
});
// => 'this is...'

I dette eksemplet brukes Lodashs avkortingsfunksjon til å avkorte en streng etter et visst antall tegn, samtidig som man sikrer at ordene ikke blir kuttet i to. Dette åpner for flere alternativer for tilpasning og kontroll over hvordan teksten din avkortes.

Totalt sett kan avkorting av tekst i JavaScript oppnås på forskjellige måter, som hver tilbyr et forskjellig nivå av tilpasning og kompleksitet, og metoden du velger avhenger til syvende og sist av prosjektbehovene dine. Nøkkelen er å huske at uansett hvilken metode du velger, sørg for at den passer best til brukeropplevelsen og den generelle layouten og utformingen av nettsiden.