JS: String.prototype.replace

By Xah Lee. Date: . Last updated: .

String.prototoype.replace has 2 different behavior, depending on if the first argument is string or regex object.

str.replace(str1,str2)

str.replace(regex_obj,replace_str_or_func)

[see JS: RegExp Syntax]

When using regex, the following dollar sign sequence have special meaning in the replace string.

  1. $nnth grouped match. (n is a positive integer less than 100)
  2. $& → the matched string.
  3. $` → the string before the matched string.
  4. $' → the string after the matched string.
  5. $$ → literal dollar sign character.

Non-RegExp Example

// example of literal replace

const xx = "a.b.c";

console.log( xx.replace(".", "9") === "a9b.c" ); // true
// Only first occurrence is replaced
// first arg is treated as string, not regex

// original string is not changed
console.log( xx === "a.b.c" ); // true

If not found, returns the original string:

// if not found, returns the original string
const xx = "abc";
console.log( xx.replace("e", "3") === "abc" ); // true

RegExp Example

Basic example:

// example of RegExp replace
const xx = "jane@example.com";
console.log( xx.replace(/@.+\.com/, "") === "jane" ); // true

Example of “replace” method with captured group:

// example of RegExp replace

// add alt attribute to a HTML image tag.

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

const x2 = x1.replace(/<img src="([-_\w]+)\.jpg">/, '<img src="$1.jpg" alt="$1">');

console.log(x2); // prints <img src="cat.jpg" alt="cat">

Example using “replace” method with a function as second argument.

// example of RegExp replace, using function as replacement

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

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

const x1 = '<img src="big_black_cat.jpg">';

const x2 = x1.replace(/<img src="([-_\w]+)\.jpg">/, ff);

console.log ( x2 === '<img src="big_black_cat.jpg" alt="big black cat">' ); // true

Replace All

To replace all occurrences, use regex with the global flag g.

// replace all
const x1 = "no no no";
const x2 = x1.replace(/no/g, "yes");
console.log ( x2 === "yes yes yes" ); // true

Reference

ECMAScript® 2016 Language Specification#sec-string.prototype.replace

RegExp Topic

  1. JS: RegExp Tutorial
  2. JS: RegExp Syntax
  3. JS: Regex Find/Replace
  4. JS: RegExp Object
  5. JS: RegExp Constructor
  6. JS: RegExp.prototype

String Topic

  1. JS: String Overview
  2. JS: Template String
  3. JS: String Escape Sequence
  4. JS: Unicode Escape Sequence
  5. JS: String Object
  6. JS: String.prototype
  7. JS: String to Number
  8. JS: Encode URL, Escape String
  9. JS: Format Number
  10. JS: JSON
  11. JS: Source Code Encoding
  12. JS: Allowed Characters in Identifier
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc