JavaScript replace() Method

Introduction

The replace() method in JavaScript is used to replace a specific character, word, or pattern in a string with another value. It is one of the most commonly used string methods because developers frequently need to modify text, clean user input, format data, or update content dynamically.

The replace() method does not modify the original string because strings in JavaScript are immutable. Instead, it returns a new updated string.

What is JavaScript replace() Method?

The JavaScript replace() method searches for a specified value in a string and replaces it with another value.

Syntax of replace()

string.replace(searchValue, newValue);

Explanations:

• searchValue: Character, word, or pattern to search
• newValue: Replacement value

Basic Examples of replace()

You will see some basic examples of the replace() method.

Example 1: Replace Word

let text = "I love Java";
console.log(text.replace("Java","JavaScript"));

Output:

Example 2: Replace Character

let text = "Hello";
console.log(text.replace("H","Y"));

Output:

Example 3: Replace Number

let amount = "Price: 100";
console.log(amount.replace("100","200"));

Output:

Replaces Only First Match

When you need to replace only the first match in the string.

Example:

let text = "Java Java Java";
console.log(text.replace("Java","JavaScript"));

Output:

Note: In this example, you see only the first occurrence replaced.

Replaces Only First Match when use Case-Insensitive

You should use

/i

Example:

let text = "I love javascript";
console.log(text.replace(/JAVASCRIPT/i,"JS"));

Output:

Replacing All Matches Using Regular Expression

You should use

/g

Example:

let text = "Java Java Java";
console.log(text.replace(/Java/g,"JavaScript"));

Output:

Real-Life Example 1: Convert Date Format

let date = "2010-05-19";
console.log(date.replace(/-/g,"/"));

Output:

Real-Life Example 2: Replace Product Name

let product = "Old Phone Model";
console.log(product.replace("Old","New"));

Output:

Difference Between replace() and replaceAll()

Common Mistakes in replace()

You will see some common mistakes.

Mistake 1: Expecting Original String to Change

Wrong expectation:

let text = "Hello";
text.replace("Hello","Hi");
console.log(text);

Output:

Correct:

let text = "Hello";
let newText = text.replace("Hello","Hi");
console.log(newText);

Output:

Mistake 2: Expecting All Matches to Replace

Example:

"Java Java".replace("Java","JS");

Output:

Correct way:

You should regex

"Java Java".replace(/Java/g,"JS");

Output:

Conclusion

The JavaScript replace() method is a powerful string method used to replace characters, words, or patterns in strings. It is commonly used in text formatting, form validation, search functionality, data cleaning, and dynamic content updates.

One important thing to remember is that replace() changes only the first occurrence unless you use regular expressions or replaceAll().

Related JavaScript Tutorials