String replace JavaScript bad design

After using JavaScript for a while one of the worst parts I found was the String.replace function. When I realized it’s behaviour I thought to myself someone is going to use this wrong. The function itself is excellent, I use it all the time as you could probably tell with my code. It is far better than some other languages with the ability to use strings/regexes and provide a function callback for the replacement.

But…it’s default behaviour is designed badly. When using replace most developers assume it works in global mode and the characters you intend to replace will all be replaced. Consider the following pitfall:-


alert(':::'.replace(':',''));//only one : is replaced!

What do you expect? No colons? You are not alone. Unfortunately by default replace assumes you only want to replace one character. Don’t ask me why.

To counteract this Mozilla decided to add a third argument! This is even worse! It makes is even more confusing. Now we have a function that accepts three arguments, first a string/regex, second a string/function and third a flag for the string replacement. We then have a situation where the replacement is global on Firefox and not on every other browser and to top it off, if you use the third flag with a regexp then the regexp won’t of course be global thus adding yet more confusion!


alert(':::'.replace(':','','g'));//replaces all ":" on Firefox but not on other browsers
alert(':::'.replace(/:/,'','g'));//replaces one ":" as the flag only works for strings.

A huge mess I’m sure you’ll agree, IMO the replace function should work globally by default for string arguments with the option to match only once if for some crazy reason it is needed.

The correct way of doing a global replacement is to use regexes because strings don’t even allow you to do a global replacement on all browsers!


alert(':::'.replace(/:/g,''));//The correct way

Finally here is a patch that you can use to prevent your developers making the same mistakes a certain social network made.

String.prototype.replace = (function(r){
 return function(find, replace, replaceOnce) {
     if(typeof find == 'string' && !replaceOnce) {
       find = r.apply(find, [/[\[\]^$*+.?(){}\\\-]/g,function(c) { return '\\'+c; }]);
       find = new RegExp(find, 'g');
     } else if(typeof find == 'object' && !replaceOnce && !find.global) {
       find = new RegExp(find.source, 'g');
     }
     return r.apply(this, [find,replace]);
 }
})(String.prototype.replace);
alert('aaaabbbbb'.replace(/a/,''))

3 Responses to “String replace JavaScript bad design”

  1. Wladimir Palant writes:

    Gareth, the replace function is only meant to work with regular expressions and it clearly says so in JavaScript 1.5 Reference. So valid first parameter would be /:/ or /:/g, not a string however.

    Why does it take a string then? The reason is all the people who (as usually) don’t read the documentation and just assume that this is a substring replace function. I guess that MS started here, http://msdn.microsoft.com/en-us/library/t0kbytzc%28VS.85%29.aspx describes the current confusing behavior.

  2. Wladimir Palant writes:

    Actually, looking at ECMA-262 Edition 5 – the original specification from JavaScript Reference 1.5 was already revised, replacing one occurrence of the strings is now standardized behavior to stay compatible with all the pages that expect it. But you can hopefully see where these quirks come from.

  3. Radoslav Stankov writes:

    Yes this behavior is really strange, most of the time I use String#gsub from http://api.prototypejs.org/language/string/prototype/gsub/ which is really very powerfull