Description

The JavaScript String method replace() creates and returns a new string with the specified string/regex replaced.

  • The method is case sensitive, so the case is also considered when it tries to find and replace values.

Syntax

The method repeat() has the below syntax, where str is a string.

str.replace(pattern, replacement)

Parameters

The method replace() allows the below parameters.

pattern

  • It is either a string or a regular expression that determines what to replace.

replacement

  • The pattern is replaced with this replacement.
  • It can be a string or a function that returns a replacement string.

Result

The method replace() returns a new string with the specified string/pattern replaced with the replacement string.

Example 1: Replace the First Occurrence

Be default, the method replaces the first occurrence if the string exactly matches the pattern including its case.

If it is a simple string replacemen, we can directly use a string or a regular expression.

var str = "Hello hello HELLO Hello hello HELLO";
var searchString = "hello";
var searchPattern = /hello/;

// Using a string
document.write(str.replace(searchString, "world"));    // Prints: Hello world HELLO Hello hello HELLO

// Using a simple pattern
document.write(str.replace(searchPattern, "world"));    // Prints: Hello world HELLO Hello hello HELLO

Output:

Hello world HELLO Hello hello HELLO
Hello world HELLO Hello hello HELLO

Example 2: Replace All Occurrences

By default, the method replaces only the first occurrence.

If we want to perform replacement of all the occurrences, then we need to use a regex with g switch for global search.

var str = "Hello hello HELLO Hello hello HELLO";
var pattern = /hello/;
var patternGlobal = /hello/g;

// Using a simple pattern
document.write(str.replace(pattern, "world"));         // Prints: Hello world HELLO Hello hello HELLO

// Using a pattern for global search
document.write(str.replace(patternGlobal, "world"));   // Prints: Hello world HELLO Hello world HELLO

Output:

Hello world HELLO Hello hello HELLO
Hello world HELLO Hello world HELLO

Example 3: Replace with Ignoring Case

By default, the method is case sensitive, so the replacement happens only if the case is matched.

If we want to perform a case-insensitive replacement, then we need to use a regex with i switch for case insensitive search.

var str = "Hello hello HELLO Hello hello HELLO";
var pattern = /hello/;
var patternGlobal = /hello/g;
var patternCaseInsensitive = /hello/i;
var patternGlobalCaseInsensitive = /hello/gi;

// Using a simple pattern
document.write(str.replace(pattern, "world"));    // Prints: Hello world HELLO Hello hello HELLO

// Using a pattern for global search
document.write(str.replace(patternGlobal, "world"));    // Prints: Hello world HELLO Hello world HELLO

// Using a pattern for case insensitive search
document.write(str.replace(patternCaseInsensitive, "world"));    // Prints: world hello HELLO Hello hello HELLO

// Using a pattern for global case insensitive search
document.write(str.replace(patternGlobalCaseInsensitive, "world"));    // Prints: world world world world world world

Output:

Hello world HELLO Hello hello HELLO
Hello world HELLO Hello world HELLO
world hello HELLO Hello hello HELLO
world world world world world world

Example 4: Passing Function as a Replacement

The method allows a function (instead of a string) as a replacement, where the function return value is used for replacement.

var str = "Random digit is: 5";

// Function to generate a random digit between 0 and 9
function generateRandomDigit() {
  return Math.floor(Math.random() * 10);
}

// regex to match a digit
var pattern = /\d/;

document.write(str.replace(pattern, generateRandomDigit));
document.write(str.replace(pattern, generateRandomDigit));
document.write(str.replace(pattern, generateRandomDigit));

Output:

Random digit is: 3
Random digit is: 4
Random digit is: 2

Overall

The JavaScript String method replace() creates and returns a new string with the specified string/regex replaced.

Related Links