JavaScript String replace()

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.

JavaScript String replace() examples

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.