How to replace all occurrences of a string in JavaScript

How to replace all occurrences of a string in JavaScript

To replace all occurrences of a string in a text with the new one, use the replace() or replaceAll() method. Both these JavaScript methods do not change the original string. Instead, return a new string with the substrings replaced by a new substring.

Alternatively, you could also use both split() and join() methods together to replace all instances of a string in a given text.

replace() Method

The replace() method can be used in combination with a regular expression to find and replace all occurrences of a word or substring inside any string.

This method searches a string for the specified value, or a regular expression, and returns a new string where the specified values are replaced:

const str = 'JavaScript is JavaScript!'

const updated = str.replace('JavaScript', 'Java')

console.log(updated)
//'Java is JavaScript!'

As you can see above, the replace() method only replaces the first occurrence of the JavaScript in the string.

To replace all occurrences (case-sensitive) of the given value, you need to use a regular expression with global modifier (the g flag).

const str = 'JavaScript is JavaScript!'

const updated = str.replace(/JavaScript/g, 'Java')

console.log(updated)
//'Java is Java!'

For a global case-insensitive replacement, you need to pass the i flag in addition to the g flag, as shown below:

const str = 'JavaScript is JavaScript!'

const updated = str.replace(/javascript/gi, 'Java')

console.log(updated)
//'Java is Java!'

replaceAll() Method

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

const str = 'JavaScript is JavaScript!'

const updated = str.replaceAll('JavaScript', 'Java')

console.log(updated)
//'Java is Java!'

The replaceAll() method also accepts a regular expression as a pattern. For a case-insensitive pattern matching, use a regular expression with the gi flags:

const str = 'JavaScript is JavaScript!'

const updated = str.replaceAll(/javascript/gi, 'Java')

console.log(updated)
//'Java is Java!'

Note that the replaceAll() method only works in modern browsers and is not supported by all browsers. Therefore, make sure that you check the browser compatibility before using it.

split() and join() Methods

Another way to replace all instances of a string is using two JavaScript methods: split() and join().

The split() method splits the string into an array of substrings based on a specified value (case-sensitive) and returns the array.

If an empty string is used as the separator, the string is split between each character. This method does not alter the original string.

const str = 'JavaScript is JavaScript!'

const token = str.split('JavaScript')

console.log(token)
// ['', ' is ', '!']

If you want to perform a global case-insensitive split, use a regular expression instead:

const token = str.split(/javascript/gi)

The join() method does the opposite of the split() method. It joins the elements of an array into a string and returns the string. We can specify a join separator. The default separator is the comma.

const str = 'JavaScript is JavaScript!'

const token = str.split('JavaScript')

const updated = token.join('Java')

console.log(updated)
// Java is Java!

Both split and join operations can be combined as shown below:

const str = 'JavaScript is JavaScript!'

const updated = str.split('JavaScript').join('Java')

console.log(updated)
// Java is Java!

const str = 'JavaScript is JavaScript!'

const updated = str.replace('JavaScript', 'Java')

console.log(updated)
//'Java is JavaScript!'

const str = 'JavaScript is JavaScript!'

const updated = str.replace(/JavaScript/g, 'Java')

console.log(updated)
//'Java is Java!'

const str = 'JavaScript is JavaScript!'

const updated = str.replace(/javascript/gi, 'Java')

console.log(updated)
//'Java is Java!'

const str = 'JavaScript is JavaScript!'

const updated = str.replaceAll('JavaScript', 'Java')

console.log(updated)
//'Java is Java!'

const str = 'JavaScript is JavaScript!'

const updated = str.replaceAll(/javascript/gi, 'Java')

console.log(updated)
//'Java is Java!'

const str = 'JavaScript is JavaScript!'

const token = str.split('JavaScript')

console.log(token)
// ['', ' is ', '!']

const token = str.split(/javascript/gi)

const str = 'JavaScript is JavaScript!'

const token = str.split('JavaScript')

const updated = token.join('Java')

console.log(updated)
// Java is Java!

const str = 'JavaScript is JavaScript!'

const updated = str.split('JavaScript').join('Java')

console.log(updated)
// Java is Java!

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript