cutting the text field to 100 characters in javascript

Question

I have an array(foo) of objects, each of which has a field called "text" and some of them are very long texts; so I wnat to have a limit of 100 charachters for text; would you do the same approach for cutting to 100 characters in javascript? I belive there is better ways of doing that...Or if it is already clean could you please confirm me? Thanks

        results = foo.map(function(obj){
            if(obj['text'] && obj['text'].length >100){
                obj['text'] = obj['text'].substr(0,97)+"...";
            }
            return obj;                    
        })

If you're altering objects anyway, there is no need to use `map`. And if you know that each object has a `text` property, there is no need to use `obj['text'] &&`. And if the property name is not dynamic, there is no need for bracket notation, so go for `.text`. — Bergi, Oct 16 '15 at 03:36
If you are displaying this text in UI i would use css text-overflow: ellipsis; instead of deleting content — Praveen, Oct 16 '15 at 03:37
@Bergi Fair point about the dot notation vs brackets notation. Might need to be careful if the code is being minified or, for instance, being advanced compilation mode in Google Closure Compiler. — nishanthshanmugham, Oct 16 '15 at 03:43
@Praveen Yes I display them in UI so can I use text-overflow: ellipsis for td not div ? Sorry I'm new to front end... — user98498765, Oct 16 '15 at 03:44
Yes you can add class like .doellipsis { text-overflow: ellipsis;} and add that class to all your td elements , anything that overflows will be changed to "text...." format — Praveen, Oct 16 '15 at 03:51
@Praveen Can I do it in a cickable fashion in fronend so it cuts with lets say 100 chaarachters and ''...', so when you click on "..." it shows all ... Please note mine is not a div it is a td tag in table — user98498765, Oct 16 '15 at 03:52
Usually for such cases like this ... the text is truncated with "..." after the limit and a tooltip is used to show the full text. see http://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated — Praveen, Oct 16 '15 at 03:55
@Praveen so why not adding to td instead of adding a class to all tds and add that class? I tried { text-overflow: ellipsis;} it does not do anything in my case... am I doing something wromg?! :( — user98498765, Oct 16 '15 at 03:56
Have a look at this ... http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell — Praveen, Oct 16 '15 at 03:58
Using class is better as in future if you have another table on the page , applying a style to td will effect that new table too — Praveen, Oct 16 '15 at 03:59
@Praveen Great :-) You solved my problem; Thanks if you would like you can add your answer and I will mark it as solved; you are the one who solved my problem... Thnaks — user98498765, Oct 16 '15 at 04:01

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Use ellipsis instead of deleting the text.

Have a look at CSS text-overflow in a table cell? for your problem

create a class as

.myellipsis {
   text-overflow:ellipsis;
}

Applying this class would replace overflown text with a "..."

edited May 23 '17 at 11:58

Community

1
1

answered Oct 16 '15 at 04:03

Praveen

206
2
11

score 0 · Answer 2 · answered Oct 16 '15 at 03:41

In your example code, the text properties of the objects in the foo array are being modified. The code below assumes you mean to do that:

foo.forEach(function(obj) {
    if (obj['text'] && obj['text'].length > 100) {
        obj['text'] = obj['text'].substr(0, 97) + '...';
    }
});

So, just one change really to make it idiomatic: Use forEach instead of map

score -1 · Answer 3 · answered Oct 16 '15 at 03:41

-1

You can use substring

if (data.length > 100) {

  // truncate string
  datacut = data.substring( 0, 50);

}

answered Oct 16 '15 at 03:41

Mike Ross

2,942
5
49
101

What difference does it make to `substr`? – Bergi Oct 16 '15 at 03:42
@Bergi The difference is in the second argument. The second argument to substring is the index to stop at (but not include), but the second argument to substr is the maximum length to return. – Mike Ross Oct 16 '15 at 03:44
So if the first argument is `0`, it makes absolutely no difference, does it? Except that `50` is clearly wrong when the OP wants `97`. – Bergi Oct 16 '15 at 03:51
@Bergi well that depends on situation.. I just gave an example.. Need to modify it according to needs – Mike Ross Oct 16 '15 at 03:55

score -1 · Answer 4 · answered Oct 16 '15 at 03:54

You could use a regular expression:

var foo = [
    {'text': 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab'}, // length 101
    {'text': 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'}, // length 100
    {'blah': 'a'}
]

var re = /(.{97}).{4,}/;
foo.map(function(obj) {
    obj['text'] && (obj['text'] = obj['text'].replace(re, '$1...'));
})

foo

> foo
[ { text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...' },
  { text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
  { blah: 'a' } ]

Also, since you are replacing the obj['text'] in place, foo already contains the modified version, so there is no need to return or to create a new variable.

cutting the text field to 100 characters in javascript

4 Answers4