JS: String.prototype.replace

By Xah Lee. Date: . Last updated: .

The method String.prototoype.replace has 2 forms. The first arg can be a literal string, or a RegExp object. They have different behavior.


  1. The first occurrence of find_str in string str is replaced by string replace_str.
  2. No regex is used.
  3. Returns a new string.
  4. If no match, the original string is returned.
  5. str is not changed.


  1. Return a new string.
  2. The replace_str_or_func can be a string or function.
  3. If string, {$1, $2, …} refers to captured group.
  4. If function, it'll receive args: {matched substring, capture group 1, capture group 2, …}. If no match, the original string is returned.
  5. str is not changed.

Non-RegExp Example

// example of literal replace

const xx = "aaa";

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

console.log( xx.replace("a+", "9") === "aaa" ); // true
// No change, because no match.
// first arg is treated as string, not regex

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

Only first occurrence is replaced:

// only the first occurrence is replaced

const xx = "aaa";

    xx.replace("a", "b") // returns baa

If not found, returns the original string:

// if not found, returns the original string

const xx = "abc.xyz";

    xx.replace("e", "3") // returns abc.xyz. because not found

RegExp Example

Basic example:

// example of RegExp replace

const xx = "jane@example.com";

    xx.replace(/@.+\.com/, "")
); // prints "jane"

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">

function underscore_to_space(whole, capture1) {
    return '<img src="' + capture1 + '.jpg"' + ' alt="' + capture1.replace("_", " ") + '">';

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

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

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


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: Source Code Encoding
  2. JS: String Code Unit vs Code Point
  3. JS: Unicode Character Escape Sequence
  4. JS: Allowed Characters in Identifier
  5. HTML: Allowed Characters in id Attribute
  6. HTML: Character Sets and Encoding
  7. HTML/XML Entity List

  1. JS: Template String
  2. JS: Convert String to Number
  3. JS: Encode URL, Escape String
  4. JS: Format Number
  5. JS: JSON

  1. JS: String Object
  2. JS: String.prototype
  3. JS: String Constructor
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon