JS: String.prototype.replace

Original string is not changed by this function.

str.replace(findStr, repStr)

• Replace the first occurrence of findStr by repStr.
• Return the new string.
• No regex is used.

"a.b.c".replace(".", "-") === "a-b.c"

str.replace(findStr, repFunc)

• Replace the first occurrence of findStr by the return value of function repFunc.
• Return the new string.
• No regex is used.

The function is called for each match. See: JS: Regex Replace Function Args

str.replace(regexObj, repStr)

• Replace regexObj by repStr.
• Return the new string.

If regexObj has the RegExp Flag g, replace all occurrences, else just first occurrence.

In the replacement string repStr, {$1, $2, etc} refers to captured group. 〔see JS: Regex Replace String Dollar Sign〕

// Basic example of replace with regex

// no global flag g, only first occurrence replaced
console.log(
  "abc".replace(/./, "-") === "-bc",
);

// yes global flag g, replace all occurrences
console.log(
  "abc".replace(/./g, "-") === "---",
);

/*
example of using replace with regex with captured groups.
add alt attribute to a HTML image
*/

const aa = `
<img src="cat.jpg">
<img src="dog.jpg">
`;

// with global flag g, replace all
const bb = aa.replace(
  /<img src="([-\w]+)\.jpg">/g,
  '<img src="$1.jpg" alt="$1">',
);

console.log(
  bb === `
<img src="cat.jpg" alt="cat">
<img src="dog.jpg" alt="dog">
`,
);
// true

str.replace(regexObj, repFunc)

The function is called for each match. See: JS: Regex Replace Function Args

/*
add a alt attribute to a HTML image tag, but convert any underscore to space.
for example
<img src="my_cat.jpg">
becomes
<img src="my_cat.jpg" alt="my cat">
*/

const ff = ((
  Ms,
  G1,
) => (`<img src="${G1}.jpg" alt="${G1.replace(/_/g, " ")}">`));

const xtext = `
<img src="big_black_cat.jpg">
<img src="small_cat.jpg">
`;

const xrg = /<img src="([-\w]+)\.jpg">/g;

console.log(
  xtext.replace(xrg, ff) === `
<img src="big_black_cat.jpg" alt="big black cat">
<img src="small_cat.jpg" alt="small cat">
`,
);

Replace All

To replace all occurrences, use regex with the global flag g. (or use replaceAll)

"no no no".replace(/no/g, "yes") === "yes yes yes"

Regex Example

Using named capture:

// add alt attribute to a HTML image tag.

const x1 = `
<img src="cat.jpg">
<img src="dog.jpg">
`;

// with global flag g, replace all
const x2 = x1.replace(
  /<img src="(?<imgName>[-\w]+)\.jpg">/g,
  '<img src="$<imgName>.jpg" alt="$<imgName>">',
);

console.log(
  x2 === `
<img src="cat.jpg" alt="cat">
<img src="dog.jpg" alt="dog">
`,
);