JavaScript String replaceAll

Summary: in this tutorial, you’ll learn about the String replaceAll() method that replaces all occurrences of a substring with a new string.

Introduction to the JavaScript string replaceAll() method

The String replace() method allows you to replace the first occurrence of a substring in a string with a new one.

To replace all the occurrences of a substring with a new one, you can call the replace() method repeatedly or use a regular expression with a global flag (g).

ES2021 introduced the String replaceAll() method that returns a new string with all matches of a pattern replaced by a replacement:

String.prototype.replaceAll(pattern, replacement)Code language: CSS (css)

The pattern can be a string or a regular expression. When the pattern is a regular expression, it needs to include the global flag (g); otherwise, the replaceAll() will throw an exception.

The assumption is that you made a mistake and should have used the replace() method to replace the first occurrence that matches the pattern only.

The replacement argument can be a string or a callback function that will be invoked for each match.

When the replacement is a callback function, it has the following form:

replacement(match, offset, str)

The replacement callback has the following arguments:

• match is the matched substring.
• offset is offset of the matched substring within the original string. For example, if the original string is 'Hello' and the matched substring is 'll', then the offset will be 2.
• str is the original string.

Like the replace() method, the replaceAll() method doesn’t change the original string. It returns the new completely new string with the pattern replaced by the replacement.

JavaScript String replaceAll() examples

Let’s take some examples of using the JavaScript String replaceAll() method.

1) Simple JavaScriptString replaceAll() example

The following example uses the String replaceAll() method to replace the string JS with the string JavaScript in the string ‘JS will, JS will, JS will rock you':

let str = 'JS will, JS will, JS will rock you.';
let newStr = str.replaceAll('JS','JavaScript');

console.log(newStr);Code language: JavaScript (javascript)

Output:

JavaScript will, JavaScript will, JavaScript will rock you. 

2) JavaScript String replaceAll() with a callback function example

The following example uses the String replaceAll() method to search for a substring by a regular expression. It replaces each match with a specific replacement determined by a callback function:

let str = 'JS will, Js will, js will rock you.';

let pattern = /js/gi;

str.replaceAll(pattern, function(match, offset, str) {
    if(match === 'JS') return 'JavaScript';
    if(match === 'Js') return 'Javascript';
    if(match === 'js') return 'javascript';
    return '';
});

console.log(newStr);Code language: JavaScript (javascript)

Output:

JavaScript will, Javascript will, javascript will rock you. 

How it works.

The regular expression /js/gi matches any string that contains the substring JS case-insensitively i.e, JS, Js, or js.

The replaceAll() method replaces the substring JS, Js, and js with the returned value of the replacement callback.

Summary

• Use the JavaScript string replaceAll() method to replace all occurrences of a substring with a new one in a string.