JavaScript String replace() Method

While working with text in JavaScript, one of the most common things that you have to do is replace a word, phrase, or character in a string. That is where you can use the JavaScript replace() method. With the help of this method, you can easily clean up strings without any effort. In this blog, we will discuss everything about JavaScript replace, how it works, and how you can use it to handle real-world text transformations efficiently

Table of Contents:

• What is String replace() in JavaScript?
  • Syntax of the String replace() Method
• Parameters of the JavaScript replace() method
• Return Value of JavaScript replace() Method
• Replacing Characters and Words Using String replace() in JavaScript
• Replacing Text Using Regular Expressions in JavaScript
• replaceAll() Method in JavaScript
• replace() vs replaceAll() in JavaScript
• Best Practices
• Real-World Examples
• Browser Compatibility
• Conclusion

What is String replace() in JavaScript?

The replace() method in JavaScript helps you to search for a specific value in a string and then replace it with another value. It is basically a part of the string object, which means that you can use it directly on any string. You can use the replace method in JavaScript to make simple replacements, like changing a single word, or you can use it for more complex operations, like replacing multiple occurrences using regular expressions.

Syntax of the String replace() Method

string.replace(searchValue, newValue)

Here,

• searchValue: It is the value or pattern that you want to replace (it can be a string or a regular expression).
• newValue: It is the new value that will replace the matched part.

A sample code snippet is given below for your reference:

Example:

Output:

Explanation: The above JavaScript code shows how the replace() method is used to change text in JavaScript. At first, it replaced only the first “JavaScript” with “Python”. Then, when it uses /JavaScript/g, it replaces all occurrences.. At last, /javascript/gi is used to replace every version of “JavaScript”, no matter what the case is. Each result is printed in the console, which shows the difference.

Master Full Stack Development from Scratch

Learn web development, deployment, and application management from the basics

Explore Program

Parameters of the JavaScript replace() method

The replace() method in JavaScript accepts two types of parameters: a searchValue and a newValue. This flexibility allows developers to handle both straightforward and complex text modifications in an efficient way. These two parameters help you decide what you want to change and what you want to replace it with.

1. searchValue

This is basically the value or pattern that you want to find in a string. You can pass these in two ways:

• As a string (to find an exact match).
• As a regular expression (to find patterns or multiple matches).

Example using a string:

Output:

Explanation: The above JavaScript code replaces the word “JavaScript” with “Python” in the text. After that, it prints the updated sentence to the console.

Example using a regular expression:

Output:

Explanation: Here, the /g flag present in the regex replaces all occurrences of “JavaScript”.

2. newValue

This is the text that replaces the matched part of the string. You can pass a normal or even a function that returns the replacement automatically. 

Example using a simple string:

Output:

Explanation: The above JavaScript code is used to change the word “World” to “Developer” in the text. After that, it displays the new sentence in the console.

Example using a function:

Output:

Explanation: The above JavaScript code is used to find all numbers in the text. After that, it doubles each number using a function, and then prints the result to the console.

Return Value of JavaScript replace() Method

The JavaScript replace() method is always used to return a new string with the specified text that has been replaced. It does not change or modify the original string. This is because strings in JavaScript are immutable, which means that they cannot be changed or modified. When you use the replace method in JavaScript, it searches for the given value (a word, phrase, or pattern) and then returns a new version of the string. If there are no matches found, it returns the original string.

Example:

Output:

Explanation: In the above example, the JavaScript replace() method is used to return a new string, “I like Python” while keeping the original string “I like JavaScript” the same. This makes the replace method safe to use because your original data remains unchanged.

Replacing Characters and Words Using String replace() in JavaScript

While working with text, sometimes you need to modify specific letters or words. The JavaScript string replace method allows you to do it easily. You can use this method to change one character, a group of characters, or even all the words in a string. The JavaScript replace-character-in-string feature provides you with complete control over how your text is formed by giving you control over how to update user input, clean data, or adjust the formatting of text.

Now, we will discuss how you can replace all characters of a string in JavaScript for single-character changes, as well as complete word replacements.

1. Using String replace() for Single Character Replacement in JavaScript

The JavaScript replace character in a string is a straightforward approach when you only want to replace one letter or symbol in your text. You just need to specify the character that you want to find and then the one that you want to replace it with.

Example 1:

Output:

Explanation: In the above code, the string replace method changes the first occurrence of ‘b’ to ‘c’. If the same character appears multiple times and you want to replace all of them, you can use a regular expression with a global flag /g.

Example 2:

Output:

Explanation: This is a simple example of how you can replace all characters in a string efficiently using the replace() method. The global flag helps you ensure that every matching character in the string gets replaced, not just the first one.

2. Using String replace() for Word Replacement in JavaScript

The JavaScript string replace() method is not limited to characters only. It also works perfectly if you want to replace words and phrases as well. This can be useful when you want to change specific words in a sentence or a paragraph without affecting other words.

Example 1:

Output:

Explanation: In the above example, you can see that the word “awesome” is replaced with the word “powerful”. The replace() method helps to return a new string while keeping the original one unchanged.

If the same word appears multiple times and you want to replace all of them, you can use a regular expression with the global flag /g.

Example 2:

Output:

Explanation: The above code shows how you can use JavaScript string replace to modify single or multiple words efficiently.

Replacing Text Using Regular Expressions in JavaScript

When you want more control over text replacement, regular expressions (RegEx) help to make the replace() method even more powerful. These expressions help you to search for patterns in text rather than just fixed words or characters. This means that you can replace multiple matches, ignore letter cases, or even work with complex text patterns.

Using RegEx with the replace() method helps you when you want to clear the data, format text, or modify multiple occurrences of a word in one go. Now, we will explore how to use those flags and capture groups to make your replacements smarter and more flexible.

1. Using Global(g) and Case-Insensitive (i) Flags in JavaScript

By default, the replace() method changes the first match it finds in a string. If you want to replace all the occurrences, you can use the global flag (g). In the same way, if you want to ignore the letter case (for example, match both “JavaScript” and “javascript”), you can use the case-insensitive flag (i).

Example:

Output:

Explanation: Here, the /g flag helps to ensure that all matches are replaced, and the /i flag ensures that it is not case-sensitive. Both the /g flag and /i flag help to make replacements accurate and flexible, no matter how the text appears.

2. Using Capture Groups and Callback Functions in JavaScript

The capture groups allow you to extract parts of the matched text and reuse them as a replacement. You can define a capture group using parentheses () inside your regular expression.

Example 1:

Output:

Explanation:

The above JavaScript code is used to find each “word:value” pair in the text and then replace the colon with an arrow. This turns it into a “word => value” format.

You can also pass a callback function as the second parameter in replace(). This function runs every time a match is found, and then it returns a custom replacement value based on logic.

Example 2:

Output:

Explanation: The above code is used to find all numbers in the text. After that, it doubles each one using a function, and then prints the updated text to the console.

replaceAll() Method in JavaScript

You can use the replaceAll() method in JavaScript when you want to replace all the occurrences of a specific word, phrase, or character in a string. Unlike the traditional JavaScript replace() method, which only changes the first match, the replaceAll() method finds and replaces every instance of the given value in one go.

Syntax

string.replaceAll(searchValue, newValue)

• searchValue: It denotes the text or pattern that you want to find in the string.
• newValue: It denotes the text that you want to replace.

Example:

Output:

Explanation: In the above example, every instance of JavaScript is replaced with Python. Unlike the normal JavaScript replace method, you don’t have to use /g for replacing all the values. replaceAll() can handle it automatically.

replace() vs replaceAll() in JavaScript

The difference between the replace() and replaceAll() methods in JavaScript is given below in tabular format:

Best Practices

1. The replace() method is only used to change the first match, and not all the occurrences. If you want to replace all the characters in a string in JavaScript, you need to use replaceAll() or a regular expression.

2. The replaceAll() method does not work with regex. It only accepts normal strings. Therefore, you need to use replace() with a regex when it is required.

3. Strings are immutable. This means that JavaScript does not modify the original string; it returns a new string.

4. When replacing a character in a string, forgetting to escape special symbols like ‘. ‘ or ‘?‘ can result in wrong replacements.

5. The replaceAll() method is not supported in all browsers. Therefore, you need to check the compatibility or replace() with regex instead.

Real-World Examples

1. Formatting Dynamic Messages: You can use JavaScript replace to fill placeholders in messages. For example, changing “Hello, {name}” to “Hello, Rahul“.

2. Correcting User Input: The replace method also helps you to fix user typos, like replacing “teh” with “the” in a sentence.

3. Sanitizing Text or HTML: You can also use JavaScript replace to remove or escape dangerous tags (like <script>) to keep your web page safe.

Browser Compatibility

When it comes to compatibility, the JavaScript replace method works well in all modern browsers without any issues. However, the replaceAll() method is new and may not work in old browsers or outdated versions. replaceAll() is supported in Chrome 85+, Edge 85+, Firefox 77+, and Safari 13.1+. Therefore, you should use JavaScript replace with a regular expression and the global flag (/g ). This helps to ensure that your code runs smoothly everywhere, no matter what the browser is.

Conclusion

The JavaScript replace() method is a simple yet powerful tool that helps you modify strings easily. Whether you are changing words, replacing characters, or cleaning up user input, this method is very useful. With replace(), you can make specific changes, and with replaceAll(), you can handle multiple replacements at once. Learning how to use the JavaScript replace method properly can make your code cleaner, more efficient, and ready for real-world text processing tasks.

Upskill today by enrolling in our Full Stack Development Course. Prepare for your next interview with our JavaScript Interview Questions prepared by industry experts.

JavaScript String replace() Method – FAQs