Maneira inteligente de truncar seqüências longas

Alguém tem uma solução / biblioteca mais sofisticada para truncar seqüências de caracteres com JavaScript e colocar reticências no final do que a óbvia:

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

Essencialmente, você verifica o comprimento da sequência especificada. Se for maior que um determinado comprimento n, prenda-o no comprimento n( substrou slice) e adicione a entidade html …(…) à sequência cortada.

Esse método parece

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};

Se por "mais sofisticado" você quer dizer truncar no limite da última palavra de uma string, precisa de uma verificação extra. Primeiro, você recorta a string no comprimento desejado, depois recorta o resultado dela no limite da última palavra

function truncate( str, n, useWordBoundary ){
  if (str.length <= n) { return str; }
  const subString = str.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

Você pode estender o Stringprotótipo nativo com sua função. Nesse caso, o strparâmetro deve ser removido e, strdentro da função, deve ser substituído por this:

String.prototype.truncate = String.prototype.truncate || 
function ( n, useWordBoundary ){
  if (this.length <= n) { return this; }
  const subString = this.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

Mais desenvolvedores dogmáticos podem capitular você fortemente nisso (" Não modifique objetos que você não possui ". Eu não me importaria).

Uma abordagem sem estender o Stringprotótipo é criar seu próprio objeto auxiliar, contendo a cadeia (longa) fornecida e o método mencionado para truncá-lo. É isso que o trecho abaixo faz.

const LongstringHelper = str => {
  const sliceBoundary = str => str.substr(0, str.lastIndexOf(" "));
  const truncate = (n, useWordBoundary) => 
        str.length <= n ? str : `${ useWordBoundary 
          ? sliceBoundary(str.slice(0, n - 1))
          : str.substr(0, n - 1)}&hellip;`;
  return { full: str,  truncate };
}; 
const longStr = LongstringHelper(`Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum`);

const plain = document.querySelector("#resultTruncatedPlain");
const lastWord = document.querySelector("#resultTruncatedBoundary");
plain.innerHTML = 
  longStr.truncate(+plain.dataset.truncateat, !!+plain.dataset.onword);
lastWord.innerHTML = 
  longStr.truncate(+lastWord.dataset.truncateat, !!+lastWord.dataset.onword);
document.querySelector("#resultFull").innerHTML = longStr.full;

body {
  font: normal 12px/15px verdana, arial;
}

p {
  width: 450px;
}

#resultTruncatedPlain:before {
  content: 'Truncated (plain) n='attr(data-truncateat)': ';
  color: green;
}

#resultTruncatedBoundary:before {
  content: 'Truncated (last whole word) n='attr(data-truncateat)': ';
  color: green;
}

#resultFull:before {
  content: 'Full: ';
  color: green;
}

<p id="resultTruncatedPlain" data-truncateat="120" data-onword="0"></p>
<p id="resultTruncatedBoundary" data-truncateat="120" data-onword="1"></p>
<p id="resultFull"></p>

Por fim, você pode usar o css apenas para truncar seqüências longas em nós HTML. Dá menos controle, mas pode ser uma solução viável.

body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

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

.truncate:before{
  content: attr(data-longstring);
}

.truncate:hover::before {
  content: attr(data-longstring);
  width: auto;
  height: auto;
  overflow: initial;
  text-overflow: initial;
  white-space: initial;
  background-color: white;
  display: inline-block;
}

<div class="truncate" data-longstring="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></div>

Observe que isso só precisa ser feito para o Firefox.

Todos os outros navegadores suportam uma solução CSS (consulte a tabela de suporte ):

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 */
}

A ironia é que eu peguei esse trecho de código do Mozilla MDC.

Existem razões válidas pelas quais as pessoas podem querer fazer isso em JavaScript, em vez de CSS.

Para truncar até 8 caracteres (incluindo reticências) em JavaScript:

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

ou

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

Use o truncado do lodash

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

ou underscore.string está truncado .

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

('long text to be truncated').replace(/(.{250})..+/, "$1…");

De alguma forma, o código acima não estava funcionando para algum tipo de cópia colada ou texto escrito no aplicativo vuejs. Então eu usei o Lodash Truncate e agora está funcionando bem.

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});

Aqui está minha solução, que possui algumas melhorias em relação a outras sugestões:

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 + "&hellip;";
    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&hellip;"

Isto:

• Trunca no primeiro espaço após 25 caracteres
• Estende o objeto String JavaScript, para que possa ser usado em (e acorrentado a) qualquer string.
• Aparará a corda se o truncamento resultar em um espaço à direita;
• Adicionará a entidade hellip unicode (reticências) se a sequência truncada tiver mais de 25 caracteres

Melhor função que encontrei. Crédito para reticências de texto .

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;
}

Exemplos :

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"

Todos os navegadores modernos agora oferecem suporte a uma solução CSS simples para adicionar reticências automaticamente se uma linha de texto exceder a largura disponível:

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

(Observe que isso requer que a largura do elemento seja limitada de alguma forma para ter algum efeito.)

Com base em https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .

Note-se que essa abordagem não se limita com base no número de caracteres. Também não funciona se você precisar permitir várias linhas de texto.

As estruturas Javascript mais modernas ( JQuery , Prototype , etc ...) têm uma função de utilitário anexada a String que lida com isso.

Aqui está um exemplo no Prototype:

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

Parece uma daquelas funções que você deseja que outra pessoa lide / mantenha. Eu deixaria a estrutura lidar com isso, em vez de escrever mais código.

Talvez eu tenha perdido um exemplo de onde alguém está lidando com nulos, mas três respostas TOP não funcionaram para mim quando eu tinha nulos. Eu tinha usado uma função existente junto com uma das excelentes respostas de reticências de truncamento que pensei que forneceria para outras pessoas.

por exemplo

javascript:

news.comments

usando a função de truncamento

news.comments.trunc(20, true);

No entanto, em news.comments ser nulo, isso "quebraria"

Final

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

função trunc cortesia de 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_;
 };

Meu verificador nulo simples (verifica também a coisa "nula" literal (isso pega indefinido ",", nulo, "nulo", etc.)

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

Às vezes, os nomes dos arquivos são numerados, onde o índice pode estar no início ou no final. Então, eu queria encurtar do centro da string:

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);
}

Esteja ciente de que usei um caractere de preenchimento aqui com mais de 1 byte em UTF-8.

Você pode usar a função Ext.util.Format.ellipsis se estiver usando Ext.js.

Votei na solução do Kooilnc. Solução compacta realmente agradável. Há um pequeno caso que gostaria de abordar. Se alguém inserir uma sequência de caracteres muito longa por qualquer motivo, ela não será truncada:

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;
}

Com uma rápida pesquisa no Google, achei isso ... Isso funciona para você?

/**
 * 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

Estouro de texto: reticências são a propriedade que você precisa. Com isso e um estouro: oculto com uma largura específica, tudo o que ultrapassar terá o efeito de três períodos no final ... Não se esqueça de adicionar espaço em branco: nowrap ou o texto será colocado em várias linhas.

.wrap{
  text-overflow: ellipsis
  white-space: nowrap;
  overflow: hidden;
  width:"your desired width";
}
<p class="wrap">The string to be cut</p>

A resposta de c_harm é, na minha opinião, a melhor. Observe que se você quiser usar

"My string".truncate(n)

você precisará usar um construtor de objeto regexp em vez de um literal. Além disso, você terá que escapar \Sao convertê-lo.

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 + '&hellip;';
    };

Use o seguinte código

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

Corrigindo a solução da Kooilnc:

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

Isso retorna o valor da string em vez do objeto String, se não precisar ser truncado.

Recentemente, tive que fazer isso e acabei com:

/**
 * 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, '...');
}

Parece bom e limpo para mim :)

Eu gosto de usar .slice () O primeiro argumento é o índice inicial e o segundo é o índice final. Tudo no meio é o que você recebe de volta.

var long = "hello there! Good day to ya."
// hello there! Good day to ya.

var short  = long.slice(0, 5)
// hello

Em algum lugar inteligente: D

//My Huge Huge String
    let tooHugeToHandle = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).`
    
//Trim Max Length
 const maxValue = 50
// The barber.
 const TrimMyString = (string, maxLength, start = 0) => {
//Note - `start` is if I want to start after some point of the string
    	if (string.length > maxLength) {
    	let trimmedString = string.substr(start, maxLength)
    	 return (
    	   trimmedString.substr(
    	   start,
    	   Math.min(trimmedString.length,   trimmedString.lastIndexOf(' '))
           ) + ' ...'
         )
       }
    return string
}

console.log(TrimMyString(tooHugeToHandle, maxValue))

Essa função também trunca as partes do espaço e das palavras (por exemplo: Mãe na Mariposa ...)

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

uso:

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

resultado:

isso é lo ...

12345 ...