Manera inteligente de truncar cadenas largas

¿Alguien tiene una solución / biblioteca más sofisticada para truncar cadenas con JavaScript y poner puntos suspensivos al final, que la obvia:

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

Básicamente, verifica la longitud de la cadena dada. Si es más largo que una longitud determinada n, córtelo a la longitud n( substro slice) y agregue la entidad html …(...) a la cadena recortada.

Tal método parece

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

Si por 'más sofisticado' te refieres a truncar en el límite de la última palabra de una cadena, entonces necesitas una verificación adicional. Primero recorta la cadena a la longitud deseada, luego recorta el resultado de eso a su último límite de palabra

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

Puede extender el Stringprototipo nativo con su función. En ese caso, el strparámetro debe eliminarse y strdentro de la función debe reemplazarse con 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;";
};

Más desarrolladores dogmáticos pueden capitular fuertemente sobre eso (" No modifique los objetos que no posee ". Sin embargo, no me importaría).

Un enfoque sin extender el Stringprototipo es crear su propio objeto auxiliar, que contiene la cadena (larga) que proporciona y el método mencionado anteriormente para truncarlo. Eso es lo que hace el fragmento de abajo.

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>

Finalmente, puede usar css solo para truncar cadenas largas en nodos HTML. Le da menos control, pero puede ser una solución viable.

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>

Tenga en cuenta que esto solo debe hacerse para Firefox.

Todos los demás navegadores admiten una solución CSS (consulte la tabla de soporte ):

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

La ironía es que obtuve ese fragmento de código de Mozilla MDC.

Hay razones válidas por las que las personas pueden desear hacer esto en JavaScript en lugar de CSS.

Para truncar a 8 caracteres (incluidos puntos suspensivos) en JavaScript:

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

o

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

Utilice el truncamiento de lodash

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

o subrayar.cadena truncada .

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

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

De alguna manera, el código anterior no funcionaba para algún tipo de copia de texto pegado o escrito en la aplicación vuejs. Así que usé lodash truncate y ahora funciona bien.

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

Aquí está mi solución, que tiene algunas mejoras sobre otras sugerencias:

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

Eso:

• Se trunca en el primer espacio después de 25 caracteres.
• Extiende el objeto String de JavaScript, por lo que se puede usar (y encadenar) en cualquier string.
• Recortará la cadena si el truncamiento resulta en un espacio final;
• Agregará la entidad de infierno unicode (puntos suspensivos) si la cadena truncada tiene más de 25 caracteres

La mejor función que he encontrado. Crédito a puntos suspensivos 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;
}

Ejemplos :

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 los navegadores modernos ahora admiten una solución CSS simple para agregar automáticamente puntos suspensivos si una línea de texto excede el ancho disponible:

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

(Tenga en cuenta que esto requiere que el ancho del elemento esté limitado de alguna manera para que tenga algún efecto).

Basado en https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .

Cabe señalar que este enfoque no se limita en función del número de caracteres. Tampoco no funciona si es necesario para permitir que múltiples líneas de texto.

La mayoría de los marcos JavaScript modernos ( JQuery , Prototype , etc. ) tienen una función de utilidad añadida a String que maneja esto.

Aquí hay un ejemplo en Prototype:

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

Esta parece ser una de esas funciones con las que desea que otra persona se ocupe. Dejaría que el marco lo manejara, en lugar de escribir más código.

Tal vez me perdí un ejemplo de dónde alguien está manejando nulos, pero 3 respuestas TOP no funcionaron para mí cuando tenía nulos (Claro, me doy cuenta de que el manejo de errores es y millones de otras cosas NO es responsabilidad de la persona que responde la pregunta, pero desde Había usado una función existente junto con una de las excelentes respuestas de puntos suspensivos de truncamiento que pensé que proporcionaría a otros.

p.ej

javascript:

news.comments

utilizando la función de truncamiento

news.comments.trunc(20, true);

Sin embargo, en news.comments siendo nulo esto "se rompería"

Final

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

función trunc cortesía 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_;
 };

Mi simple verificador nulo (también busca cosas "nulas" literales (esto atrapa indefinido, "", nulo, "nulo", etc.)

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

A veces, los nombres de los archivos están numerados, donde el índice puede estar al principio o al final. Entonces quería acortar desde el centro de la cadena:

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

Tenga en cuenta que usé un carácter de relleno aquí con más de 1 byte en UTF-8.

Puede usar la función Ext.util.Format.ellipsis si está usando Ext.js.

Voté por la solución de Kooilnc. Muy buena solución compacta. Hay un caso pequeño que me gustaría abordar. Si alguien ingresa una secuencia de caracteres realmente larga por cualquier razón, no se truncará:

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 búsqueda rápida en Google encontré esto ... ¿Eso funciona para ti?

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

Desbordamiento de texto: puntos suspensivos es la propiedad que necesita. Con esto y un desbordamiento: oculto con un ancho específico, todo lo que supere obtendrá el efecto de tres puntos al final ... No olvide agregar espacios en blanco: ahora o el texto se colocará en varias líneas.

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

La respuesta de c_harm es, en mi opinión, la mejor. Tenga en cuenta que si desea usar

"My string".truncate(n)

Tendrá que usar un constructor de objetos regexp en lugar de un literal. También tendrás que escapar \Sal convertirlo.

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 el siguiente código

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

Corrección de la solución de Kooilnc:

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

Esto devuelve el valor de cadena en lugar del objeto de cadena si no necesita ser truncado.

Recientemente tuve que hacer esto y terminé 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, '...');
}

Se siente agradable y limpio para mí :)

Me gusta usar .slice () El primer argumento es el índice inicial y el segundo es el índice final. Todo en el medio es lo que obtienes.

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

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

En algún 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))

Esta función también hace el espacio truncado y las partes de palabras (ej .: Madre en Polilla ...)

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

salida:

esto es lo ...

12345 ...