Follow @endyourif rss Facebook LinkedIn

JavaScript String replace() JavaScript String replace()

Published on Jun 25, 2022

Table of contents:

  1. Introduction to the JavaScript String replace() method
  2. Replace the first occurrence in a string
  3. Using regular expressions to Replace all occurrences of a string
  4. Replace a string case insensitive without considering uppercase/lowercase
  5. Replace multiple strings using a regular expression

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.

Tags: Javascript | JavaScript | replace

About Jamie Munro

Welcome to my blog. I have been compiling articles since 2009! Below is a list of every post I've ever created. Some of my major focuses have been compiling the best source of jQuery tutorials on the Internet today. A recent focus of mine is now focusing on creating the best SQL Tutorials for Beginners, Intermediate and Advanced Users. This is a compiliation of all my experience about how to do common SQL commands to optimize for performance. As you might see from the links around here, I've also written and published 5 books. My first and last book are focused around ASP.NET MVC and Web API tutorials. The last book has a big focus on integrating Knockout.js as the MVVM for the front-end code. O'Reilly Media was so interested in Knockout.js that they actually commissioned me to write that book first as it is one of the only books dedicated entirely to this MVVM library. So if you're looking for the best Knockout.js tutorials, I've compiled the best list. My first book, even though it was self published, was on the PHP framework: CakePHP. I used this framework for years and many of my first ever exampes were all focused on CakePHP tutorials that provide so many fantastic PHP examples. There are so many Javascript tutorials out there, but I noticed that one of the things I work on most with Javascript is arrays. With this I've worked hard on compiling a big list of really advanced Javascript array examples. These array examples are amazing including how to group by, get distinct array elements and so many more. I've also dabbled a little bit with Node.js and during those experiments I definitely ran into some common errors like Can't set headers after they are sent, Solving No Access-Control-Allow-Origin with Node js and Express, and Uncaught ReferenceError: require is not defined. With these common errors I've compiled a list of Node.js tutorials that help solve these problems, but more importantly getting you started with the basics.