[JS elevation] string pattern matching method

1. RegExp object

JS, like other languages, has regular expression support, that is, RegExp objects.

This object mainly provides two object methods:

  1. exec()
  2. test()

Usage examples are as follows:

let str = "cat bat";
let exp = /.at/g;
exp.exec(str); // ['cat', index: 0, input: 'cat bat', groups: undefined]
exp.exec(str); // ['bat', index: 4, input: 'cat bat', groups: undefined]
exp.exec(str); // null
let str = "cat bat";
let exp = /.at/g;
exp.test(str); // true

See more here link

2. String pattern matching method

However, the above methods are not commonly used when dealing with strings. Instead, the String type has designed several methods specifically for pattern matching in strings.

  1. match();
  2. search();
  3. replace();

2.1 match() , search()

The match() and search() methods are similar. Examples of their use are as follows:

let str = "cat, bat, sat, hat";
let pt = /.at/g;
let result = str.match(pt);
let str = "cat, bat, sat, hat";
let pt = /.at/g;
let result = str.search(pt);
console.log(result); // 0

Both methods accept a parameter, a regular expression string, or a RegExp object.

The difference is that match() returns the matched items. If it is in the / g matching mode, it returns a set of arrays containing all the matched items. Otherwise, it returns the first matched substring, and its return result is the same as that of exec(). The return result of search() is the index value of the first match. If there is no match, it returns - 1.

2.2 replace()

The key point is to be familiar with the replace() method, which is the most commonly used method

To simplify substring replacement, ECMAScript provides the replace() method. This method receives two parameters. The first parameter can be a RegExp object or a string (this string will not be converted into a regular expression), and the second parameter can be a string or a function.

That is, the repeat () method can be simply used to replace the substring in the string, or to replace the target substring matching the matching pattern.

  1. Replace substring, example:

    let str = "cat, bat, sat, hat";
    let result = str.replace("at","hello");// chello, bat, sat, hat

    ⚠️ Note: if the first parameter is a string, only the first substring will be replaced. If you want to replace all substrings, the first parameter must be a regular expression and the global matching mode is turned on.

  2. Replace regular matches, example:

    let str = "cat, bat, sat, hat";
    let pt = /at/g;
    let result = str.replace(pt,"hello");
    console.log(result);// chello, bhello, shello, hhello

2.2.1 the second parameter is the application of string

When the second parameter is a string, there are several special character sequences that can be used to insert the values of regular expression operations.

Character sequence replace text
$$ $
$& Substring that matches the entire pattern. Equivalent to RegExp.lastMatch
$' String before matching substring—— RegExp.rightContext
$` String after the matching substring—— RegExp. leftContext
$n Matches the substring of the nth capture group, n (0 ~ 9). If there is no capture group, the value is an empty string.
$nn Match the nnth capture group, nn (01~99). If there is no capture group, the value is an empty string.

The following example illustrates:

let str = "I love the moment you smile";
let exp = /I (love (the moment(you)) smile/

In this instance, there will be three capture groups:


str.replace(exp,"$$"); // Replace the matched substring with the ` $'symbol
// '$'

⚠️ Note: Although there is a capture group, because the whole pattern can match the complete source string, it is directly replaced with the $symbol.


str.replace(exp,"$&"); // 'I love the moment you smile'

$' ,$`

str.replace(exp,"$'"); // ''
str.replace(exp,"$`"); // ''
// "I love the moment you smile" is the first complete match, with empty characters on the left and right


str.replace(exp,"$1"); //'love the moment you'
str.replace(exp,"$2"); //'the moment'
str.replace(exp,"$3"); //'you'

be careful:

  1. The meaning of the above execution is to replace the string in the second parameter with the substring in the source string that is matched and hit by the first parameter (pattern).

  2. In the above ex amp le, the output of $, $` is an empty string, and $$returns $directly because $& as the hit result of the whole pattern, it is already the same as the source string, that is, the whole complete string is hit. If you make the following modifications, the results will be different:

    let str = 'I love the moment you smile';let exp = /love (the moment (you))/;str.replace(exp,"$$")// 'I $ smile'str.replace(exp,"$'")// 'I  smile smile'str.replace(exp,"$`")// 'I I  smile'

So, a little summary: when the second parameter of the string method replace() is a string, the replacement target of the replace() method is$&

As described in the above ex amp le, the replace() method provided by the original value wrapper object of the string "I love the moment you smile" will take the substring matched by the whole pattern (expression) as the target when replacing the content through the regular expression / love (the moment (you)) /, that is, "love the moment you" as the replacement target, that is $&. There is no question whether there is a capture group in the pattern.

2.2.2 the second parameter is the application of the function

The performance varies depending on whether there is a capture group

The second parameter of the replace() method also supports functions, which are used to more flexible replacement rules and expand the use requirements of capture groups.

The transfer parameters of the function are different according to whether there is a capture group in the first parameter (pattern):

  1. When there is no capture group: the function receives three parameters: ①. The string matching the whole pattern ②. The starting position of the matching item in the string ③. The whole string
  2. When there are capture groups: the string of each matching capture group will be passed to this function as a parameter, but the last two parameters are still the starting position of the whole matching mode and the original string. Therefore, the number of parameters is uncertain, which is n + 2

Here are some examples:

Example 1: no capture group:

Example 2: there is only one capture group:

Example 3: there are multiple capture groups:

Example of string replacement when the second parameter is a function:

Example 1:

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=\"greeting\">Hello world!</p>")); 
// "&lt;p class=&quot;greeting&quot;&gt;Hello world!</p>" 

❓ There is a question in this place:

I don't know what to do when the Pattern contains a capture group, for example:

let str = "i always love the way you lie";
let exp = /always (love) the way (you) lie/;
let res = str.replace(exp, function (...args) {
  for (let i = 0; i < args.length; i++) {
    if (args[i] === "love") {
      return "hate";
    } else if (args[i] === "you") {
      return "he";
console.log(res); //i hate

The expectation is to "love" - > "hate", "you" - > "she" in the source string.

Tags: Javascript

Posted on Wed, 24 Nov 2021 23:41:53 -0500 by markusn00b