Nur 10 Zeichen einer langen Zeichenfolge anzeigen?

Wie kann ich mit JQuery eine lange Textzeichenfolge (wie einen Querystring) so einstellen, dass maximal 10 Zeichen angezeigt werden?

Sorry Leute, ich bin ein Neuling bei JavaScript & JQuery: S
Jede Hilfe wäre sehr dankbar.

Wenn ich das richtig verstehe, möchten Sie eine Zeichenfolge auf 10 Zeichen beschränken?

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

So ähnlich?

Und hier ist ein jQuery-Beispiel:

HTML-Textfeld:

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

jQuery-Code zur Begrenzung seiner Größe:

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

Als Beispiel können Sie den obigen jQuery-Code verwenden, um den Benutzer daran zu hindern, während der Eingabe mehr als 10 Zeichen einzugeben. Das folgende Code-Snippet macht genau das:

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

Update : Das obige Code-Snippet wurde nur verwendet, um eine Beispielverwendung anzuzeigen.

Das folgende Codefragment behandelt Ihr Problem mit dem DIV-Element:

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

Bitte beachten Sie, dass ich textanstelle von valin diesem Fall verwende, da die valMethode nicht mit dem DIV-Element zu funktionieren scheint.

Eigene Antwort erstellen, da niemand daran gedacht hat, dass die Aufteilung möglicherweise nicht erfolgt ist (kürzerer Text). In diesem Fall möchten wir nicht '...' als Suffix hinzufügen.

Der ternäre Operator wird das klären:

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

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

Kann geschlossen werden, um zu funktionieren:

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

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

Und erweitern Sie auf Helferklasse, damit Sie sogar wählen können, ob Sie die Punkte möchten oder nicht:

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

Ergebnisvariable enthält "Ich bin zu 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 (auf doc bereit)

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

Wenn der Text mehrere Wörter enthält und jedes auf maximal 10 Zeichen begrenzt werden soll, können Sie Folgendes tun:

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

Was Sie auch tun sollten, wenn Sie die Zeichenfolge auf zehn Zeichen kürzen, ist das Hinzufügen der tatsächlichen HTML-Ellipsen-Entität: …anstelle von drei Punkten.

Das sieht für mich eher so aus, wie Sie es wahrscheinlich wollen.

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

Sie geben ihm Ihr HTML-Element in der ersten Zeile und dann nimmt es den gesamten Text, ersetzt URLs durch 10 Zeichen lange Versionen und gibt es an Sie zurück. Es scheint ein wenig seltsam, nur 3 der URL-Zeichen zu haben, daher würde ich dies nach Möglichkeit empfehlen.

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

Dies würde das http: // oder https: // herausreißen und bis zu 10 Zeichen von www.example.com drucken

Obwohl dies die Zeichenfolge nicht auf genau 10 Zeichen beschränkt, lassen Sie den Browser die Arbeit mit CSS für Sie erledigen:

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

Fügen Sie dann für die Tabellenzelle, die die Zeichenfolge enthält, die obige Klasse hinzu und legen Sie die maximal zulässige Breite fest. Das Ergebnis sollte am Ende besser aussehen als alles, was auf der Grundlage der Messung der Saitenlänge durchgeführt wird.

@ jolly.exe

Schönes Beispiel Jolly. Ich habe Ihre Version aktualisiert, wodurch die Zeichenlänge im Gegensatz zur Anzahl der Wörter begrenzt wird. Ich habe auch das Setzen des Titels auf das echte ursprüngliche innerHTML hinzugefügt, damit Benutzer den Mauszeiger bewegen und sehen können, was abgeschnitten ist.

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

Versuche dies :)

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

Zeig das "Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Text Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext Langtext "

zu

langer Text langer Text langer ...

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