JavaScript replace method to change strings with 6 demos

What is string replace method of JavaScript

The JavaScript replace method is used to find and replace a given term in a string. For example:

 

• You have to provide the string to be replaced and string replaced by in the JavaScript replace method.
• The return string after using the replace method is modified string replaced with given term (if found).

See following examples of using the replace JS method with simple as well as regular expressions.

A simple example to replace string

In this example, I have created a string and assigned it to a JS variable. The string is:

“A JavaScript tutorial with demo”

After that, the JS replace method is used where “JavaScript” is replaced by the word “JS”. The variable’s value after using the replace method is displayed in a div element as the demo page loads. See the demo by clicking the link below:

See online demo and code

See the following code in <script> section, where replace method is used:

 

The last line displays the value of “replaced” string in the <span> tag which is inside the main div.

Also, note that the replace method is case sensitive. If word “javascript” was used in replace method, the source string would have remained the same. An example is shown in the later part of this tutorial to perform the case-insensitive replacement.

A demo of replace method to replace all matched words in a string

By default, the replace method changes the first occurrence of matched string. Even the source string has multiple occurrences, it will still replace just first occurrence. See this demo online where the word “test” is replaced by “TEST”.

See online demo and code

As you click the button to execute the replace method, you can see the first occurrence of “test” is replaced by “TEST” (which background color is changed). While the other occurrences are unchanged.

In order to apply replacement on all occurrences, you can use the regular expression (regex) with the global modifier (g). See the example with code to learn how you can use this.

See online demo and code

As you click the button in demo page, the replace JavaScript method executes where I used regex with global modifier:

 

By that statement, all occurrences of “test” will be replaced by “TEST”.  The <span> tag is used to show it clearly, that uses CSS style. The code is displayed by using this line:

1	document.getElementById("repdemo").innerHTML = str_rep;

 

Using replace method as case insensitive

In above example, you can see the word “test” occurred four times including with title-case i.e. “Test”. However, the replace method did not modify it.

In order to perform case insensitive modification, you can use “/i” modifier. In this demo, I have used the same source string as in above example. This time, all occurrences of word “test” will be replaced. See it online.

See online demo and code

Following JS code is used:

 

Particularly, note this line inside the function:

1	var str_rep = src_str.replace(/test/gi,"<span>TEST</span>");

 

By using “g” and “i”, all occurrences irrespective of the case will be replaced in given string.

A demo of using variable with regex to replace all

In above examples of replacing all terms in the source string, I used static string “test” in the regular expression. It does not use double quotes like ordinary JavaScript strings. So, if you try placing a variable there, e.g.

1	var str_rep = src_str.replace(/rep_term/gi,"<span>TEST</span>");

 

Where rep_term is supposed to be a variable, it will still act as a hard coded string. Upon executing above code, the “rep_term” will be searched in the given string instead of its value. So how can you use variables or user provided values to act as the replace term that also replace all occurrences including case-insensitive?

See the following demos, first using a simple variable.

See online demo and code

In this example, I have constructed a new RegExp object, where the variable and modifiers are used. See this line inside the replacetxt JS function that executes as you click the button:

 

The output of the above code is replacing all matches with case-insensitive.

A demo to replace all matches by user selected value

The variable in above example still contains the hard-coded value. In certain scenarios, you may get the value to be replaced by the visitors of website. The replace term can be taken by HTML dropdown for predefined options or textbox etc.

The source string, where replace term will be checked can be a hard-coded, database driven or even a paragraph, div or span etc element’s text in current web page.

In this demo, I will use the source text from the div element. A user is given the option to select a replacing term from the HTML dropdown.

After selecting the term, press the button to apply changes in the div text. Experience this demo online.

See online demo and code

In the JS code section, first of all, the div text is assigned to a string variable by using:

1	var src_str = document.getElementById("repdemo").innerHTML;

 

As you click the button, the replacetxt function is called where HTML dropdown values are assigned to JS variables:

 

This is followed by constructing the RegExp object, where replace term is used and replace all (g) and case-insensitive (i) modifiers are given:

1	var rep_regex = new RegExp(rep_term,"gi");

 

After that, the JS replace method is executed:

 

1	var str_rep = src_str.replace(rep_regex,"<span>" + rep_to + "</span>");

 

Finally, the replaced string is displayed in the div again that contained initial text:

1	document.getElementById("repdemo").innerHTML = str_rep;

 

Note that, I used two dropdowns for demo only. In pro sites, you may filter the other dropdown based at first selection or use textboxes etc.

You can see the complete code with markup and CSS styles in the demo page.