Display only 10 characters of a long string?

Question

How do I get a long text string (like a querystring) to display a maximum of 10 characters, using JQuery?

Sorry guys I'm a novice at JavaScript & JQuery :S
Any help would be greatly appreciated.

Scenarist

Can you clarify with an example? – Teenyweeny

Is it jquery because it's a string in a DOM element? – Paripinnate

@Gopi yes I mean ellipsize To clarify...I am working on a intranet system where users are able to raise cases...some users add a super long querystring that breaks a table layout when displayed on the homepage. I want to intercept this querystring by checking(using JQuery) for anything that is 10 characters plus without spaces and ellipsize it (e.g. this=is-a-really-long&string... ) Please let me know if this makes sense. Thanks – Scenarist

It worked at here Good Sucess! – Portie

browsers can automatically add ellipsis to strings that would break the bounds of an element (see my answer below) – Banerjee

Answer 1

If I understand correctly you want to limit a string to 10 characters?

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

Something like that?

Zaremski

The if statement is optional here. str.substring(0,10) on a string with less than 10 characters would remain unaffected :) – Teenyweeny

but the if statement can be used to something like: { var str = 'Some very long string'; if(str.length > 10) str = str.substring(0,10)+"..."; } – Oregon

@Daniel: true, it would be necessary for adding an ellipsis. Luckily I used the word optional :-) – Teenyweeny

@Daniel, "if(str.length > 10) str = str.substring(0,10)+"..."; }" is wrong because the resultstring has a length of 13 not 10 !! correct: "if(str.length > 10) str = str.substring(0,10-3)+"..."; }" – Relish

Here's a performance test for those who care. They perform almost the same if the case where substring is actually needed happens 50% of the time. – Connect

Answer 2

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

Result variable contains "I am too l..."

Haleyhalf

Answer 3

Creating own answer, as nobody has considered that the split might not happened (shorter text). In that case we don't want to add '...' as suffix.

Ternary operator will sort that out:

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

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

Can be closed to function:

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

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

And expand to helpers class so You can even choose if You want the dots or not:

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

Burglary

Answer 4

And here's a jQuery example:

HTML text field:

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

jQuery code to limit its size:

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

As an example, you could use the jQuery code above to restrict the user from entering more than 10 characters while he's typing; the following code snippet does exactly this:

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

---

Update: The above code snippet was only used to show an example usage.

The following code snippet will handle you issue with the DIV element:

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

Please note that I'm using text instead of val in this case, since the val method doesn't seem to work with the DIV element.

Palatial

Hi Giu, I am not dealing with the text when it is being input...rather when it gets displayed and break my table layout. The querystring text is displayed in a DIV called .tasks-overflow – Scenarist

@Scenarist Thanks for the hint; I've updated my answer; it should help you solve your little issue – Palatial

Hi Giu, I've tried your code and it hasn't worked. I want this long string 'thisisonelooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongquerystring' to display as 'thisisonelooo...' – Scenarist

This is how the code looks: $(document).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); }); //Giu code var elem = $(".tasks-overflow"); if(elem){ if (elem.val().length > 10) elem.val(elem.val().substr(0,10)) } }); – Scenarist

@Scenarist I'm sorry; my old answer contained the val method, which doesn't seem to work for DIV elements. I've updated my answer again, and now the text method is used to alter the text, which should work perfectly (tested it locally, again). Could you please test it again with my updated code and let me know? – Palatial

@Giu - It is working although the code is taking out all text in that DIV...I need it to target only long querystring(10 characters & over)...not short words or spaces inbetween words. Thanks – Scenarist

@Scenarist You could use the following RegExp to filter out / replace your string, assuming that it only consists of letters: /[a-zA-Z]{10}/ – Palatial

@Giu how would I go about implementing a RegExp? – Scenarist

Answer 5

('very long string'.slice(0,10))+'...'
// "very long ..."

Menam

Answer 6

html

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

javascript (on doc ready)

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

If you have multiple words in the text, and want each to be limited to at most 10 chars, you could do:

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

Paripinnate

.text() is more appropriate than .html() when dealing with text only. – Teenyweeny

Hi sje397, I need to be able to ignore other words before & after this string (this string is a long querystring & has no spaces) thanks – Scenarist

@Scenarist - you can change the arguments to substr...or you might want to look at regular expressions. – Paripinnate

Answer 7

What you should also do when you truncate the string to ten characters is add the actual html ellipses entity: …, rather than three periods.

Lag

Answer 8

Although this won't limit the string to exactly 10 characters, why not let the browser do the work for you with CSS:

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

and then for the table cell that contains the string add the above class and set the maximum permitted width. The result should end up looking better than anything done based on measuring the string length.

Banerjee

Answer 9

A = "a lennnnnnnnnnnnngthy string ";

word = A.substring(0, number_of_words_to_appear) + "...";

console.log(word)

Creepie

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Serviette

I hope you don't globally scope all your variables like that... – Ambivalence

Answer 10

This looks more to me like what you probably want.

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

you give it your html element in the first line and then it takes the whole text, replaces urls with 10 character long versions and returns it to you. This seems a little strange to only have 3 of the url characters so I would recommend this if 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) + "..."
    });
}});

which would rip out the http:// or https:// and print up to 10 charaters of www.example.com

Nearly

Answer 11

Try this :)

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

Lloyd

Answer 12

@jolly.exe

Nice example Jolly. I updated your version which limits the character length as opposed to the number of words. I also added setting the title to the real original innerHTML , so users can hover and see what is truncated.

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

Spikenard

Answer 13

const text = 'imathelongtextblablabla'
const showLess = false
{!showLess && `${text.substring(0, 10)}`}
{!showLess && "..."}

Arela

Answer 14

In React, with conditional, put dots if over 35 characters:

<b>Long String:</b> {longstring.length < 35 ? longstring : longstring.slice(0, 35) + "..."}

Unlade

Answer 15

Show this "long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text "

to

long text long text long ...

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

Lederer

You're considering words here. The question mentions characters – Mallard