¿Mostrar solo 10 caracteres de una cadena larga?

¿Cómo obtengo una cadena de texto larga (como una cadena de consulta) para mostrar un máximo de 10 caracteres, usando JQuery?

Lo siento chicos, soy un novato en JavaScript y JQuery: S
Cualquier ayuda sería muy apreciada.

Si comprendo correctamente, ¿desea limitar una cadena a 10 caracteres?

var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10);

¿Algo como eso?

Y aquí hay un ejemplo de jQuery:

Campo de texto HTML:

<input type="text" id="myTextfield" />

código jQuery para limitar su tamaño:

var elem = $("#myTextfield");
if(elem) elem.val(elem.val().substr(0,10));

Como ejemplo, podría usar el código jQuery anterior para restringir que el usuario ingrese más de 10 caracteres mientras escribe; el siguiente fragmento de código hace exactamente esto:

$(document).ready(function() {
    var elem = $("#myTextfield");
    if (elem) {
        elem.keydown(function() {
            if (elem.val().length > 10)
                elem.val(elem.val().substr(0, 10));
        });
    }            
});

Actualización : el fragmento de código anterior solo se usó para mostrar un uso de ejemplo.

El siguiente fragmento de código manejará su problema con el elemento DIV:

$(document).ready(function() {
    var elem = $(".tasks-overflow");
    if(elem){
        if (elem.text().length > 10)
                elem.text(elem.text().substr(0,10))
    }
});

Tenga en cuenta que estoy usando en textlugar de valen este caso, ya que el valmétodo no parece funcionar con el elemento DIV.

Creando su propia respuesta, ya que nadie ha considerado que la división podría no ocurrir (texto más corto). En ese caso, no queremos agregar '...' como sufijo.

El operador ternario resolverá eso:

var text = "blahalhahkanhklanlkanhlanlanhak";
var count = 35;

var result = text.slice(0, count) + (text.length > count ? "..." : "");

Puede cerrarse para funcionar:

function fn(text, count){
    return text.slice(0, count) + (text.length > count ? "..." : "");
}

console.log(fn("aognaglkanglnagln", 10));

Y expanda a la clase de ayudantes para que pueda incluso elegir si quiere los puntos o no:

function fn(text, count, insertDots){
    return text.slice(0, count) + (((text.length > count) && insertDots) ? "..." : "");
}

console.log(fn("aognaglkanglnagln", 10, true));
console.log(fn("aognaglkanglnagln", 10, false));

var example = "I am too long string";
var result;

// Slice is JS function
result = example.slice(0, 10)+'...'; //if you need dots after the string you can add

La variable de resultado contiene "Soy demasiado l ..."

('very long string'.slice(0,10))+'...'
// "very long ..."

html

<p id='longText'>Some very very very very very very very very very very very long string</p>

javascript (listo para documentos)

var longText = $('#longText');
longText.text(longText.text().substr(0, 10));

Si tiene varias palabras en el texto y desea que cada una esté limitada a un máximo de 10 caracteres, puede hacer lo siguiente:

var longText = $('#longText');
var text = longText.text();
var regex = /\w{11}\w*/, match;
while(match = regex.exec(text)) {
    text = text.replace(match[0], match[0].substr(0, 10));
}
longText.text(text);

Lo que también debe hacer cuando trunca la cadena a diez caracteres es agregar la entidad de elipses html real:, en …lugar de tres puntos.

Esto me parece más a lo que probablemente quieras.

$(document).ready(function(){
var stringWithShorterURLs = getReplacementString($(".tasks-overflow").text());

function getReplacementString(str){
    return str.replace(/(https?\:\/\/[^\s]*)/gi,function(match){
        return match.substring(0,10) + "..."
    });
}});

le da su elemento html en la primera línea y luego toma todo el texto, reemplaza las URL con versiones de 10 caracteres y se lo devuelve. Parece un poco extraño tener solo 3 de los caracteres de la URL, así que lo recomendaría si es posible.

$(document).ready(function(){
var stringWithShorterURLs = getReplacementString($(".tasks-overflow p").text());

function getReplacementString(str){
    return str.replace(/https?\:\/\/([^\s]*)/gi,function(match){
        return match.substring(0,10) + "..."
    });
}});

que arrancaría http: // o https: // e imprimiría hasta 10 caracteres de www.example.com

Aunque esto no limitará la cadena a exactamente 10 caracteres, ¿por qué no dejar que el navegador haga el trabajo por usted con CSS?

.no-overflow {
    white-space: no-wrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

y luego, para la celda de la tabla que contiene la cadena, agregue la clase anterior y establezca el ancho máximo permitido. El resultado debería terminar luciendo mejor que cualquier otra cosa basada en medir la longitud de la cuerda.

@ jolly.exe

Buen ejemplo Jolly. Actualicé su versión que limita la longitud de los caracteres en lugar de la cantidad de palabras. También agregué establecer el título en el innerHTML original real, para que los usuarios puedan desplazarse y ver lo que está truncado.

HTML

<div id="stuff">a reallly really really long titleasdfasdfasdfasdfasdfasdfasdfadsf</div> 

JS

 function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 30;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };

cutString('stuff'); 

Prueba esto :)

var mystring = "How do I get a long text string";
mystring = mystring.substring(0,10);
alert(mystring);

Mostrar este "texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo texto largo "

a

texto largo texto largo ...

        function cutString(text){    
            var wordsToCut = 5;
            var wordsArray = text.split(" ");
            if(wordsArray.length>wordsToCut){
                var strShort = "";
                for(i = 0; i < wordsToCut; i++){
                    strShort += wordsArray[i] + " ";
                }   
                return strShort+"...";
            }else{
                return text;
            }
         };