JavaScript String Replace (Javascript String Tutorial part 5)

JavaScript's String Object has a handy function that lets you replace words that occur within the string. This comes in handy if you have a form letter with a default reference of "username". With the replace function you could grab get the person's name with an HTML form or JavaScript prompt and then replace all occurrences of "username" with the value that they entered.

String Replace Function

The string replace function has two arguments:

1. SearchFor - What word is going to be replaced. This can be a string or a regular expression.
2. ReplaceText - What the word will be replaced with. This needs to be a string.

replace returns the new string with the replaces, but if there weren't any words to replace, then the original string is returned.

Replace Function: String Replace

To start off with, let's just search for a string and replace it with the visitor's name. The first argument is what we are searching for, and the second argument is what we are going to replace.

JavaScript Code:

<script type="text/javascript">
var visitorName = "Chuck";
var myOldString = "Hello username! I hope you enjoy your stay username.";
var myNewString = myOldString.replace("username", visitorName);

document.write("Old string =  " + myOldString); 
document.write("<br />New string = " + myNewString);

</script>

Display:

Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.

Notice that only the first occurrence of "username" was replaced. This is the drawback to using a string as your searchFor argument. But don't worry you can replace all occurrences of "username" if you decide to use regular expressions.

Replace Function: Regular Expression

Let's do the exact same replace, except this time, we'll use a a regular expression instead of a string. The only change we need to make is to surround our searchFor word with slashes / / instead of quotations " ".

JavaScript Code:

<script type="text/javascript">
var visitorName = "Chuck";
var myOldString = "Hello username! I hope you enjoy your stay username.";
var myNewString = myOldString.replace(/username/, visitorName);

document.write("Old string =  " + myOldString); 
document.write("<br />New string = " + myNewString);

</script>

Display:

Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.

Darn! No luck. We've still only replaced the first "username" with Chuck instead of all of them. What's the solution to our problem? The answer is enabling the global property for our regular expression.

Replace Function: Global Regular Expression

By enabling the global property of our regular expression, we can go from replacing one match at a time to replacing all matches at once. To enable the global property, just put a "g" at the end of the regular expression.

JavaScript Code:

<script type="text/javascript">
var visitorName = "Chuck";
var myOldString = "Hello username! I hope you enjoy your stay username.";
var myNewString = myOldString.replace(/username/g, visitorName);

document.write("Old string =  " + myOldString); 
document.write("<br />New string = " + myNewString);

</script>

Display:

Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay Chuck.

Finally we've succeeded! Remember that if you just want to replace one word, you should use a string or normal regular expression as your searchFor parameter. However, if you want to replace everything, be sure to write a regular expression and append a little g at the end!