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 replacedreplacewith
– 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 flagg
.
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 regexreplaceAll()
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 aTypeError
exception replace()
andreplaceAll()
are not supported by Internet explorer
JSFiddle
The tutorial is available in this JSFiddle.