JavaScript - replace() method

revision:

Category : string

The replace() method searches a string for a value or a regular expression. It returns a new string with the value(s) replaced. It does not change the original string.

If you replace a value, only the first instance will be replaced. To replace all instances, use a regular expression with the "g" modifier set.

Syntax : 

        string.replace(searchValue, newValue)

Parameters:

searchValue : required. The value, or regular expression, to search for.

newValue : required. The new value (to replace with).

Examples: 

           <p>replace() searches a string for a value,  and returns a new string with the specified value(s) replaced:</p>
           <p id="demo">Visit Microsoft!</p>
           <script>
                let text = document.getElementById("demo").innerHTML; 
                document.getElementById("demo").innerHTML = text.replace("Microsoft", "W3Schools");
            </script>

Practical examples

example: a global replacement.

replace() searches a string for a value, and returns a new string with the specified value(s) replaced:

Mr Blue has a blue house and a blue car.

code: 
                    <div>
                        <p>replace() searches a string for a value,  and returns a new string with the specified value(s) replaced:</p>
                        <p id="replace-1">Mr Blue has a blue house and a blue car.</p>
                        <p id="replace-2"></p>
                    </div>
                    <script>
                        let str = document.getElementById("replace-1").innerHTML; 
                        document.getElementById("replace-1").innerHTML = "original sentence : " + str;
                        let res = str.replace(/blue/g, "red");
                        document.getElementById("replace-2").innerHTML = "replacements : " + res;
                        
                    </script>

example: a global, case-insentive replacement.

replace() searches a string for a value, and returns a new string with the specified value(s) replaced:

Mr Blue has a blue house and a blue car.

code: 
                    <div>
                        <p>replace() searches a string for a value,  and returns a new string with the specified value(s) replaced:</p>
                        <p id="replace-3">Mr Blue has a blue house and a blue car.</p>
                    <p id="replace-4"></p>
                    </div>
                    <script>
                        let text = document.getElementById("replace-3").innerHTML; 
                        document.getElementById("replace-3").innerHTML = "original sentence : " + text;
                        let result = text.replace(/blue/gi, "red");
                        document.getElementById("replace-4").innerHTML = "replacements : " + result;
                    </script>

example: a function to return the replacement text.

replace() searches a string for a value, and returns a new string with the specified value(s) replaced:

Mr Blue has a blue house and a blue car.

code: 
                    <div>
                        <p>replace() searches a string for a value, and returns a new string with the specified value(s) replaced:</p>
                        <p id="replace-5">Mr Blue has a blue house and a blue car.</p>
                        <p id="replace-6"></p>
                    
                    </div>
                    <script>
                        let text1 = document.getElementById("replace-5").innerHTML; 
                        document.getElementById("replace-5").innerHTML = "original sentence : " + text1;
                        let result1 = text1.replace(/blue|house|car/gi, function (x) {
                            return x.toUpperCase();
                        });
                        document.getElementById("replace-6").innerHTML = "replacements : " + result1;
                    </script>