How to Replace All Occurrences of a String in JavaScript? – Definitive Guide

When working with Strings, you may need to replace a specific occurrence or all occurrences of a string in Javascript.

You can use the string.replace(substr, replacewith) statement to replace all occurrences of a string in JavaScript.

If You’re in Hurry…

You can use the following syntax to replace all the occurrences of a string in JavaScript.

string.replace(substr, replacewith);

If You Want to Understand Details, Read on…

In this tutorial, you will learn about the various methods to replace all the occurrences of a string in JavaScript.

If you want to remove text from a String in Javascript, read How to Remove a Text from a String in JavaScript?

Using Replace()

The replace() method searches for the argument in the given substring and replaces only the first occurrence of it with the replace argument.

The replace() method returns a new string with substring replaced.

The syntax to use replace() method is as follows

Syntax

string.replace(substr, replacewith);

substr – the substring to be replaced
replacewith – the new substring to replace with

The following code explains the general working of replace() method where it is used to replace only the first occurrence of the string in JavaScript.

Code

// here 'msg' is the original string
let msg = 'she sells beads, she sells shells';

// the replace function replaces the first occurrence of she with he
let newmsg = msg.replace('she','he');
console.log(newmsg);

Output

he sells beads, she sells shells

Using replace() With Regex

replace() method can also be used to replace all the occurrences of the substring.

This can be done by converting the substring to a regular expression and adding g flag (which represents global flag) to it. The global flag is required whenever the function is called with a regex.

The syntax to replace all the occurrences of the string (as a regular expression) is as follows

Syntax

string.replace( /regex/g, replacewith)

The following code replaces all the occurrences of ‘she’ in the given string ‘msg’. To do so, the substring is passed as a regex along with the global flag ‘g’.

Code

// here 'msg' is the original string
let msg = 'she sells beads, she sells shells';

// the replace function replaces all the occurrences of she with he
let newmsg = msg.replace(/she/g,'he');
console.log(newmsg);

Output

he sells beads, he sells shells

Replace Case Insensitive

If you want to replace all the occurrences of the substring using replace() method, then the case insensitive identifier i can be used along with the global flag g.

The syntax is as follows

Syntax

string.replace( /regex/gi, replacewith)

regex – regular expression g – global flag i – case insensitive modifier

The following code replaces all the occurrences of ‘she’ irrespective of the case in the given string ‘msg’. For this, case insensitive modifier ‘i’ is attached to the global flag ‘g’.

Code

// here 'msg' is the original string
let msg = 'she sells beads, She sells shells';

// the replace function replaces all the occurrences of she with he despite its case
let newmsg = msg.replace(/she/gi,'he');
console.log(newmsg);

Output

he sells beads, he sells shells

Using replaceAll()

The replaceAll() method is used to replace all the occurrences of the substring in the given string.

Syntax

string.replaceAll(substr, replacewith);

substr – the substring to be replaced
replacewith – the new substring to replace with

The following code replaces all the occurrences of ‘she’ in the given string ‘msg’ using replaceAll() method.

Code

// here 'msg' is the original string
let msg = 'she sells beads, she sells shells';

// the replace function replaces all the occurrences of she with he
let newmsg = msg.replaceAll('she','he');
console.log(newmsg);

Output

he sells beads, he sells shells

Replacing All With Regex

The replaceAll()can also be used with regular expression.

The method returns all the occurrences of the regex replaced with the new string.

The syntax to use replaceAll() with regex is as follows

Syntax

string.replaceAll(regex/g, replacewith);

regex – the regular expression to be replaced
replacewith – the new substring to replace with
g – global flag to be used with regex

The following code replaces all the occurrences of ‘she’ in the given string ‘msg’.

The substring is passed as a regex along with the global flag ‘g’.

Code

// here 'msg' is the original string
let msg = 'she sells beads, she sells shells';

// the replace function replaces all the occurrences of the regular expression she with he
let newmsg = msg.replaceAll(/she/g,'he');
console.log(newmsg);

Output

he sells beads, he sells shells

Replace Beginning of String

The replace() method can also be used to replace the character at the beginning of the string.

You can do this by passing the the parameter index[0].

The syntax to replace the first character of a string is as follows

Syntax

string.replace(ch, replacewith)

ch – ch represents the first character to be replaced
replacewith – represents the new character

The following code replaces the first character in the given string.

Code

let str = 'not';
let ch = str[0]; //assigns the 1st caracter of the string to ch

//the replace function replaces 'n' with 'p'
let newstr = str.repalce(ch,'p');
console.log(newstr);

Output

pot

Replace End of String

The last character in the given string can be replaced by passing the last character as regular expression along with the replacement character as parameters to the replace() function.

The syntax is as follows

Syntax

strng.replace(/char$/,replacewith)

The following code replaces the last character in the given string.

Code

let str = 'How are you!';
let newstr = str.replace(/!$/,'?');
console.log(newstr);

Output

How are you?

Replace Everything After a Character

If you want to remove a part of the string after a specific character, the following syntax can be used.

Syntax

string.replace('/char.*/', replacewith)

char – the character after which the string need to be replaced
char.specifies to match one or more characters after char*
replacewith – replacement character

The following code removes the string after a specific character.

Code

let str = 'Hello! Goob morning';
str=str.replace('/!.*/', '...');
console.log(str);

Output

Hello...

Replacing All the Spaces

If you want to replace all the spaces in a string in JavaScript, follow the below syntax

Syntax

string.replaceAll(' ' , 'replacement character')

*’ ‘ – empty space
‘replacement character’ – the replacing character for the empty space *

The following code replaces all the spaces with the character provided.

Code

let str = 'Apple Ball Car';
let newstr = str.replaceAll(' ', ',');
console.log(newstr);

Output

Apple,Ball,Car

Key points

  • replace() function replaces the first occurrence of the substring and replaces all the occurrences when the substring is passed as a regex
  • replaceAll() method replaces all the occurrences of the substring in the given string
  • If the search argument of the replaceAll() function is a regex, the global flag should be attached to it else it will throw a TypeError exception
  • replace() and replaceAll() are not supported by Internet explorer

JSFiddle

The tutorial is available in this JSFiddle.

Conclusion

In this tutorial, you have learnt the various ways to replace the occurrences of a string and special characters in JavaScript.

If you have any questions please comment below.

You May Also Like

Leave a Comment