Nur 10 Zeichen einer langen Zeichenfolge anzeigen?

84

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.

Nasir
quelle
Können Sie anhand eines Beispiels klarstellen?
Andy E
Ist es jquery, weil es eine Zeichenfolge in einem DOM-Element ist?
sje397
1
@Gopi Ja, ich meine Ellipsengröße Zur Verdeutlichung ... Ich arbeite an einem Intranetsystem, in dem Benutzer Fälle ansprechen können ... Einige Benutzer fügen einen superlangen Querystring hinzu, der ein Tabellenlayout unterbricht, wenn er auf der Homepage angezeigt wird. Ich möchte diesen Querystring abfangen, indem ich (mit JQuery) nach etwas suche, das mehr als 10 Zeichen plus Leerzeichen enthält, und ihn ellipsieren (z. B. this = is-a-wirklich-long & string ...). Bitte lassen Sie mich wissen, ob dies sinnvoll ist. Danke
Nasir
1
Es funktionierte bei hier gut Sucess!
Tran Anh Hien
Browser können automatisch Auslassungszeichen zu Zeichenfolgen hinzufügen, die die Grenzen eines Elements überschreiten würden (siehe meine Antwort unten)
Alnitak

Antworten:

166

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?

Sebs
quelle
15
Die if- Anweisung ist hier optional. str.substring (0,10) auf einem String mit weniger als 10 Zeichen würde nicht betroffen bleiben :)
Andy E
10
Die if-Anweisung kann jedoch für Folgendes verwendet werden: {var str = 'Eine sehr lange Zeichenfolge'; wenn (str.length> 10) str = str.substring (0,10) + "..."; }
Daniel Wedlund
@ Daniel: stimmt, es wäre notwendig, eine Ellipse hinzuzufügen. Zum Glück habe ich das Wort optional verwendet :-)
Andy E.
4
@ Daniel, "if (str.length> 10) str = str.substring (0,10) +" ... ";}" ist falsch, weil der Ergebnisstring eine Länge von 13 hat, nicht 10 !! richtig: "if (str.length> 10) str = str.substring (0,10-3) +" ... ";}"
Floyd
1
Hier ist ein Leistungstest für diejenigen, die sich interessieren. Sie funktionieren fast gleich, wenn der Fall, in dem Teilzeichenfolgen tatsächlich benötigt werden, in 50% der Fälle auftritt.
Juan Mendes
22

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.

Giuseppe Accaputo
quelle
Hallo Giu, ich beschäftige mich nicht mit dem Text, wenn er eingegeben wird ... sondern wenn er angezeigt wird und mein Tabellenlayout beschädigt. Der Querystring-Text wird in einem DIV namens .tasks-overflow
Nasir
@ Nasir Danke für den Hinweis; Ich habe meine Antwort aktualisiert. es sollte Ihnen helfen, Ihr kleines Problem zu lösen
Giuseppe Accaputo
Hallo Giu, ich habe deinen Code ausprobiert und er hat nicht funktioniert. Ich möchte, dass diese lange Zeichenfolge "thisisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongquerystring" als "thisisonelooo ..." angezeigt wird
Nasir
So sieht der Code aus: $ (document) .ready (function () {$ (".tasks-overflow: enthält ('http: //')") .each (function () {var self = $ (this ), txt = self.text (); txt = txt.replace (/ (http [s] *: [\ / \] {2}) [^ \ s] * / g, '$ 1 ...'); self.text (txt);}); // Giu-Code var elem = $ (". Aufgabenüberlauf"); if (elem) {if (elem.val (). Länge> 10) elem.val (elem. val (). substr (0,10))}});
Nasir
@ Nasir Es tut mir leid; Meine alte Antwort enthielt die valMethode, die für DIV-Elemente nicht zu funktionieren scheint. Ich habe meine Antwort erneut aktualisiert und jetzt wird die textMethode verwendet, um den Text zu ändern, der perfekt funktionieren sollte (erneut lokal getestet). Könnten Sie es bitte noch einmal mit meinem aktualisierten Code testen und mich wissen lassen?
Giuseppe Accaputo
19

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

Ergebnisvariable enthält "Ich bin zu l ..."

Ranjita Naik
quelle
10
('very long string'.slice(0,10))+'...'
// "very long ..."
Kai Light
quelle
5

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);
sje397
quelle
2
.text () ist besser geeignet als .html (), wenn nur Text behandelt wird.
Andy E
Hallo sje397, ich muss in der Lage sein, andere Wörter vor und nach dieser Zeichenfolge zu ignorieren (diese Zeichenfolge ist ein langer Querystring und hat keine Leerzeichen). Danke
Nasir
@Nasir - Sie können die Argumente in substr ändern ... oder Sie möchten sich reguläre Ausdrücke ansehen.
sje397
4

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: &hellip;anstelle von drei Punkten.

Ken Ray
quelle
3

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

mraaroncruz
quelle
2

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.

Alnitak
quelle
1

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

Versuche dies :)

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

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;
            }
         };
Code Spy
quelle
Du denkst hier über Worte nach. Die Frage erwähnt Charaktere
Victor Fernandes