JavaScript - replaceAll() method

revision:

Category : string

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

If the parameter is a regular expression, the global flag (g) must be set, otherwise a TypeError is thrown.

Syntax : 

        string.replaceAll(searchValue, newValue)

Parameters:

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

newValue : required. The new value (to replace with). This parameter can be a JavaScript function.

Examples: 

            <p>ES2021 intoduced the string method replaceAll().</p>
            <p id="demo"></p>
            <script>
                let text = "I love cats. Cats are very easy to love. Cats are very popular."
                text = text.replaceAll("Cats","Dogs");
                text = text.replaceAll("cats","dogs");
                document.getElementById("demo").innerHTML = text;
            </script>

Practical examples

example: a global replacement.

code: 
                    <div>
                        <p id="replace-1"></p>
                        <p id="replace-2"></p>
                    </div>
                    <script>
                        let text = "I love cats. Cats are very easy to love. Cats are very popular."
                        document.getElementById("replace-1").innerHTML = "sentence : " + text;
                        text = text.replaceAll("Cats","Dogs");
                        text = text.replaceAll("cats","dogs");
                        document.getElementById("replace-2").innerHTML = "sentence after replacement : " + text;
                        
                    </script>

example: a gloval, case-insenstitve replacement.

Mr Blue has a blue house and a blue car.

code: 
                    <div>
                        <p id="replace-3">Mr Blue has a blue house and a blue car.</p>
                    <p id="replace-4"></p>
                    </div>
                    <script>
                        let text1 = document.getElementById("replace-3").innerHTML; 
                        document.getElementById("replace-3").innerHTML = "original sentence : " + text1;
                        let result1 = text1.replace(/blue/gi, "red");
                        document.getElementById("replace-4").innerHTML = "replacements : " + result1;
                    </script>

example: a function to return the replacement text.

Mr Blue has a blue house and a blue car.

code: 
                    <div>
                        <p id="replace-5">Mr Blue has a blue house and a blue car.</p>
                        <p id="replace-6"></p>
                    
                    </div>
                    <script>
                        let text2 = document.getElementById("replace-5").innerHTML; 
                        document.getElementById("replace-5").innerHTML = "original sentence : " + text2;
                        let result2 = text2.replace(/blue|house|car/gi, function (x) {
                            return x.toUpperCase();
                        });
                        document.getElementById("replace-6").innerHTML = "replacements : " + result2;
                    </script>