JavaScript tutorial: Methods of replacing all occurrences of a string in JavaScript
Today we are going to learn different ways to replace string in JavaScript. There are many ways to replace all occurrences of a string in JavaScript. From all these methods regular expression method is most preferred way and it can be used very easily. In this tutorial we will see the source code of replacing string in JavaScript.
1. Replace all occurrences with regular expression
All modern browser support regular expression with standard class RegExp, which can be used in JavaScript for regular expression based find operations. This class can also be used for find and replace process. In almost all the programming languages regular expression provides many functionality which can be used for processing the text data.
Here is in this example we will replace all the occurrences of a string in another string. Here is our string:
var str = "Welcome to abc Programming Language. abc Programming language is client side scripting language.";
Here is the code for replacing all the occurrences of "abc" with "JavaScript" in str variable.
function replaceWithRegex(){
var replaced = str.replace(/abc/g, "JavaScript");
alert(replaced);
}
We will call this function on the button client and it will replace all the occurrences of "abc" with "JavaScript". Here is the output of the program in browser:
2. Regular expression case sensitive replace example
In JavaScript regular expression replace is done considering case sensitiveness. For example in the following example code "dog" lower case will be replaced.
var dog = "I love dog. Dog is faithful animal.";
function replaceWithRegexCaseSensitive(){
var replaced = dog.replace(/dog/g, "cat");
alert(replaced);
}
Here is output of the program:
3. Regular expression case in-sensitive replace example
Now we will see how to do case in-sensitive replace in JavaScript. For case in-sensitive replace all in JavaScript we will use RegExp() class in following way:
var searchString = "dog";
var regEx = new RegExp(searchString, "ig");
Syntax of RegExp():
// Constructor regular expression object with the two parameters
var re = new RegExp("regular expression", "gi");
The "gi" parameters makes search operation case in-sensitive.
The RegExp() function takes two parameters, the first parameter is search string and second is option. In option parameter we will pass "ig" which instruct the function to perform case in-sensitive search.
Here is full code of case in-sensitive replace all string in JavaScript:
var str2 = "I love dog. Dog found in abundant around the world.";
function replaceWithRegexCaseInSensitive(){
var searchString = "dog";
var regEx = new RegExp(searchString, "ig");
var replacementString = "cat";
var replaced = str2.replace(regEx, replacementString);
alert(replaced);
}
Here is output of the program:
4. Replace with split and join
There is another alternate solution using the split() and join() functions of JavaScript. Here we first split the string with search keyword and then join the spitted data with the replacement. So, this way replace all string is achieved in JavaScript.
Here is complete code of replace with split() and join() methods:
Here is full code of example HTML page used for testing JavaScript replace:
<html>
<head>
<title>Replacing string in JavaScript examples</title>
<script language="JavaScript">
var str = "Welcome to abc Programming Language. abc Programming language is client side scripting language.";
function replaceWithRegex(){
var replaced = str.replace(/abc/g, "JavaScript");
alert(replaced);
}
var dog = "I love dog. Dog is faithful animal.";
function replaceWithRegexCaseSensitive(){
var replaced = dog.replace(/dog/g, "cat");
alert(replaced);
}
var str2 = "I love dog. Dog found in abundant around the world.";
function replaceWithRegexCaseInSensitive(){
var searchString = "dog";
var regEx = new RegExp(searchString, "ig");
var replacementString = "cat";
var replaced = str2.replace(regEx, replacementString);
alert(replaced);
}
var dog = "I love dog. Dog is faithful animal.";
function replaceWithSplitAndJoin(){
var splitted = dog.split("dog");
var replaced = splitted.join("cat");
alert(replaced);
}
</script>
</head>
<body>
<h1>Replacing string in JavaScript examples</h1>
<h2>Regular expression Replace string example</h2>
<p>
<button onclick="replaceWithRegex()" >Regex Replace example</button>
</p>
<p>JavaScript code for replacing using the regular expression:</p>
<pre>
<code class="javascript">
function replaceWithRegex(){
var replaced = str.replace(/abc/g, "JavaScript");
alert(replaced);
}
</code>
</pre>
<h2>Regular express case sensitive replace</h2>
<p>Regular express is used for performing case sensitive replace in a string.</p>
<p><button onclick="replaceWithRegexCaseSensitive()" >Regex case sensitive Replace example</button></p>
<pre>
<code class="javascript">
var dog = "I love dog. Dog is faithful animal.";
function replaceWithRegexCaseSensitive(){
var replaced = dog.replace(/dog/g, "cat");
alert(replaced);
}
</code>
</pre>
<h2>Regular express case in-sensitive replace</h2>
<p>Regular express is used for performing case in-sensitive replace in a string.</p>
<p><button onclick="replaceWithRegexCaseInSensitive()" >Regex case in-sensitive Replace example</button></p>
<pre>
<code class="javascript">
var str2 = "I love dog. Dog found in abundant around the world.";
function replaceWithRegexCaseInSensitive(){
var searchString = "dog";
var regEx = new RegExp(searchString, "ig");
var replacementString = "cat";
var replaced = str2.replace(regEx, replacementString);
alert(replaced);
}
</code>
</pre>
<h2>Replace with split and join</h2>
<p>In JavaScript split() and join() functions can be used for replacting all string.</p>
<p><button onclick="replaceWithSplitAndJoin()" >Replace with split and join</button></p>
<pre>
<code class="javascript">
var dog = "I love dog. Dog is faithful animal.";
function replaceWithSplitAndJoin(){
var splitted = dog.split("dog");
var replaced = splitted.join("cat");
alert(replaced);
}
</code>
</pre>
</body>
</html>
Check example online at Replacing string in JavaScript examples.
In this tutorial we have learned various ways to replace all string in JavaScript. Here are more tutorials of JavaScript:
