• JavaScript Video Tutorials

JavaScript String replace() Method

Previous
Next

The JavaScript String replace() method searches for a value or a regular expression and returns a new string by replacing the first occurrence of a pattern with a specified replacement. The pattern can be either a string or a regular expression, and the replacement can be either a string or a function. It does not change the original string value, but returns a new string.

If the pattern is string, then only the first occurance will be removed.

Following is the difference between replace() and replaceAll() method −

The replaceAll() method replaces all occurrences of a search value or a regex with a specified replacement, for example: "_tutorials_point_".replaceAll("_", "") returns "tutorialspoint", whereas the replace() method replaces only the first occurrence of a search value or a regex with a specified replacement.

Syntax

Following is the syntax of JavaScript String replace() method −

replace(pattern, replacement)

Parameters

This method accepts two parameters such as: 'pattern' and 'replacement', which are described below −

  • pattern − The string or a regular expression replaced by the replament.
  • replacement − The string or function to be replaced the pattern.

Return value

This method returns a new string with the first occurrence of a pattern replaced by a specified value.

Example 1

In this program, we are using the JavaScript String replace() method to replace a string "Point" with "point" in the string "Tutorials Point".

<html>
<head>
<title>JavaScript String replace() Method</title>
</head>
<body>
<script>
   const str = "Tutorials Point";
   document.write("Original string: ", str);
   document.write("<br>New string after replacement: ", str.replace("Point", "point"));
</script>
</body>
</html>

Output

The above program returns "Tutorials point" after replacement −

Original string: Tutorials Point
New string after replacement: Tutorials point

Example 2

Here is another example of the JavaScript String replace() method. In this example, we use the replace() method to replace the first occurrence of whitespace (" ") with an empty string ("") in the string " Hello World ".

<html>
<head>
<title>JavaScript String replace() Method</title>
</head>
<body>
<script>
   const str = " Hello World ";
   document.write("Original string: ", str);
   document.write("<br>New string after replacement: ", str.replace(" ", ""));
</script>
</body>
</html>

Output

After executing the above program, it returns a new string "Hello World " after replace.

Original string: Hello World
New string after replacement: Hello World

Example 3

When the search (pattern) value is an empty string, the replace() method inserts the replacement value at the beginning of the string, before any other characters.

<html>
<head>
<title>JavaScript String replace() Method</title>
</head>
<body>
<script>
   const str = "TutorialsPoint";
   document.write("Original string: ", str);
   document.write("<br>New string after replace: ", str.replace("", "__"));
</script>
</body>
</html>

Output

Once the above program is executed, it returns " __TutorialsPoint".

Original string: TutorialsPoint
New string after replace: __TutorialsPoint

Example 4

In the following program, we specify a string "$2" as the replacement argument to the replace() method. The regular expression does not have a second group, so it replaces and returns "$2oo".

<html>
<head>
<title>JavaScript String replace() Method</title>
</head>
<body>
<script>
   const str = "foo";
   let replacement = "$2";
   document.write("Original string: ", str);
   document.write("<br>Replacement: ", replacement);
   document.write("<br>New String after replacement: ", str.replace(/(f)/, replacement));
</script>
</body>
</html>

Output

The above program returns "$2oo".

Original string: foo
Replacement: $2
New String after replacement: $2oo
Print Page
Previous
Next
Advertisements