Replace string in JavaScript

How to replace a string in JavaScript?

String Replace

String replace is an string method {replace() method} in JavaScript, which is used to search for a match between s regular expression and a string, and replaces the matched substring with a new substring. This method having two required parameters 'Search' and 'New', 'Search' parameter searches in a string for the enterd value, 'New' parameter replaces the Search parameter in a string.

NOTE: The replace() method does not change the original string.

In JavaScript, by using replace() method we can replace a specified value in a string and returns the new specified value.

Replacing the elements in a string.

<p>Click the below button to search for a Match.</p>
<input type="button" value="Replace" onclick="Function()" />
<p id="myId">This is DotNetFunda</p>

<script>
    function Function() {
       var a = "This is DotNetFunda DotNetFunda";
       // replace 1st occurance
        var r = a.replace("DotNetFunda", "TechFunda");
        document.getElementById("myId").innerHTML = r;
       // replace all occurance
        r = a.replace(/DotNetFunda/g, "TechFunda");
        document.getElementById("myId").innerHTML += "<br />" + r;
    }
</script>

In the above code snippet we have given Id as "myId" to the second <p> element, there is a string with the variable a in the <script> code. We are replacing the value "DotNetFunda" with the "TechFunda" in a string, for that we used .replace("DotNetFunda", "TechFunda"). Onclick of the button "Replace" in the HTML code fires the Function() in the <script> code at the same time string method replace() starts replacing the value "DotNetFunda" with the "TechFunda" and gives the output as "This is TechFunda".

OUTPUT

To replace all occurances of the string, we need to wrap the string with "/" and suffix the "g" for global search.

Replacing the elements by doing global search.

<p>Click the below button to replace the Emirates with Lufthansa.</p>
<input type="button" value="Replace" onclick="Function()" />
<p id="myId">Emirates flights having Emirates girls, Emirates logo tags</p>

<script>
    function Function() {
        var a = document.getElementById("myId").innerHTML;
        var r = a.replace(/Emirates/g, "Lufthansa");
        document.getElementById("myId").innerHTML = r;
    }
</script>

Replacing with global search

We need to replace the elements by using global search, for that we are using 'g' in the replace() method in <script> block. Onclick of the button returns replaces the 'Emirates' with 'Lufthansa' and returns the output.

OUTPUT

Replacing the elements by doing global and case-insensitive serach.

<p>Click the below button to replace the Emirates with Lufthansa.</p>
<input type="button" value="Replace" onclick="Function()" />
<p id="myId">Emirates flights having Emirates girls, Emirates logo tags</p>

<script>
    function Function() {
        var a = document.getElementById("myId").innerHTML;
        var r = a.replace(/Emirates/gi, "Lufthansa");
        document.getElementById("myId").innerHTML = r;
    }
</script>

Replacing with global and case-insensitive search

We need to replace the elements by using global and case-insensitive search search, for that we are using 'gi' in the replace() method in <script> block. Onclick of the button returns replaces the 'Emirates' with 'Lufthansa' and returns the output.

OUTPUT

Replacing the elements by using return function.

<p>Click the below button to replace by using return function.</p>
<input type="button" value="Replace" onclick="Function()" />
<p id="myId">EMIRATE FLIGHTS HAVING EMIRATE EMPLOYS, EMIRATE GIRLS, EMIRATE LOGO TAGS.</p>

<script>
    function Function() {
        var a = document.getElementById("myId").innerHTML;
        var r = a.replace(/EMIRATE|EMPLOYS|TAGS/gi, function Function(A) { return A.toLowerCase();});
        document.getElementById("myId").innerHTML = r;
    }
</script>

Replacing by using return function

We need to replace the elemnts by using return function, so we used the return function in the replace() method. Onclick of the button replaces the upper case letters 'EMIRATES, EMPLOYS,TAGS' to lower case and returns the output.

OUTPUT