JavaScript replace() Method
This tutorial teaches you the replace() method, from JavaScript's String object. The replace() method is applied on a String, and takes two arguments: a regular expression pattern, and a string in which to replace the pattern matched. Although it belongs to the String object, we covered the replace() method with regular expressions because it relies on the power of regular expressions, and because those learning about regular expression will want to know about the match(), search(), and replace() String methods, while those learning about strings may not yet be ready to move on to regular expressions.
The replace() method does not modify the string on which it is applied; it returns a copy of the resulting, modified string (whether replacements were made or not). To modify the original string, simply equate it to the modified string returned by replace().
Using the replace() Method
JavaScript's replace() method is applied on a string, and takes two arguments: the first argument determines the regular expression pattern to patch; the second argument supplies the string to replace matched patterns.
// Declare a case-insensitive, global regular expression
var remo = /javascript/gi;
// Declare the replacement string
var carter = "VBScript";
// Declare our test string
var text = "I learn JavaScript because I like JavaScript.";
alert( text.replace(remo,carter) );
The above script declared three variables: a regular expression passed as first argument to the replace() method, and a string passed as replacement string (second argument) to replace(). The last variable was our test string, and the replace() method returned the following:
In our example, all variables used were declared; in most cases, however, you will find that using literals is more practical in real-life scripts.
Note that the replace() method does not modify the string on which it is applied. To modify the string itself, equate the original string and the modified one:
var carter = carter.replace( remo , carter2 );
Using the replace() Method with Literals
The script below is identical to the previous, except that it uses literals instead of pre-declared variables. Syntactically, both approaches are fine, but using literals will make you JavaScript code much shorter, and more legible.
// Our test string
var text = "I learn JavaScript because I like JavaScript.";
alert( text.replace(/javascript/gi,"VBScript") );
This script produced the exact same output as the previous, but it is much cleaner and easier to understand. Our test string could have been used as literal too, but most "real life" scripts will test a variable input.
Test the replace() Method
Interactively test the replace() method by editing the JavaScript code below and clicking the Test replace() Method button.
Browser support for JavaScript replace() method | |||
---|---|---|---|