JavaScript replace() | Replace String with Another

The JavaScript replace() method is used when we need to replace a string using either string itself or regular expression. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "I love JavaScript. JavaScript is a great language.";
      
      let myNewString = myString.replace("JavaScript", "Python");
      document.getElementById("xyz").innerHTML = myNewString;
   </script>
   
</body>
</html>
Output

Let me modify the above example to replace all occurrences of specified string (JavaScript), using of course a regular expression:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "I love JavaScript. JavaScript is a great language.";
      
      let myNewString = myString.replace(/JavaScript/g, "Python");
      document.getElementById("xyz").innerHTML = myNewString;
   </script>
   
</body>
</html>
Output

The g in /JavaScript/g stands for global, is a modifier used in regular expression, to get all matches. Therefore, both the word (JavaScript) from above example, was replaced by Python.

Note - If there is only one occurrence of specified value that has to be replaced with another one. Or if you wanna replace only the first occurrence of specified old value with new one, then only go with direct string. Otherwise always prefer to replace string using regular expression.

JavaScript replace() Syntax

The syntax of replace() method in JavaScript is:

string.replace(oldValue, newValue)

Both the arguments, that are oldValue and newValue are required.

The replace() method returns a new string that is equal to the specified string, except that its oldValue will be replaced with newValue.

Note - Use regular expression along with g and i (stands for case-insensitive) modifiers to replace all occurrences of oldValue with newValue without caring on the case (upper and lowercase) of the characters.

JavaScript Online Test


« Previous Tutorial Next Tutorial »