What does the replace () method do in javascript?

Examples

Replace Microsoft:

let text = "Visit Microsoft!";
let result = text.replace["Microsoft", "W3Schools"];

Try it Yourself »

A global replacement:

let text = "Mr Blue has a blue house and a blue car";
let result = text.replace[/blue/g, "red"];

Try it Yourself »

More examples below.

Definition and Usage

The replace[] method searches a string for a value or a regular expression.

The replace[] method returns a new string with the value[s] replaced.

The replace[] method does not change the original string.

Note

If you replace a value, only the first instance will be replaced. To replace all instances, use a regular expression with the g modifier set.

Read more about regular expressions in our:

RegExp Tutorial
RegExp Reference

Syntax

string.replace[searchValue, newValue]

Parameters

Parameter	Description
searchValue	Required. The value, or regular expression, to search for.
newValue	Required. The new value [to replace with].

Return Value

Type	Description
A string	A new string where the specified value[s] has been replaced.

More Examples

A global, case-insensitive replacement:

let text = "Mr Blue has a blue house and a blue car";
let result = text.replace[/blue/gi, "red"];

Try it Yourself »

A function to return the replacement text:

let text = "Mr Blue has a blue house and a blue car";
let result = text.replace[/blue|house|car/gi, function [x] {
return x.toUpperCase[];
}];

Try it Yourself »

Browser Support

replace[] is an ECMAScript1 [ES1] feature.

ES1 [JavaScript 1997] is fully supported in all browsers:

Chrome	IE	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes	Yes

Summary: in this tutorial, you’ll how to use JavaScript String replace[] method to replace a substring in a string with a new one.

Introduction to the JavaScript String replace[] method

The following shows the syntax of the replace[] method:

let newStr = str.replace[substr, newSubstr];
Code language: JavaScript [javascript]

The JavaScript String replace[] method returns a new string with a substring [substr] replaced by a new one [newSubstr].

Note that the replace[] method doesn’t change the original string. It returns a new string.

The following example uses the replace[] to replace the JS in the string 'JS will, JS will rock you' wit the new substring JavaScript:

let str = 'JS will, JS will rock you!';
let newStr = str.replace['JS','JavaScript'];

console.log[newStr];
Code language: JavaScript [javascript]

Output:

JavaScript will, JS will rock you!
Code language: JavaScript [javascript]

As you can see from the output, only the first occurrence of the substring JS was replaced with the new substring JavaScript.

To replace all occurrences of a substring in a string with a new one, you must use a regular expression.

Using regular expressions

The replace[] method fully supports regular expressions:

let newStr = str.replace[regexp, newSubstr];
Code language: JavaScript [javascript]

In this syntax, the replace[] method find all matches in the str, replaces them by the newSubstr, and returns a new string [newStr].

The following example uses the global flag [g] to replace all occurrences of the JS in the str by the JavaScript:

let str = 'JS will, JS will rock you!';
let newStr = str.replace[/JS/g,'JavaScript'];

console.log[newStr];
Code language: JavaScript [javascript]

Output:

JavaScript will, JavaScript will rock you!

Code language: JavaScript [javascript]

If you want to ignore cases for searching and replacement, you can use the ignore flag [i] in the regular expression like this:

let str = 'JS will, Js will rock you!';
let newStr = str.replace[/JS/gi,'JavaScript'];

console.log[newStr];
Code language: JavaScript [javascript]

Output:

JavaScript will, JavaScript will rock you!

Code language: JavaScript [javascript]

Using a replacement function

Instead of passing a newSubstr to the second parameter of the replace[] method, you can pass a replacement function as follows:

let newStr = str.replace[substr | regexp, replacer];
Code language: JavaScript [javascript]

In this syntax, the replace[] method will invoke the replacer function after the match has been performed. It then uses the result of this function as the replacement string.

If you use the global flag [g] in the regular expression, the replace[] method will invoke the replacer function for every match. For example, if there are three matches, the replace[] method will invoke the replacer[] function three times.

The replacer[] function has the following syntax:

function replacer[match, p1, p2, ..., offset, string];
Code language: JavaScript [javascript]

The following are the meaning of each parameter:

match: is the matched substring.
p1, p2, …pn are the nth string found by a parenthesized capture group provided by the regular expression.
offset: is the offset of the matched substring within the whole string being searched.
string: is the whole string being examined.

The following example uses the replace[] function to change the substrings apples and bananas to uppercase. It passes a replacer function into the replace[] function:

let str = "I like to eat, eat, eat apples and bananas";
let re = /apples|bananas/gi;

let newStr = str.replace[re, [match] => { 
    console.log[{match}]; 
    return match.toUpperCase[];
}];

console.log[newStr];
Code language: JavaScript [javascript]

Output:

{match: "apples"}
{match: "bananas"}
I like to eat, eat, eat APPLES and BANANAS
Code language: JavaScript [javascript]

Summary

Use the replace[] method to return a new string with a substring replaced by a new one.
Use a regular expression with the global flag [g] to replace all occurrences of a substring with a new one.

Was this tutorial helpful ?

What is replace [] in JavaScript?

The replace[] method searches a string for a value or a regular expression. The replace[] method returns a new string with the value[s] replaced. The replace[] method does not change the original string.