If you type a looooooooooooooooong word on google talk of Gmail it injects
I was wondering how is the best way to insert
The first solution I found have a better performance:
function wbr(str, r) {
r = r || 15;
var t = str.length, out = "";
for (var i = 0; i < Math.ceil(t/r); i++)
out = [ out, [str.slice(i*r, i*r+r), i*r+r >= t ? "" : "<wbr>"].join("") ].join("");
return out;
};
The second, is more elegant, but have a worse performance:
function wbr2(str) {
var wbr = "<wbr>", r = arguments[1] || 15, i = 1, out = "";
str.replace(/(.{1})/g, function(piece) {
out = [out, piece, i++%r==0 ? wbr : "" ].join("");
});
return out;
}
Trying some of the functions above:
// the first solution
//alert( wbr("abcdefghij", 5) );
// the second
alert( wbr2("abcdefghij", 5) );
Do you have another intresting way to do this injection?
I'm eager to know your ideas!
After a quick chat with John Resig he gave me in amazing 3 minutes another way to do it, check his idea below: (thanks John!)
function wbr_john(str, num) {
return str.replace(RegExp("(\\w{" + num + "})([^\\b])", "g"), function(all,text,char){
return text + "<wbr>" + char;
});
}

4 Comments
if you don't remember me, i am rafael's (paper xD) brother..
I hope to learn a lot of things here..
Nice blog !
Keep up the good work !
Just thought I'd say hi :)
It fits very well in the chat i'm working on.. thanks.
i tested its performance and the the first one seems to be 1000 times faster since it doesn't use regular expressions!!!