Wyświetlać tylko 10 znaków z długiego ciągu?

Jak uzyskać długi ciąg tekstowy (taki jak querystring), aby wyświetlić maksymalnie 10 znaków, używając JQuery?

Przepraszam, jestem nowicjuszem w JavaScript i JQuery: S
Każda pomoc byłaby bardzo mile widziana.

Jeśli dobrze rozumiem, chcesz ograniczyć ciąg do 10 znaków?

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

Coś w tym stylu?

A oto przykład jQuery:

Pole tekstowe HTML:

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

Kod jQuery, aby ograniczyć jego rozmiar:

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

Na przykład możesz użyć powyższego kodu jQuery, aby uniemożliwić użytkownikowi wprowadzanie więcej niż 10 znaków podczas pisania; poniższy fragment kodu robi dokładnie to:

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

Aktualizacja : powyższy fragment kodu został użyty tylko do pokazania przykładowego zastosowania.

Poniższy fragment kodu rozwiąże problem z elementem DIV:

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

Zwróć uwagę , że używam textzamiast valw tym przypadku, ponieważ valmetoda wydaje się nie działać z elementem DIV.

Tworzenie własnej odpowiedzi, ponieważ nikt nie brał pod uwagę, że podział może się nie wydarzyć (krótszy tekst). W takim przypadku nie chcemy dodawać „...” jako sufiksu.

Operator potrójny rozwiąże to:

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

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

Może być zamknięty, aby działał:

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

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

I rozszerz do klasy pomocników, więc możesz nawet wybrać, czy chcesz kropki, czy nie:

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

Zmienna wynikowa zawiera „Jestem zbyt słaba ...”

('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 (w gotowym dokumencie)

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

Jeśli masz wiele słów w tekście i chcesz, aby każdy był ograniczony do maksymalnie 10 znaków, możesz zrobić:

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

Skracając ciąg do dziesięciu znaków, powinieneś również dodać rzeczywistą elipsę HTML: …zamiast trzech kropek.

To wygląda bardziej na to, czego prawdopodobnie chcesz.

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

dajesz mu swój element HTML w pierwszym wierszu, a następnie pobiera cały tekst, zastępuje adresy URL wersjami o długości 10 znaków i zwraca go do Ciebie. Wydaje się to trochę dziwne, mając tylko 3 znaki adresu URL, więc poleciłbym to, jeśli to możliwe.

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

co spowodowałoby wyrwanie http: // lub https: // i wydrukowanie do 10 znaków www.example.com

Chociaż nie ograniczy to ciągu do dokładnie 10 znaków, dlaczego nie pozwolić przeglądarce wykonać pracy za Ciebie za pomocą CSS:

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

a następnie dla komórki tabeli zawierającej ciąg dodaj powyższą klasę i ustaw maksymalną dozwoloną szerokość. Wynik powinien wyglądać lepiej niż cokolwiek zrobionego na podstawie pomiaru długości struny.

@ jolly.exe

Niezły przykład Jolly. Zaktualizowałem twoją wersję, która ogranicza długość znaków w przeciwieństwie do liczby słów. Dodałem również ustawienie tytułu do prawdziwego oryginalnego innerHTML, aby użytkownicy mogli najechać kursorem i zobaczyć, co jest obcięte.

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

Spróbuj tego :)

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

Pokaż to „długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst długi tekst "

do

długi tekst długi tekst długi ...

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