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", "$$")); // --$==