Javascript String Replace
Javascript's String Object has a handy function that lets you replace words that
occur within the string. This would come in useful if you had 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:
- 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.
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.
Javscript 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:
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 because
you can replace all occurrences of something if you decide to use regular expressions.
Replace Function: Regular Expression
Let's do the exact same replace, except use a regular expression instead of a string. The
only change we need to do is to surround our searchFor word with slashes / / instead of quotations " ".
Javscript 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:
Darn no luck, we 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.
Javscript 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:
Finally we're successful! 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!
|