Javascript - Replace
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.
The string replace function has two arguments:
- SearchFor - What word is going to be replaced. This can be a string or a regular expression.
- 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.
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 Replace Function 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("
New string = " + myNewString);
</script>
JavaScript Replace Function Display
Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.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.
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 Replace Function with Regular Experssion
<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>
JavaScript Regular Expression Replace Function Display
Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.
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.
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 Regular Expression Global Search Function Code
<script type="text/javascript">
var visitorName = "Jhon";
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>
Global Regular Expression Replace Function Display
Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay Chuck.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!
