Uncaught TypeError: Cannot read properties of undefined (reading 'replace'). I am facing this error in my site

Question

I am using this code on the WordPress website and errors continuously coming to my site.

<script>
            function setNiceResult(valor, id){
                var div = $("#"+id);
                valor = valor.replace(/\{\{/g, "<strong class=\"fuerte\">").replace("}}", "</strong>");
                valor = valor.replace(/\}\}/g, "</strong>");
                valor = valor.replace(/\{/g, "<strong class=\"medio\">").replace("}", "</strong>");
                valor = valor.replace(/\}/g, "</strong>");
                div.html(valor);
                window.redrawMasonry(); // NO BORRAR!
            }
        </script>

This picture shows the error

Answer 1

The reason why you are receiving this error is because the variable valor does not have a value assigned to it and thus is undefined.

replace() is a function that acts on string values.

PROBLEM:

var sentence; // value is undefined
sentence = sentence.replace("word", "new word");  // trying to execute replace function in undefined type
console.log("sentence: ", sentence);

Solution 1: To prevent the error from occuring, you can assign an empty string value.

   var sentence = ''; // value is undefined
sentence = sentence.replace("word", "new word");  // trying to execute replace function in undefined type
console.log("sentence: ", sentence);

Solution 2:

You can use a ? optional chaining operator to only execute replace function if the value is not undefined:

var sentence;
sentence = sentence?.replace("word", "new word");
console.log("sentence: ", sentence);



var anotherSentence = "Some word value";
anotherSentence = anotherSentence?.replace("word", "new word");
console.log("anotherSentence: ", anotherSentence);