modo intelligente per abbreviare le stringhe lunghe con javascript

Qualcuno ha una soluzione / libreria più sofisticata per accorciare le stringhe con JavaScript, piuttosto che l’ovvia:

if(string.length > 25) { string = string.substring(0,24)+"..."; } 

 String.prototype.trunc = String.prototype.trunc || function(n){ return (this.length > n) ? this.substr(0, n-1) + '…' : this; }; 

Ora puoi fare:

 var s = 'not very long'; s.trunc(25); //=> not very long s.trunc(5); //=> not ... 

Se per “più sofisticato” intendi troncare l’ultima parola limite di una stringa, allora questo potrebbe essere ciò che desideri:

 String.prototype.trunc = function( n, useWordBoundary ){ if (this.length <= n) { return this; } var subString = this.substr(0, n-1); return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + "…"; }; 

ora puoi fare:

 s.trunc(11,true) // => not very... 

Se non vuoi estendere oggetti nativi, puoi usare:

 function truncate( n, useWordBoundary ){ if (this.length <= n) { return this; } var subString = this.substr(0, n-1); return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + "…"; }; // usage truncate.apply(s, [11, true]); // => not very... 

Si noti che questo deve essere fatto solo per Firefox.

Tutti gli altri browser supportano una soluzione CSS (vedi tabella di supporto ):

 p { white-space: nowrap; width: 100%; /* IE6 needs any width */ overflow: hidden; /* "overflow" value must be different from visible"*/ -o-text-overflow: ellipsis; /* Opera < 11*/ text-overflow: ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */ } 

L’ironia è che ho ricevuto questo frammento di codice da Mozilla MDC.

Usa il truncate di Lodash

 _.truncate('hi-diddly-ho there, neighborino'); // → 'hi-diddly-ho there, neighbo…' 

o underscore.string’s truncate .

 _('Hello world').truncate(5); => 'Hello...' 

Ecco la mia soluzione, che ha alcuni miglioramenti rispetto ad altri suggerimenti:

 String.prototype.truncate = function(){ var re = this.match(/^.{0,25}[\S]*/); var l = re[0].length; var re = re[0].replace(/\s$/,''); if(l < this.length) re = re + "…"; return re; } // "This is a short string".truncate(); "This is a short string" // "Thisstringismuchlongerthan25characters".truncate(); "Thisstringismuchlongerthan25characters" // "This string is much longer than 25 characters and has spaces".truncate(); "This string is much longer…" 

It:

  • Tronca sul primo spazio dopo 25 caratteri
  • Estende l'object String JavaScript, in modo che possa essere utilizzato (e incatenato a) qualsiasi stringa.
  • Riordina la stringa se il troncamento risulta in uno spazio finale;
  • Aggiungerà l' quadro hellip unicode (ellissi) se la stringa troncata è più lunga di 25 caratteri

Ci sono validi motivi per cui le persone potrebbero desiderare di farlo in JavaScript anziché in CSS.

Per troncare fino a 8 caratteri (esclusi i puntini di sospensione) in JavaScript:

 short = long.replace(/^(.{8}).+/, "$1…"); 

o

 short = long.replace(/^(.{8}).+/, "$1…"); 

La maggior parte dei moderni framework Javascript ( JQuery , Prototype , ecc .) Ha una funzione di utilità applicata a String che gestisce questo.

Ecco un esempio in Prototipo:

 'Some random text'.truncate(10); // -> 'Some ra...' 

Questa sembra una di quelle funzioni che vuoi che qualcun altro abbia a che fare con / mantenere. Avrei lasciato che fosse il framework a gestirlo, piuttosto che scrivere altro codice.

Tutti i browser moderni supportano ora una semplice soluzione CSS per aggiungere automaticamente un’ellissi se una riga di testo supera la larghezza disponibile:

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

(Nota che questo richiede che la larghezza dell’elemento sia limitata in qualche modo per avere qualche effetto).

Basato su https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .

Va notato che questo approccio non si limita in base al numero di caratteri. Inoltre, non funziona se è necessario consentire più righe di testo.

Forse mi è sfuggito un esempio di dove qualcuno sta gestendo i valori nulli, ma 3 risposte TOP non hanno funzionato per me quando avevo i null (Sicuramente mi rendo conto che la gestione degli errori è e milioni di altre cose NON è responsabilità della persona che risponde alla domanda, ma dal Avevo usato una funzione esistente insieme a una delle eccellenti risposte di ellissi di troncamento che pensavo di fornire per gli altri.

per esempio

javascript:

 news.comments 

usando la funzione di troncamento

 news.comments.trunc(20, true); 

Tuttavia, su news.comments nulli, questo si “spezzerebbe”

Finale

 checkNull(news.comments).trunc(20, true) 

funzione trunc per gentile concessione di KooiInc

 String.prototype.trunc = function (n, useWordBoundary) { console.log(this); var isTooLong = this.length > n, s_ = isTooLong ? this.substr(0, n - 1) : this; s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_; return isTooLong ? s_ + '…' : s_; }; 

Il mio semplice controllore nullo (controlla anche la cosa “nulla” letterale (questo prende undefined, “”, null, “null”, ecc.)

  function checkNull(val) { if (val) { if (val === "null") { return ""; } else { return val; } } else { return ""; } } 

È ansible utilizzare la funzione Ext.util.Format.ellipsis se si utilizza Ext.js.

Ho svalutato la soluzione di Kooilnc. Soluzione compatta davvero bella. C’è un piccolo caso che vorrei affrontare. Se qualcuno inserisce una sequenza di caratteri veramente lunga per qualsiasi motivo, non verrà troncato:

 function truncate(str, n, useWordBoundary) { var singular, tooLong = str.length > n; useWordBoundary = useWordBoundary || true; // Edge case where someone enters a ridiculously long string. str = tooLong ? str.substr(0, n-1) : str; singular = (str.search(/\s/) === -1) ? true : false; if(!singular) { str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str; } return tooLong ? str + '…' : str; } 

Con una rapida ricerca su Google ho trovato questo … Funziona per te?

 /** * Truncate a string to the given length, breaking at word boundaries and adding an elipsis * @param string str String to be truncated * @param integer limit Max length of the string * @return string */ var truncate = function (str, limit) { var bits, i; if (STR !== typeof str) { return ''; } bits = str.split(''); if (bits.length > limit) { for (i = bits.length - 1; i > -1; --i) { if (i > limit) { bits.length = i; } else if (' ' === bits[i]) { bits.length = i; break; } } bits.push('...'); } return bits.join(''); }; // END: truncate 

A volte i nomi dei file sono numerati, dove l’indice può essere all’inizio o alla fine. Quindi volevo accorciare dal centro della stringa:

 function stringTruncateFromCenter(str, maxLength) { const midChar = "…"; // character to insert into the center of the result var left, right; if (str.length <= maxLength) return str; // length of beginning part left = Math.ceil(maxLength / 2); // start index of ending part right = str.length - Math.floor(maxLength / 2) + 1; return str.substr(0, left) + midChar + str.substring(right); } 

Essere consapevoli del fatto che ho usato un carattere di riempimento qui con più di 1 byte in UTF-8.

La risposta di c_harm è secondo me la migliore. Si prega di notare che se si desidera utilizzare

 "My string".truncate(n) 

dovrai usare un costruttore di oggetti regexp piuttosto che un letterale. Dovrai anche sfuggire a \S durante la conversione.

 String.prototype.truncate = function(n){ var p = new RegExp("^.{0," + n + "}[\\S]*", 'g'); var re = this.match(p); var l = re[0].length; var re = re[0].replace(/\s$/,''); if (l < this.length) return re + '…'; }; 

Usa il seguente codice

  function trancateTitle (title) { var length = 10; if (title.length > length) { title = title.substring(0, length)+'...'; } return title; } 

Correggere la soluzione di Kooilnc:

 String.prototype.trunc = String.prototype.trunc || function(n){ return this.length>n ? this.substr(0,n-1)+'…' : this.toString(); }; 

Questo restituisce il valore stringa invece dell’object String se non ha bisogno di essere troncato.

Questa funzione esegue anche lo spazio troncato e le parti delle parole (es: Madre in Falena …)

 String.prototype.truc= function (length) { return this.length>length ? this.substring(0, length) + '…' : this; }; 

utilizzo:

 "this is long length text".trunc(10); "1234567890".trunc(5); 

produzione:

questo è lo …

12345 …

Di recente ho dovuto farlo e ho finito con:

 /** * Truncate a string over a given length and add ellipsis if necessary * @param {string} str - string to be truncated * @param {integer} limit - max length of the string before truncating * @return {string} truncated string */ function truncate(str, limit) { return (str.length < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...'); } 

Mi sembra carino e pulito 🙂

La migliore funzione che ho trovato. Credito a ellissi di testo .

 function textEllipsis(str, maxLength, { side = "end", ellipsis = "..." } = {}) { if (str.length > maxLength) { switch (side) { case "start": return ellipsis + str.slice(-(maxLength - ellipsis.length)); case "end": default: return str.slice(0, maxLength - ellipsis.length) + ellipsis; } } return str; } 

Esempi :

 var short = textEllipsis('a very long text', 10); console.log(short); // "a very ..." var short = textEllipsis('a very long text', 10, { side: 'start' }); console.log(short); // "...ng text" var short = textEllipsis('a very long text', 10, { textEllipsis: ' END' }); console.log(short); // "a very END"