Javascript - String Replacing Method

  1. HOME
  2. Javascript
  3. String
  4. String Replacing Method

Introduction

To replace substrings, use the replace() method.

This method accepts two arguments.

  • The first argument can be a RegExp object or a string and the string is not converted to a regular expression, and
  • the second argument can be a string or a function.

If the first argument is a string, then only the first occurrence of the substring will be replaced.

The only way to replace all instances of a substring is to provide a regular expression with the global flag specified: 

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
console.log(result);    //"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");
console.log(result);    //"cond, bond, sond, fond"

In this example, the string "at" is first passed into replace() with a replacement text of "ond".

The result of the operation is that "cat" is changed to "cond", but the rest of the string remains intact.

By changing the first argument to a regular expression with the global flag set, each instance of "at" is replaced with "ond".

When 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. Same as RegExp.lastMatch.
$'The part of the string occurring before the matched substring. Same as RegExp.rightContext
$`The part of the string occurring after the matched substring. Same as RegExp..leftContext
$nThe nth capture, where n is a value 0-9. For instance, $1 is the first capture, $2 is the second, etc. If there is no capture then the empty string is used.
$nn The nnth capture, where nn is a value 01-99. For instance, $01 is the first capture, $02 is the second, etc. If there is no capture then the empty string is used.

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

var text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
console.log(result);    //word (cat), word (bat), word (sat), word (fat)

Here, each word ending with "at" is replaced with "word" followed in parentheses by what it replaces by using the $1 sequence.

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 within the string, and
  • the whole string.

When there are multiple capturing groups, each matched string is passed in as an argument, with the last two arguments being the position of the pattern match and the original string.

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

Using a function as the second argument allows more granular control over replacement text:

Demo

function htmlEscape(text){
   return text.replace(/[<>"&]/g, function(match, pos, originalText){
       switch(match){
           case "<":
               return "&lt;";
           case ">":
               return "&gt;";
           case "&":
               return "&amp;";
           case "\"":
               return "&quot;";
       }/* w w  w.j a  v  a 2s .  c om*/
   });
}
console.log(htmlEscape("<p class='greeting'>Hello world!</p>"));

Result

Here, the function htmlEscape() is defined to escape four characters: the less-than, greater-than, ampersand, and double-quote characters.

Related Topics