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

Published on: | Last updated on: January 10, 2023 | By:

String replace is one of the common operations in programming.

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

Basic Example

string.replace(substr, replacewith);

This tutorial teaches the various methods to replace all the occurrences of 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.

Syntax

string.replace(substr, replacewith);

Parameters

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

Return Value

  • Returns a new string with the substring replaced.

Code

The following code explains how to use the replace() method to replace the first occurrence of a substring. 

// 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.

  • Convert the substring to a regular expression
  • Adding the g flag (which represents the global flag) to it

The global flag is required whenever the function is called with a regex.

Syntax

string.replace( /regex/g, replacewith)

Code

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

  • regex is passed along with g. 
// 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 String with Substring in Case Insensitive Manner

To replace string with substring in a case insensitive manner,

  • Use the case-insensitive identifier i along with the global flag g.

Syntax

string.replace( /regex/gi, replacewith)

Parameters

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

Code

  • For this, case insensitive modifier ‘i’ is attached to the global flag ‘g’.
// 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 replaces all the occurrences of a string with the substring instead of only the first occurence.

Syntax

string.replaceAll(substr, replacewith);

Parameters

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

Code

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

// 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.

It replaces all the occurrences of the string matching the regex pattern with the new string.

  • Use the /g flag to specify the regex

Syntax

string.replaceAll(regex/g, replacewith);

Parameters

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

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

To replace the beginning of the string

  • Pass the parameter index[0].

Syntax

string.replace(ch, replacewith)
  • ch – ch represents the first character to be replaced
  • replacewith – represents the new character

Code

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

let str = 'not';

//the replace function replaces 'n' with 'p'
let newstr = str.repalce(str[0],'p');

console.log(newstr);

Output

pot

Replace End of String

To replace the last character of the string

  • Use the last character as a regular expression
  • Pass the replacement character.

Syntax

strng.replace(/char$/,replacewith)

Code

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

let str = 'How are you!';

let newstr = str.replace(/!$/,'?');

console.log(newstr);

Output

How are you?

Replace Everything After a Character

To replace every character after a specific character,

  • Use the char.* regular expression
  • Pass the replacement character

Syntax

string.replace('/char.*/', replacewith)
  • char – the character after which the string needs to be replaced
  • char.specifies match one or more characters after char*
  • replacewith – replacement character

Code

The following code removes the string after a specific character.

let str = 'Hello! Goob morning';

str=str.replace('/!.*/', '...');

console.log(str);

Output

Hello...

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 /g 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.

Additional Resources

Leave a Comment