How to replace all occurrences of a string?
Answer: Using replace() method
The JavaScript string type offers two methods replace() and replaceAll(). Both methods enable us to replace all the occurrences of a substring with a new substring within a given string.
Both methods do not change the original string but return the new string with the replaced substring by a new substring.
Using replace() method
Normally, the replace method replaces only the first occurrence of a substring and returns a new string. But to replace all occurrences of a substring within a string at once using this method, we have to combine this method along with the regular expressions.
We have to use the regular expression at the place of the searchString along with the global flag (g).
Example
In the given example, we have used the replace() method along with the regular expression and global flag to replace the substring "JS" with "JavaScript".
<!DOCTYPE html>
<html>
<head>
<title>Replace all occurrences of a string</title>
</head>
<body>
<script type="text/javascript">
let myStr = 'JS is scripting language. JS is object-oriented language.';
console.log(myStr);
let newStr = myStr.replace(/JS/g,'JavaScript');
console.log(newStr);
</script>
</body>
</html>
Output
In the above example, we have replaced all the occurrences of a substring with a new substring but this method only replaces the occurrences of the specified letter case. But what if we want to replace the substring irrespective of the letter cases.
To replace all the occurrences irrespective of the letter case we have to use the i flag to the regular expression.
Example
In the given example we have used the i flag along with the g flag to replace all the occurrences of the substring irrespective of the letter case.
<!DOCTYPE html>
<html>
<head>
<title>Replace all occurrences of a string</title>
</head>
<body>
<script type="text/javascript">
let myStr = 'JS is scripting language. js is object-oriented language. Js runs on client side.';
console.log(myStr);
let newStr = myStr.replace(/JS/gi,'JavaScript');
console.log(newStr);
</script>
</body>
</html>
Output
Using replaceAll() method
The replaceAll() method replaces all the occurrences of a substring with a new string within the given string at once.
When we use this method, we don't need to use regular expressions to replace all the occurrences at once. But to replace all the occurrences irrespective of the letter case then we have to use the regular expression along with the g and i flag.
Example
In the givn example we have used to replaceAll() method to replace all the occurrences of the string irrespective of the letter case.
<!DOCTYPE html>
<html>
<head>
<title>Replace all occurrences of a string</title>
</head>
<body>
<script type="text/javascript">
let myStr = 'JS is scripting language. js is object-oriented language. Js runs on client side.';
console.log(myStr);
let newStr = myStr.replaceAll(/JS/gi,'JavaScript');
console.log(newStr);
</script>
</body>
</html>
Output
Conclusion
In this lesson, we have discussed how to replace all the occurrences of the string. So, JavaScript offers two methods to replace all the occurrences of a substring with a new substring and returns a new string, these methods are given below:
The replace() method replaces all the occurrences of the substring at once when combined with the regular expressions and global flag.
The replaceAll() method replaces all the occurrences of the substring with a new substring at once without combining with the regular expressions.
