Javascript String Pattern Match

• « Previous
• Next »

The String type has methods to pattern-match within the string.

match()

String match() is essentially the same as RegExp object's exec() method.

The match() method accepts a single argument, which is either a regular-expression string or a RegExp object.

match() and RegExp object's exec() return the same array: the first item is the string that matches the entire pattern, and each other item (if applicable) represents capturing groups in the expression.

var text = "cat, bat, sat, fat";
var pattern = /.at/;

//same as pattern.exec(text)
var matches = text.match(pattern);
console.log(matches.index);        //0
console.log(matches[0]);           //"cat"
console.log(pattern.lastIndex);    //0

The code above generates the following result.

search()

search() accepts a regular expression specified by either a string or a RegExp object.

The search() method returns the index of the first pattern occurrence in the string or -1 if it's not found.

search() always begins looking for the pattern at the beginning of the string.

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
console.log(pos);   //1

The code above generates the following result.

replace()

We can use string replace() method to replace. It accepts two arguments.

The first argument can be a RegExp object or a string and the string is not converted to a regular expression, 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:

var text = "cat, hat, ate, fat";
var result = text.replace("at", "aaa");
console.log(result);    

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

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

• Sequence:$$
  Replacement Text:$
• Sequence:$&
  Replacement Text:The substring matching the entire pattern.
• Sequence:$'
  Replacement Text:The part of the string occurring before the matched substring. Same as RegExp..rightContext
• Sequence:$`
  Replacement Text:The part of the string occurring after the matched substring. Same as RegExp..leftContext
• Sequence:$n
  Replacement Text:The 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.
• Sequence:$nn
  Replacement Text: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.

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

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, the last two arguments are the position of the pattern match in the string and the original string.

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

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;";
       }
   });
}

console.log(htmlEscape("<p class='myClass'>Hello world!</p>"));

split()

split() separates the string into an array of substrings based on a separator.

The separator may be a string or a RegExp object.

An optional second argument, the array limit, ensures that the returned array will be no larger than a certain size.

var colorText = "A,B,C,D";
var colors1 = colorText.split(",");      
console.log(colors1);
var colors2 = colorText.split(",", 2);   
console.log(colors2);
var colors3 = colorText.split(/[^\,]+/); 
console.log(colors3);

The code above generates the following result.

• Next »
• « Previous