JavaScript String replace()

Introduction to the JavaScript String replace() method

This article will discuss the JavaScript array replacement of a new string using a function to replace all occurrences of a string or sentence with the string you want to replace.

The Javascript replace() method searches a string for a value or a regular expression. More details below with example of using the function . It is important to note the replace() method returns a new string with the replacement string. And finally the replace() function does not alter the original string. The string.replace Javascript function can be used to as a Javascript substring replace.

Replace the first occurrence in a string

By default the .replace() in Javascript function will change only the first occurrence in the string. If you want to to replace all js occurrences of the specified string as the second parameter you will need to use regular expressions to change all matches of a global with this method. More examples of using the regular expression will be in the following examples after we handle changing the first occurrence of of the new string. Afterwards for example will be replaced with a string or a function to be case insensitive javascript string replaceall.

Let's look at an example that does not use a regular expression and will only replace the first occurrence of the string. It actually looks quite similar to using JavaScript String concat() Method.

var carDescription = "My car is black with a yellow shine that I wish was yellow.";
var updatedCardDescription = carDescription.replace("yellow", "blue");
console.log('Original: ' + carDescription);
console.log('Replaced: ' + updatedCardDescription);

As you can see I created a new variable that returns a new string without using a regular expression. Also, I've used the word yellow twice but when you look at the resulting output only the first occurrence of yellow is replaced by a new string as the second parameter:

My car is black with a blue shine that I wish was yellow.

Careful not to confuse the replace function with javascript str_replace as this is not a real function.

Using regular expressions to Replace all occurrences of a string

The first example is great when the replacement string changes only the first occurrence of a string in this instance. However, it's probably more common to want to replace all occurrences of the second parameter in a string. Remember Javascript replace(), it returns a new string that will str replace javascript the string or a sentence using a regular expression to replace all occurrences of the string.

For example if want to replace all occurrences of yellow in the example string above I can use the following regular expression:

var carDescription = "My car is black with a yellow shine that I wish was yellow.";
var updatedCardDescription = carDescription.replace(/yellow/g, "blue");
console.log('Original: ' + carDescription);
console.log('Replaced: ' + updatedCardDescription);

In the following example yellow will be replaced by orange throughout the whole string:

My car is black with a blue shine that I wish was blue.

In this example the double quotes are replace with / (forward slash) and /g is added to the function which is a simple regular expression that means a global replacement in the string.

Replace a string case insensitive without considering uppercase/lowercase

In Javascript the two previous examples are great, now let's complete using the replace() function to also change the string with a case insensitive in the original string. For example if I had a typo in my code and actually wrote Yellow with a capital instead of all lowercase the string replace a replacement string and the string replace a new string with the same one. For example if I ran the following code, I would get the same result as the previous example:

var carDescription = "My car is black with a yellow shine that I wish was yellow.";
var updatedCardDescription = carDescription.replace(/Yellow/gi, "blue");
console.log('Original: ' + carDescription);
console.log('Replaced: ' + updatedCardDescription);

The only difference between this example and the last one is the regular expressions have been updated to also include "i" after the "g" in the regular expression that will replace all occurrences of a string with the replace() method returns a new string with the new string as the second parameter.

Replace multiple strings using a regular expression

You can also run the replace() function with the specified example where the method returns a new string replaced by the new string to be replaced.

var carDescription = "My car is black with a yellow shine that I wish was yellow.";
var updatedCardDescription = carDescription.replace(/Yellow|black/gi, "blue");
console.log('Original: ' + carDescription);
console.log('Replaced: ' + updatedCardDescription);

By using the | delimiter the whole string will look completely different now:

My car is blue with a blue shine that I wish was blue. I've still include the regular expressions /gi so the replacement will be case insensitive in the specified example if you want to replace all occurrences of one or more strings. This is similar to Javascript array tutorial that I've compiled many useful articles about.

Hopefully this article explains the replace() function so you can use this in Javascript to use as a regular practice for replacing a string with a new string.

Published on Jun 25, 2022

Tags: Javascript | JavaScript | replace