JavaScript replace() Method String.replace() Method (Regular Expressions)

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. JavaScript replace() method's syntax 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: JavaScript replace() method

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.JavaScript replace() method with literals

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
Internet Explorer supports the JavaScript replace() methodFirefox supports the JavaScript replace() methodSafari supports the JavaScript replace() methodOpera supports the JavaScript replace() method