How to replace all occurrences of a string in JavaScript

By CHAWADIMANI SANJANA VIJAY

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:

1. string methods : replace() method and replaceAll() method.
2. replace() method is case-sensitive.
3. replaceAll() method is also case-sensitive.
4. regular expression(regex)  is case-insensitive.
5. for ignoring the letter cases, we use ‘i’ modifier.
6. for replacing all occurrences automatically, use ‘g’ modifier.

Also Read:

Building JavaScript String methods from Scratch

Get JSON Data from a URL in JavaScript

How to change font size using JavaScript