How to replace all occurrences of a string in JavaScript?

MoreOnFew
Posted underJavascript

Out of the different “Data Types” in JavaScript, String has been one of my favorites. It is also one of the most widely used Data Type. It would not be an understatement to say that most of our programming activities revolve around some kind of string. Many times you would come across scenarios in JavaScript to replace all occurrences of a string.  In JavaScript, there are various native built-in string related methods however there is no JavaScript replace all method predefined. Instead, String.replace() is a very common method that most of us would have used. Let us take a look at it.

The syntax of String.replace() is :

/* where 'string' is your string object or a string */
string.replace(searchvalue,newvalue);

In the syntax above, the “string” refers to the String object that you want to execute the “replace” method on, “searchvalue” refers to the word / character that you want to look for and replace within the string, and the “newvalue” refers to the new word/character that you want to replace the “searchvalue” with.

Let’s look at an example of the default behaviour :

var str = "John is happy today as john won the match today";

/* Let's replace "John" with "He". 
However, Please note that this is the default behavior and not the actual solution! */

str = str.replace('John','He');

/* str becomes:
He is happy today as john won the match today. */

However, if you notice the second occurrence of “john” was not replaced. That is exactly what the replace method does. It by default replaces only the first occurrence of the string to be replaced or the search string.

Then, How do we search and replace all the occurrences of a string in JavaScript? Is there a JavaScript replace all method? – Resolved !

Well, there isn’t any JavaScript replace all method available out of the box but a JavaScript replace all regex is available. To search and replace all the occurrences of a string in JavaScript using the string.replace() method, you’ll have to pass the search string as a regular expression. For example :

The Answer !!

var str = "John is happy today as john won the match today. John made 100 runs.";

// Let's replace "John" with "He".

str = str.replace(/John/g,'He');

/* str becomes:
 He is happy today as john won the match today. He made 100 runs.
 To make the search case-insensitive pass the "i" parameter
 in regular expression. */

str = str.replace(/John/gi,'He');

/* Now str becomes :
 He is happy today as He won the match today. He made 100 runs. */

Also since the search is case sensitive, we had to pass the “i” parameter in the regular expression along with the “g” parameter to make the search case-insensitive. You may consider reading more about regular expressions, they are extremely useful.

jQuery string replace all

Even in jQuery we can replace all string or text using the same method. All you need to do is to access the string value using one of the jQuery Selectors and run it through the regex mentioned in the example above.

Typescript Replace all occurrences of a string 

Even in Typescript, the concept essentially remains the same as that of JavaScript. Since Typescript too has the JavaScript methods available, you can use the same replace() method.

let myStr = "John is happy today as john won the match today. John made 100 runs.";
myStr = myStr.replace(/John/gi, 'Tom');
/* makes myStr as "Tom is happy today as Tom won the match today. Tom made 100 runs. */

You may use the above-mentioned method to do replace all spaces in string in Javascript, replace all quotes in Javascript, or to replace all dots/periods in JavaScript string too. Also, you may use the same method to do a JavaScript replace all occurrences of a string in jquery or to try a JavaScript replace all commas. Please remember to use the JavaScript replace all regex to match and replace as per your requirement. Hope you liked our article on JavaScript Replace all occurrences.

TaggedJavascriptRegular ExpressionString


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew