How to replace all occurrences of a string in JavaScript
In this article, you’ll learn how to replace all occurrences of a string in JavaScript.
For replacing all occurrences of a string we will go through string method.
There are two types of string methods namely replace() method and replaceAll() method.
We also use these methods with regular expression (regex) here.
Now let’s see how it happen…
replace() method
Here I have taken a variable and written the name of that variable as ‘message’.
We have assigned the string to the message variable.
<script> var message="Sanjana's favorite website is cs and off course cs is the best website" document.write(message.replace("cs","codespeedy")) </script>
output:
Sanjana's favorite website is codespeedy and off course cs is the best website
As you can see clearly from the output,
replace() method replaces only first occurrence of ‘cs’ string.
We can not replace all occurrences in replace method.
This drawback overcomes in replaceAll() method.
replaceAll() method
Now what if you want to replace all occurrences in the string, replaceAll() method comes in picture.
For example:
<script> var message="Sanjana's favorite website is cs and off course cs is the best website" document.write(message.replaceAll("cs","codespeedy")) </script>
output:
Sanjana's favorite website is codespeedy and off course codespeedy is the best website
Here, you can see, replaceAll() method not only replaces the first occurrence
But also all occurrences of ‘cs’ string.
Here is one drawback
We can not neglect letter cases if we neglect letter cases we will get an error.
For example:
<script> var message="Sanjana's favorite website is cs and off course cs is the best website" document.write(message.replaceAll("CS","codespeedy")) </script>
output:
type error
As we can see earlier,
replaceAll and also replace method gives error as consider letter cases.
We use regular expression for removing this drawback.
regular expression
regular expression also refer as regex.
Now what if you want to replace all occurrences in the string with neglecting letter case,
In this scenario, regex comes in the picture.
As simple as that guy’s!! right??
Let’s see what’s the syntax of regex
syntax:
/pattern/modifiers;
whatever we want to replace we write in the pattern along with modifiers.
Modifiers
‘i’ ——->> makes string case-insensitive
‘g’ ——->> perform all occurrences rather than stopping after first occurrence
(that is occurrences done globally)
replace method with regex in JavaScript
<script> var message="Sanjana's favorite website is cs and off course cs is the best website" document.write(message.replace(/CS/ig,"codespeedy")) </script>
output:
Sanjana's favorite website is codespeedy and off course cs is the best website
replaceAll method with regex
<script> var message="Sanjana's favorite website is cs and off course cs is the best website" document.write(message.replaceAll(/CS/ig,"codespeedy")) </script>
output:
Sanjana's favorite website is codespeedy and off course codespeedy is the best website
Points To Be Noted:
- string methods : replace() method and replaceAll() method.
- replace() method is case-sensitive.
- replaceAll() method is also case-sensitive.
- regular expression(regex) is case-insensitive.
- for ignoring the letter cases, we use ‘i’ modifier.
- for replacing all occurrences automatically, use ‘g’ modifier.
Also Read:
Building JavaScript String methods from Scratch
Leave a Reply