Javascript string.replace()

Return Value

It always returns a new string after replacement and does not make any change in the original string

1. Find First occurrence of string and Replace

The string first occurrence in the given string is replaced by a new subString not all. Let us understand with an example:

• The given String is ” The Moon rises and Moon Set and Moonlight good for health'”
• The substr we are looking in original string is “Moon”
• The new substring we have to replace is = ‘Sun’

In the below example, the substr we are looking for is ‘Moon’ and its first occurrence is replaced with newSubstr “Sun” in the given string as we can see in the output.The disadvantage is that only first occurrence is replaced. To replace all occurrences we can use regular expressions.

JavaScript Example to replace a string

let strsun = 'The Moon rises and Moon set and Moon light good for health';
console.log(strsun.replace('Moon' ,'Sun'));

Output

"The Sun rises and Moon set and Moon light good for health"

2. RegExp To find and replace all occurrence

If we want to replace all the occurrences of text from the original string we must use the RegExp for replacing. The ‘g’ is global flag searches and replaces all the occurrences of text in a given string. We often use ‘i’ which means ignore case.

Let us understand with an example

• Main string = ‘The Moon rises and Moon set and MOON light good for health’;
• Regexp = /Moon/gi;
• newSubstr = ‘Sun’

Here in this example, all occurrences of ‘Moon’ will get replaced with ‘Sun’.Because we have used Regular Expression(RegExp)

JavaScript Example to replace a string

let strsun = 'The Moon rises and Moon set and MOON light good for health';

const regexp = /Moon/gi;
console.log(strsun.replace(regexp ,'Sun'));

Output

"The Sun rises and Sun set and Sun light good for health"

3. Generate substr Using function

The function is called when a match is found. It will run for every match found in the string if we specify the (/g) in a regular expression. It is also known as a reducer.

Syntax

function replacer(match, p1, p2,..pn, offset, string)
{
//
}

function Parameters

• match : It represent the matched substring.
• p1, p2,..pn: We use these arguments if we need to get the nth group capture from the match.
• offset:The integer index position of the the match string.
• string:the string on which we are examining.

Let us understand with an example:

JavaScript Example to replace a string

let mystring = 'dev.com75693#$*%.';
 
newstr = mystring.replace(/([^\d]*)(\d*)([^\w]*)/,  (match, p1, p2, p3, mystring) => {
 
  return `${p1}---${p2}---${p3}`;
});
console.log(newstr);
 

Output

dev.com---75693---#$*%.

1. str.replace() to Switch the words

In this example we are switching the word Using string.replace() with two replacement patterns $1,$2.

What is $1,$2 to $9 in replace() JavaScript function

$1…….$9 are the static and read-only properties of the regular expression. It holds the string that matches with the parenthesis substing. To use them We use RegExp with the property. It stores RegExp global objects not individual RegExp objects.Let us understand with example

let regexp = /(\w+)\s(\w+)\s(\w+)/;
let switchstring = 'Group Tata The';
let newstr = switchstring.replace(regexp, '$3 $2  $1 ');

//Use the $1-$3property with RegExp global object
console.log(RegExp.$3);
console.log(RegExp.$2);
console.log(RegExp.$1);
console.log(newstr);

Output

"The"
"Tata"
"Group"
"The Tata  Group " 

2. How to use Variable in str.replace()

Some time in programming we need to replace all occurrences of a variable from a substring.Let us understand with example how we can do this:

JavaScript Program Example

var substr = "googlegamgam.com";
var regExpObj= new RegExp("gam","g");
var newstr = substr.replace(regExpObj,"");
console.log(newstr); 

Output

google.com