web-dev-qa-db-fra.com

N'afficher que 10 caractères d'une longue chaîne?

Comment obtenir une longue chaîne de texte (telle qu'une chaîne de requête) pour afficher un maximum de 10 caractères à l'aide de JQuery?

Désolé les gars, je suis novice chez JavaScript & JQuery: S
Toute aide serait grandement appréciée.

javascriptjquerysubstringstring-length
60
Nasir

Si je comprends bien, vous voulez limiter une chaîne à 10 caractères?

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

Quelque chose comme ca?

135
Sebs

Et voici un exemple jQuery:

Champ de texte HTML:

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

code jQuery pour limiter sa taille:

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

Par exemple, vous pouvez utiliser le code jQuery ci-dessus pour empêcher l’utilisateur de saisir plus de 10 caractères lorsqu’il tape; l'extrait de code suivant fait exactement cela:

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

Update: L'extrait de code ci-dessus n'a été utilisé que pour montrer un exemple d'utilisation. 

L'extrait de code suivant traitera votre problème avec l'élément DIV:

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

Veuillez noter que j'utilise text au lieu de val dans ce cas, car la méthode val ne semble pas fonctionner avec l'élément DIV.

18
Giuseppe Accaputo

Créer sa propre réponse, car personne n'a considéré que la scission pourrait ne pas avoir lieu (texte plus court). Dans ce cas, nous ne voulons pas ajouter le suffixe "...".

L'opérateur ternaire va régler ce problème:

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

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

Peut être fermé pour fonctionner:

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

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

Et développez-le afin que vous puissiez même choisir si vous voulez les points ou non:

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));
8
Tatranskymedved
('very long string'.slice(0,10))+'...'
// "very long ..."
5
Kai Light

html 

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

javascript (sur doc ready)

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

Si vous avez plusieurs mots dans le texte et que vous voulez que chacun soit limité à 10 caractères au maximum, vous pouvez faire:

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

Ce que vous devez également faire lorsque vous tronquez la chaîne en dix caractères est d’ajouter l’entité ellipses html réelle: &hellip;, plutôt que trois points.

4
Ken Ray

Cela me semble plus que ce que vous voulez probablement.

$(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) + "..."
    });
}});


vous lui donnez votre élément html dans la première ligne, puis il prend tout le texte, remplace les urls par des versions de 10 caractères et vous le renvoie . Cela semble un peu étrange de n'avoir que 3 caractères d'URL. donc je recommanderais ceci si possible.

$(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) + "..."
    });
}});

qui déchirerait le http: // ou https: // et imprimerait jusqu'à 10 caractères de www.example.com

3
mraaroncruz

Bien que cela ne limite pas la chaîne à 10 caractères, pourquoi ne pas laisser le navigateur faire le travail pour vous avec CSS:

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

puis, pour la cellule de tableau contenant la chaîne, ajoutez la classe ci-dessus et définissez la largeur maximale autorisée. Le résultat devrait être meilleur que tout ce qui a été fait sur la base de la mesure de la longueur de la chaîne.

1
Alnitak
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 résultat contient "je suis trop l ..."

1
Ranjita Naik

@ jolly.exe 

Bel exemple Jolly. J'ai mis à jour votre version qui limite la longueur des caractères par opposition au nombre de mots. J'ai également ajouté la définition du titre au véritable innerHTML d'origine, afin que les utilisateurs puissent survoler et voir ce qui est tronqué. 

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

Essaye ça :)

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