Javascript ReplaceAll

If you're trying to replace all occurrences of a substring within a string with another string and are having problems then you've come to the right place. This page looks at different ways of doing this and the pro's and cons of each.

Method 1 - Add a replaceAll function to the string object

Suppose you have the string "The rain in spain falls mainly on the plain." and want to replace all the lowercase a's with the uppercase A. Ideally there would be a replaceAll method on the String that could be used something like this.

var testString = 'The rain in spain falls mainly on the plain.'; testString = testString.replaceAll('a', 'A');

Unfortunately there is no such function, but javascript is a flexible language and allows us to add one. If you add the following line of code to your script all the strings in your script will have access to a replaceAll function.

String.prototype.replaceAll=function(s1, s2) {return this.split(s1).join(s2)}

This is a set and forget solution that works using the array functions split and join. It turns the original string into an array using the first parameter as a seperator. It then turns the array back into a string, joining the elements with the second parameter.

This works in pretty much all situations and has only one drawback. Because it works using array methods this is the slowest method demonstrated on this page.

Method 2 - Define replaceAll to use regular expressions.

One of the things slowing down the replaceAll function is the array manipulation so what if we use a different method? There is a replace method defined for string objects that we can use as follows.

String.prototype.replaceAll2=function(s1, s2) { return this.replace(new RegExp(s1,"g"), s2); }

This works by turning the supplied parameter, s1, into a regular expression and then using the replace function to get our new string. This works well and is faster than the split/join method, but it adds complications. You need to be aware that the backslash (\) is a reserved character in regular expressions as well as javascript. That means if you want to replace the backslash you will need to double escape it.

// remove the 2 backslashes from test var test = "The rain in spain falls \\\\mainly on the plain."; var test2 = test.replaceAll("\\", ""); var test3 = test.replaceAll2("\\\\", "");

This is pretty easy to do but can be a gotcha if you forget about it. Using this method is significantly faster than using the split/join method and still pretty brainless.

Method 3 - Do it inline (split/join)

Both the previous methods are quite simple to use but are slowed down by the fact that calling a function takes time. If you are in need of better performance you can just remember the method and use it inline. This provides a substantial improvement.

var test = "The rain in spain falls mainly on the plain."; var test2 = test.split("a").join("A");

While faster than the prototype version of the same method this is still fairly slow. It is fastest you'll get if you want to avoid regular expressions though.

Method 4 - Inline with the RegExp object

Continuing along a similar lines you can use the code from replaceAll2 inline to avoid the time taken to call the function.

var test = "The rain in spain falls mainly on the plain."; var test2 = test.replace(new RegExp("a", "g"), "A");

This is the fastest method so far but again you need to keep regular expression syntax in mind.

Method 5 - Declare the regular expression without a string

The method above is pretty quick but it's possible to go one better. Declaring a string in javascript is among the slowest operations there is, we can avoid having to create a string to create the RegExp object using the following syntax.

var test = "The rain in spain falls mainly on the plain."; var test2 = test.replace(/a/g, "A");

Avoiding the string creation provides a nice boost to performance and this is the fastest implementation there is.

Some speed tests

Below is the time taken to replace all occurences of the lowercase 'a' with an uppercase 'A' 5000 times in the string "The rain in spain falls mainly on the plain." using each of the methods above.

    Summing up

    If you are after a brainless solution and performance isn't an issue go with the 1st method. It can't get any easier and for most applications it is fast enough.

    If performance matters I'd suggest learning a little about regular expressions and using method 5. This will also give you extra flexibility through the wild card and conditional matching provided by regular expressions.

    Comments

    If you've got any questions or feedback about this article please post them in the Dynamic Tools Javascript Forum.