String replace()

replace() method accepts two arguments.

The first argument can be a RegExp object or a string.
The second argument can be a string or a function.

If the first argument is a string, then only the first occurrence is replaced. To replace all instances of a substring, you have to provide a regular expression with the global flag.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        var text = "doom, room, loom"; 
        
        var result = text.replace("oo", "aa"); 
        document.writeln(result); //daam, room, loom 
        
        
        result = text.replace(/oo/g, "aa"); 
        document.writeln(result); // daam, raam, laam

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

If the second argument is a string, there are several special character sequences that can be used to insert values from the regular-expression operations.

Sequence	Replacement Text
$$	$
$&	The substring matching the entire pattern.
$'	The part of the string occurring before the matched substring.
$`	The part of the string occurring after the matched substring.
$n	nth capture, where n is a value 0-9.
$nn	nnth capture, where nn is a value 01-99.

Using these special sequences allows replacement using information about the last match, such as in this example:

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        var text = "room, loom, doom"; 
        
        result = text.replace(/(.oo)/g, "aa ($1)"); 
        document.writeln(result); //aa (roo)m, aa (loo)m, aa (doo)m

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The following code shows the usage of $'

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        var text = "room, loom, doom"; 
        
        result = text.replace(/(.oo)/g, "aa ($')"); 
        document.writeln(result); //aa (m, loom, doom)m, aa (m, doom)m, aa (m)m

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The second argument of replace() may be a function. When there is a single match, the function gets passed three arguments:

the string match,
the position of the match,
and the whole string.

When there are multiple matches, the function gets passed three arguments:

matched string
the position of the match
the original string.

The function returns a string indicating what the match should be replaced with.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function htmlEscape(text){ 
           return text.replace(/[<>"&]/g, function(match, pos, originalText){ 
               switch(match){ 
                   case "<": 
                      return "<mark>&lt;</mark>"; 
                   case ">": 
                      return "<mark>&gt;</mark>"; 
                   case "&": 
                      return "<mark>&amp;</mark>"; 
                   case "\"": 
                      return "<mark>&quot;</mark>"; 
               } 
           }); 
        } 
        document.writeln(htmlEscape("<p class='greeting'>Hello world!</p>")); 
    </script>
</head>
<body>
</body>
</html>

Click to view the demo