ultimo - Acortar cadena sin cortar palabras en JavaScript

split javascript ejemplo

Question

No soy muy bueno con la manipulación de cadenas en JavaScript, y me preguntaba cómo podrías acortar una cadena sin cortar ninguna palabra. Sé cómo usar subcadena, pero no indexOf o nada realmente bien.

Digamos que tenía la siguiente cadena:

text = "this is a long string I cant display"

Quiero recortarlo a 10 caracteres, pero si no termina con un espacio, termine la palabra. No quiero que la variable de cadena se vea así:

"Esto es una cadena larga, no puedo dis"

Quiero que termine la palabra hasta que ocurra un espacio.

Answer 1

Actualizado desde @ NT3RP Encontré que si la cadena golpea un espacio por primera vez, terminará borrando esa palabra haciendo que la cadena sea una palabra más corta de lo que puede ser. Así que simplemente lancé una declaración if else para verificar que maxLength no caiga en un espacio.

codepen.io

var yourString = "The quick brown fox jumps over the lazy dog"; //replace with your string.
var maxLength = 15 // maximum number of characters to extract

if (yourString[maxLength] !== " ") {

//trim the string to the maximum length
var trimmedString = yourString.substr(0, maxLength);

alert(trimmedString)

//re-trim if we are in the middle of a word
trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
}

else {
  var trimmedString = yourString.substr(0, maxLength);
}

alert(trimmedString)

Answer 2

Basado en la respuesta de NT3RP que no maneja algunos casos de esquina, hice este código. Garantiza que no se devuelve un texto con un tamaño> evento maxLength ... Se agregó una elipsis ... al final.

Esto también maneja algunos casos de esquina como un texto que tiene una sola palabra que es> maxLength

shorten: function(text,maxLength,options) {
    if ( text.length <= maxLength ) {
        return text;
    }
    if ( !options ) options = {};
    var defaultOptions = {
        // By default we add an ellipsis at the end
        suffix: true,
        suffixString: " ...",
        // By default we preserve word boundaries
        preserveWordBoundaries: true,
        wordSeparator: " "
    };
    $.extend(options, defaultOptions);
    // Compute suffix to use (eventually add an ellipsis)
    var suffix = "";
    if ( text.length > maxLength && options.suffix) {
        suffix = options.suffixString;
    }

    // Compute the index at which we have to cut the text
    var maxTextLength = maxLength - suffix.length;
    var cutIndex;
    if ( options.preserveWordBoundaries ) {
        // We use +1 because the extra char is either a space or will be cut anyway
        // This permits to avoid removing an extra word when there''s a space at the maxTextLength index
        var lastWordSeparatorIndex = text.lastIndexOf(options.wordSeparator, maxTextLength+1);
        // We include 0 because if have a "very long first word" (size > maxLength), we still don''t want to cut it
        // But just display "...". But in this case the user should probably use preserveWordBoundaries:false...
        cutIndex = lastWordSeparatorIndex > 0 ? lastWordSeparatorIndex : maxTextLength;
    } else {
        cutIndex = maxTextLength;
    }

    var newText = text.substr(0,cutIndex);
    return newText + suffix;
}

Supongo que puedes eliminar fácilmente la dependencia de jquery si esto te molesta.

Answer 3

Esto excluye la palabra final en lugar de incluirla.

function smartTrim(str, length, delim, appendix) {
    if (str.length <= length) return str;

    var trimmedStr = str.substr(0, length+delim.length);

    var lastDelimIndex = trimmedStr.lastIndexOf(delim);
    if (lastDelimIndex >= 0) trimmedStr = trimmedStr.substr(0, lastDelimIndex);

    if (trimmedStr) trimmedStr += appendix;
    return trimmedStr;
}

Uso:

smartTrim(yourString, 11, '' '', '' ...'')
"The quick ..."

Answer 4

Estoy sorprendido de que para un problema simple como este haya tantas respuestas que sean difíciles de leer y algunas, incluida la elegida, no funcionen.

Por lo general, quiero que la cadena de resultado sea como máximo maxLen caracteres. También uso esta misma función para acortar las babosas en las URL.

str.lastIndexOf(searchValue[, fromIndex]) toma un segundo parámetro que es el índice en el que comenzar a buscar hacia atrás en la cadena, haciendo que las cosas sean eficientes y simples.

// Shorten a string to less than maxLen characters without truncating words.
function shorten(str, maxLen, separator = '' '') {
  if (str.length <= maxLen) return str;
  return str.substr(0, str.lastIndexOf(separator, maxLen));
}

Este es un resultado de muestra:

for (var i = 0; i < 50; i += 3) 
  console.log(i, shorten("The quick brown fox jumps over the lazy dog", i));

 0 ""
 3 "The"
 6 "The"
 9 "The quick"
12 "The quick"
15 "The quick brown"
18 "The quick brown"
21 "The quick brown fox"
24 "The quick brown fox"
27 "The quick brown fox jumps"
30 "The quick brown fox jumps over"
33 "The quick brown fox jumps over"
36 "The quick brown fox jumps over the"
39 "The quick brown fox jumps over the lazy"
42 "The quick brown fox jumps over the lazy"
45 "The quick brown fox jumps over the lazy dog"
48 "The quick brown fox jumps over the lazy dog"

Y para la babosa:

for (var i = 0; i < 50; i += 10) 
  console.log(i, shorten("the-quick-brown-fox-jumps-over-the-lazy-dog", i, ''-''));

 0 ""
10 "the-quick"
20 "the-quick-brown-fox"
30 "the-quick-brown-fox-jumps-over"
40 "the-quick-brown-fox-jumps-over-the-lazy"

Answer 5

Hay muchas formas de hacerlo, pero una expresión regular es un método útil de una línea:

"this is a longish string of text".replace(/^(.{11}[^/s]*).*/, "$1"); 
//"this is a longish"

Esta expresión devuelve los primeros 11 (cualesquiera) caracteres más cualquier carácter posterior no espacial.

Script de ejemplo:

<pre>
<script>
var t = "this is a longish string of text";

document.write("1:   " + t.replace(/^(.{1}[^/s]*).*/, "$1") + "/n");
document.write("2:   " + t.replace(/^(.{2}[^/s]*).*/, "$1") + "/n");
document.write("5:   " + t.replace(/^(.{5}[^/s]*).*/, "$1") + "/n");
document.write("11:  " + t.replace(/^(.{11}[^/s]*).*/, "$1") + "/n");
document.write("20:  " + t.replace(/^(.{20}[^/s]*).*/, "$1") + "/n");
document.write("100: " + t.replace(/^(.{100}[^/s]*).*/, "$1") + "/n");
</script>

Salida:

1:   this
2:   this
5:   this is
11:  this is a longish
20:  this is a longish string
100: this is a longish string of text

Answer 6

Llego tarde a la fiesta, pero esta es una solución pequeña y fácil que surgió para devolver una cantidad de palabras.

No está directamente relacionado con su requisito de caracteres , pero tiene el mismo resultado que creo que buscaba.

function truncateWords(sentence, amount, tail) {
  const words = sentence.split('' '');

  if (amount >= words.length) {
    return sentence;
  }

  const truncated = words.slice(0, amount);
  return `${truncated.join('' '')}${tail}`;
}

const sentence = ''Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.'';

console.log(truncateWords(sentence, 10, ''...''));

Vea el ejemplo de trabajo aquí: https://jsfiddle.net/bx7rojgL/

Answer 7

Lodash tiene una función específicamente escrita para esto: _.truncate

const truncate = _.truncate
const str = ''The quick brown fox jumps over the lazy dog''

truncate(str, {
  length: 30, // maximum 30 characters
  separator: /,?/.* +/ // separate by spaces, including preceding commas and periods
})

// ''The quick brown fox jumps...''

Answer 8

Por lo que vale, escribí esto para truncar al límite de palabras sin dejar signos de puntuación o espacios en blanco al final de la cadena:

function truncateStringToWord(str, length, addEllipsis)
{
    if(str.length <= length)
    {
        // provided string already short enough
        return(str);
    }

    // cut string down but keep 1 extra character so we can check if a non-word character exists beyond the boundary
    str = str.substr(0, length+1);

    // cut any non-whitespace characters off the end of the string
    if (/[^/s]+$/.test(str))
    {
        str = str.replace(/[^/s]+$/, "");
    }

    // cut any remaining non-word characters
    str = str.replace(/[^/w]+$/, "");

    var ellipsis = addEllipsis && str.length > 0 ? ''&hellip;'' : '''';

    return(str + ellipsis);
}

var testString = "hi , how are you? Spare";
var i = testString.length;

document.write(''<strong>Without ellipsis:</strong><br>'');

while(i > 0)
{
  document.write(i+'': "''+ truncateStringToWord(testString, i) +''"<br>'');
  i--;
}

document.write(''<strong>With ellipsis:</strong><br>'');

i = testString.length;
while(i > 0)
{
  document.write(i+'': "''+ truncateStringToWord(testString, i, true) +''"<br>'');
  i--;
}

Answer 9

Puedes recortar espacios con esto:

var trimmedString = flabbyString.replace(/^/s*(.*)/s*$/, ''$1'');

Answer 10

Si entiendo correctamente, quiere acortar una cuerda a una cierta longitud (por ejemplo, acortar "The quick brown fox jumps over the lazy dog" a, digamos, 6 caracteres sin cortar ninguna palabra).

Si este es el caso, puede intentar algo como lo siguiente:

var yourString = "The quick brown fox jumps over the lazy dog"; //replace with your string.
var maxLength = 6 // maximum number of characters to extract

//trim the string to the maximum length
var trimmedString = yourString.substr(0, maxLength);

//re-trim if we are in the middle of a word
trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))

Answer 11

Todos parecen olvidar que indexOf toma dos argumentos: la cadena que coincide y el índice de caracteres desde el que empezar a buscar. Puede dividir la cadena en el primer espacio después de 10 caracteres.

function cutString(s, n){
    var cut= s.indexOf('' '', n);
    if(cut== -1) return s;
    return s.substring(0, cut)
}
var s= "this is a long string i cant display";
cutString(s, 10)

/*  returned value: (String)
this is a long
*/

Answer 12

Tomé un enfoque diferente. Si bien necesitaba un resultado similar, quería mantener mi valor de retorno por debajo de la longitud especificada.

function wordTrim(value, length, overflowSuffix) {
    value = value.trim();
    if (value.length <= length) return value;
    var strAry = value.split('' '');
    var retString = strAry[0];
    for (var i = 1; i < strAry.length; i++) {
        if (retString.length >= length || retString.length + strAry[i].length + 1 > length) break;
        retString += " " + strAry[i];
    }
    return retString + (overflowSuffix || '''');
}

Editar He refactorizado un poco aquí: JSFiddle Example . Vuelve a unirse al conjunto original en lugar de concatenar.

function wordTrim(value, length, overflowSuffix) {
    if (value.length <= length) return value;
    var strAry = value.split('' '');
    var retLen = strAry[0].length;
    for (var i = 1; i < strAry.length; i++) {
        if(retLen == length || retLen + strAry[i].length + 1 > length) break;
        retLen+= strAry[i].length + 1
    }
    return strAry.slice(0,i).join('' '') + (overflowSuffix || '''');
}

Answer 13

function shorten(str,n) {
  return (str.match(RegExp(".{"+n+"}//S*"))||[str])[0];
}

shorten("Hello World", 3); // "Hello"

// SHORTEN STRING TO WHOLE WORDS
function shorten(s,l) {
  return (s.match(new RegExp(".{"+l+"}//S*"))||[s])[0];
}

console.log( shorten("The quick brown fox jumps over the lazy dog", 6) ); // "The quick"