How To Replace All Occurrences of a Substring in a String in JavaScript

Summary: in this tutorial, you’ll learn how to replace all occurrences of a substring in a string.

The String type provides you with the replace() and replaceAll() methods that allow you to replace all occurrences of a substring in a string and return the new version of the string.

Note that both method don’t change the original string, but return the new string with the substrings replaced by a new substring.

1) Using replace() method

The following example uses the replace() method to replace the string 'JS' by 'JavaScript' in a message variable:

const message = 'JS will, JS will, JS will rock you!';
const result = message.replace('JS','JavaScript');
console.log(result);Code language: JavaScript (javascript)

Output:

JavaScript will, JS will, JS will rock you!

As you can see clearly from the output, the replace() method only replaces the first occurrence of the JS in the string.

To replace all occurrences of the 'JS' string, you turn the searched string into a regular expression and use the global flag (g) like this:

const message = 'JS will, JS will, JS will rock you!';
const result = message.replace(/JS/g,'JavaScript');
console.log(result);Code language: JavaScript (javascript)

Output:

"JavaScript will, JavaScript will, JavaScript will rock you!
"Code language: JSON / JSON with Comments (json)

If you want to replace all occurrences of a substring and ignore the letter cases, you need to add the i flag to the regular expression:

const message = 'JS will, js will, Js will rock you!';
const result = message.replace(/JS/gi,'JavaScript');Code language: JavaScript (javascript)

Output:

"JavaScript will, JavaScript will, JavaScript will rock you!"Code language: JSON / JSON with Comments (json)

2) Using replaceAll() method

The replaceAll() method replaces all occurrences of a substring in a string and returns the new string. For example:

const message = 'JS will, JS will, JS will rock you!';
const result = message.replaceAll('JS','JavaScript');

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

Output:

"JavaScript will, JavaScript will, JavaScript will rock you!"Code language: JSON / JSON with Comments (json)

If you want to replace all occurrences of a substring in a string regardless of letter cases, you use a regular expression with the gi flags:

const message = 'JS will, Js will, js will rock you!';
const result = message.replaceAll(/JS/gi,'JavaScript');

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

Result:

"JavaScript will, JavaScript will, JavaScript will rock you!"Code language: JSON / JSON with Comments (json)

Note that the replaceAll() method isn’t supported by all browsers. Therefore, you should check for browser compatibility before using it.

Summary

To replace all occurrences of a substring in a string by a new one, you can use the replace() or replaceAll() method:

replace(): turn the substring into a regular expression and use the g flag.
replaceAll() method is more straight forward.

To ingore the letter cases, you use the i flag in the regular expression.

Was this tutorial helpful ?