Truncate the text of a jQuery object to a specified length, at the nearest space
I love jQuery - I have nothing against pure javascript, but the birth of the jQuery framework killed a lot of my personal javascript pain points. Here's a problem we recently handled at work where we wanted to truncate text to a given character length, but to walk back to the nearest space so we wouldn't truncate mid-word.
In order to understand the easiest solution, its first important to understand that with jQuery you can pass a function to setter methods and return the value you want set. For example:
$('#myText').text(function() {
return 'this is my new text'
});
So now all we need to do is write a function that given a string, does the work. Well, that's easy enough:
function maxLength(maxLen)
{
return function truncateToNearestSpace(idx, text)
{
// this may chop in the middle of a word
var truncated = text.substr(0, maxLen);
if (/[^\s]$/.test(truncated))
return truncated.replace(/\s[^\s]+$/, "");
else
return truncated.trim();
}
}
And how do you use it?
// usage
$('.selector').text(maxLength(50));
Any questions? The maxLength function returns a custom truncator function which is built with the maxLen value. The truncateToNearestSpace function first truncates to the exact length of maxLen then it does a little work:
if (/[^\s]$/.test(truncated))
If your regEx skills are weaker, you may not recognize this, but it checks if the last character is not a space. If its not, we replace the last space, and everything after it, and return the result.
The other option is the string, after being truncated, ends in a space, in which case we strip the space off and return it, with .trim() - this method is unsupported in older IE but there is a cheap and easy way to add it for IE:
''.trim||(String.prototype.trim=function(){
return this.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,'')
});
Written by Erik Wurzer
Related protips
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside