The replace function in String's prototype is very powerful. In this article, let's revisit it to see how it works.

basic replace

The basic usage is just pass a pattern as first parameter and a string as second parameter to replace the matched pattern.

const s = "abab";
console.log(s.replace("ab", "--"));  // --ab

By default, only the first match will be replaced. We can use regex g flag to make full replacement.

const s = "abab";
console.log(s.replace(/ab/g, "--")); // ----

replace function

The second parameter can be a function. By default, there are 3 parameters passed into this function: matched substring, matched substring's offset and the original string. The function's return value will be used to replace the matched substring.

const s = "ababab";
console.log(s.replace(/ab/, (match, offset, string) => {
    console.log(match, offset, string);
    return "--";
}));

/**

ab 0 ababab
--abab

 */

We could also use the g flag. In this way this function will be called whenever there is a match.

const s = "ababab";
console.log(s.replace(/ab/g, (match, offset, string) => {
    console.log(match, offset, string);
    return "--";
}));

/**

ab 0 ababab
ab 2 ababab
ab 4 ababab
------

 */

replace and groups

If the first parameter is a regex and contains groups, then the group values will be as paramters passed to the second parameter function.

const s = "Year: 2020, Month: 11, Day: 12";

console.log(s.replace(/(Year: \d+), (Month: \d+), (Day: \d+)/, (match, g1, g2, g3, offset, string) => {
    console.log({ match, g1, g2, g3, offset, string });
    return "--";
}));

/**

{
  match: 'Year: 2020, Month: 11, Day: 12',
  g1: 'Year: 2020',
  g2: 'Month: 11',
  g3: 'Day: 12',
  offset: 0,
  string: 'Year: 2020, Month: 11, Day: 12'
}
--

 */

We could use $ to refer to matched groups values easily.

const s = "Year: 2020, Month: 11, Day: 12";

console.log(s.replace(/(Year:\s*\d+),\s*(Month:\s*\d+),\s*(Day:\s*\d+)/, "$3, $2, $1"));

// Day: 12, Month: 11, Year: 2020

If these groups are named groups, then there is another parameter passed into the second function, which contains all groups information.

const s = "Year: 2020, Month: 11, Day: 12";

console.log(
    s.replace(
        /(?<year>Year: \d+), (?<month>Month: \d+), (?<day>Day: \d+)/,
        (match, g1, g2, g3, offset, string, groups) => {
            console.log({ year: groups.year, month: groups.month, day: groups.day });
            return "--";
        }
    )
);


/**

{ Year: '2020', Month: '11', Day: '12' }
--

 */

We could also use $ to refer to matched named group values.

const s = "Year: 2020, Month: 11, Day: 12";

console.log(s.replace(/(?<year>Year: \d+), (?<month>Month: \d+), (?<day>Day: \d+)/, "$<day>, $<month>, $<year>"));

// Day: 12, Month: 11, Year: 2020

special pattern

As you saw earlier, we could use $ to do some shortcut operations. Actually, there are more. Let's see some of them.

const s = "--abc==";

// $& refer to matched substring
console.log(s.replace("abc", "$&def"));     // --abcdef==

// $` refer to substring before the matched substring
console.log(s.replace("abc", "$`"));        // ----==

// $' refer to substring after the matched substring
console.log(s.replace("abc", "$'"));        // --====

// because $ used as a meta character, so we use $$ to refer to normal $ character
console.log(s.replace("abc", "$$"));        // --$==