String.prototype.replace()

Baseline

20157

replace() String pattern replacement pattern (RegExp) replacement pattern

const paragraph = "I think Ruth's dog is cuter than your dog!";

console.log(paragraph.replace("Ruth's", "my"));
// : "I think my dog is cuter than your dog!"

const regex = /Dog/i;
console.log(paragraph.replace(regex, "ferret"));
// : "I think Ruth's ferret is cuter than your dog!"

replace(pattern, replacement)

pattern

Symbol.replace Symbol.replace

replacement

pattern

g replaceAll()

pattern Symbol.replace RegExp replacement replace() replace() [Symbol.replace]() RegExp.prototype[Symbol.replace]()

pattern

"xxx".replace("", "_"); // "_xxx"

g replace() sticky replace() RegExp.prototype[Symbol.replace]()


`$$`	`"$"`
`$&`
$`
`$'`
`$n`	`n` 1 `n` 100
`$<Name>`	`Name`

$n $<Name> pattern RegExp pattern

"foo".replace(/(f)/, "$2");
// "$2oo"  2 

"foo".replace("f", "$1");
// "$1oo" 

"foo".replace(/(f)|(g)/, "$2");
// "oo" 2

function replacer(match, p1, p2, /* , */ pN, offset, string, groups) {
  return replacement;
}

match: $&
p1, p2, , pN: n replace() RegExp $1, $2, pattern /(\a+)(\b+)/ p1 \a+ p2 \b+ "abc".replace(/(a)|(b)/, replacer) undefined
offset: 'abcd' 'bc' 1
string
groups: undefined

RegExp

newString 'abc - 12345 - #$*%'

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is non-digits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(" - ");
}
const newString = "abc12345#$*%".replace(/(\D*)(\d*)(\W*)/, replacer);
console.log(newString); // abc - 12345 - #$*%

replace()

replace()

const str = "Twas the night before Xmas...";
const newStr = str.replace(/xmas/i, "Christmas");
console.log(newStr); // Twas the night before Christmas...

'Twas the night before Christmas...'

replace() 'apples' 'oranges'

const re = /apples/gi;
const str = "Apples are round, and apples are juicy.";
const newStr = str.replace(re, "oranges");
console.log(newStr); // oranges are round, and oranges are juicy.

'oranges are round, and oranges are juicy'

$1 $2

const re = /(\w+)\s(\w+)/;
const str = "Maria Cruz";
const newStr = str.replace(re, "$2, $1");
console.log(newStr); // Cruz, Maria

'Cruz, Maria'

function styleHyphenFormat(propertyName) {
  function upperToHyphenLower(match, offset, string) {
    return (offset > 0 ? "-" : "") + match.toLowerCase();
  }
  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}

styleHyphenFormat('borderTop') 'border-top'

toLowerCase() toLowerCase()

// 
const newString = propertyName.replace(/[A-Z]/g, "-" + "$&".toLowerCase());

'$&'.toLowerCase() '$&'

"F" "C" "212F" "100C" "0F" "-17.77777777777778C"

test F p1 f2c() f2c() Perl s///e

function f2c(x) {
  function convert(str, p1, offset, s) {
    return `${((p1 - 32) * 5) / 9}C`;
  }
  const s = String(x);
  const test = /(-?\d+(?:\.\d*)?)F\b/g;
  return s.replace(test, convert);
}

offset

"abcd".replace(/(bc)/, (match, p1, offset) => `${match} (${offset}) `);
// "abc (1) d"

offset string groups offset

function addOffset(match, ...args) {
  const offset = args.at(-2);
  return `${match} (${offset}) `;
}

console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"
console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (abcd) d"

args.at(-2) offset string addOffset

groups string

function addOffset(match, ...args) {
  const hasNamedGroups = typeof args.at(-1) === "object";
  const offset = hasNamedGroups ? args.at(-3) : args.at(-2);
  return `${match} (${offset}) `;
}

console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"
console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (1) d"


ECMAScript 2027 LanguageSpecification # sec-string.prototype.replace

MDN

MDN 2025822

GitHub