¿Mostrar solo 10 caracteres de una cadena larga?

84

¿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.

Nasir
fuente
¿Puedes aclarar con un ejemplo?
Andy E
¿Es jquery porque es una cadena en un elemento DOM?
sje397
1
@Gopi, sí, me refiero a elipsize Para aclarar ... Estoy trabajando en un sistema de intranet donde los usuarios pueden plantear casos ... algunos usuarios agregan una cadena de consulta súper larga que rompe el diseño de una tabla cuando se muestra en la página de inicio. Quiero interceptar esta cadena de consulta comprobando (usando JQuery) cualquier cosa que tenga más de 10 caracteres sin espacios y elipsarla (por ejemplo, this = is-a-really-long & string ...) Por favor, avíseme si esto tiene sentido. Gracias
Nasir
1
Se trabajó en aquí Buen Éxito!
Tran Anh Hien
los navegadores pueden agregar puntos suspensivos automáticamente a las cadenas que romperían los límites de un elemento (vea mi respuesta a continuación)
Alnitak

Respuestas:

166

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?

Sebs
fuente
15
La declaración if es opcional aquí. str.substring (0,10) en una cadena con menos de 10 caracteres no se vería afectada :)
Andy E
10
pero la instrucción if puede usarse para algo como: {var str = 'Alguna cadena muy larga'; if (str.length> 10) str = str.substring (0,10) + "..."; }
Daniel Wedlund
@Daniel: cierto, sería necesario agregar una elipsis. Afortunadamente usé la palabra opcional :-)
Andy E
4
@Daniel, "if (str.length> 10) str = str.substring (0,10) +" ... ";}" es incorrecto porque la cadena de resultados tiene una longitud de 13, no 10 !! correcto: "if (str.length> 10) str = str.substring (0,10-3) +" ... ";}"
Floyd
1
Aquí hay una prueba de rendimiento para quienes se preocupan. Funcionan casi de la misma manera si el caso en el que realmente se necesita una subcadena ocurre el 50% del tiempo.
Juan Mendes
22

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.

Giuseppe Accaputo
fuente
Hola Giu, no estoy tratando con el texto cuando se ingresa ... sino cuando se muestra y se rompe el diseño de mi tabla. El texto de la cadena de consulta se muestra en un DIV llamado .tasks-overflow
Nasir
@Nasir Gracias por la sugerencia; Actualicé mi respuesta; debería ayudarlo a resolver su pequeño problema
Giuseppe Accaputo
Hola Giu, he probado tu código y no ha funcionado. Quiero que esta cadena larga 'thisisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongquerystring' se muestre como 'thisisonelooo ...'
Nasir
Así es como se ve el código: $ (documento) .ready (function () {$ (".tasks-overflow: contains ('http: //')") .each (function () {var self = $ (this ), txt = self.text (); txt = txt.replace (/ (http [s] *: [\ / \] {2}) [^ \ s] * / g, '$ 1 ...'); self.text (txt);}); // Código Giu var elem = $ (". desbordamiento de tareas"); if (elem) {if (elem.val (). length> 10) elem.val (elem. val (). substr (0,10))}});
Nasir
@Nasir lo siento; mi respuesta anterior contenía el valmétodo, que no parece funcionar para elementos DIV. Actualicé mi respuesta nuevamente, y ahora el textmétodo se usa para alterar el texto, que debería funcionar perfectamente (lo probé localmente, nuevamente). ¿Podrías probarlo de nuevo con mi código actualizado y avisarme?
Giuseppe Accaputo
19

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));
Tatranskymedved
fuente
18
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 ..."

Ranjita Naik
fuente
10
('very long string'.slice(0,10))+'...'
// "very long ..."
Luz de Kai
fuente
5

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);
sje397
fuente
2
.text () es más apropiado que .html () cuando se trata solo de texto.
Andy E
Hola sje397, necesito poder ignorar otras palabras antes y después de esta cadena (esta cadena es una cadena de consulta larga y no tiene espacios) gracias
Nasir
@Nasir: puede cambiar los argumentos a substr ... o es posible que desee ver expresiones regulares.
sje397
4

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

Ken Ray
fuente
3

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

mraaroncruz
fuente
2

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.

Alnitak
fuente
1

@ 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'); 
DaFrenzy
fuente
1

Prueba esto :)

var mystring = "How do I get a long text string";
mystring = mystring.substring(0,10);
alert(mystring);
Vishal P Gothi
fuente
-2

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;
            }
         };
Código espía
fuente
Estás considerando las palabras aquí. La pregunta menciona personajes
Victor Fernandes