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!
✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.
