Comprehensive parsing of match, replace, exec and other functions in JS strings and regular expressions

Regular expressions describe a pattern of string matching, which can be used to check whether a string contains a certain substring, replace the matching substring, or take out a substring that meets a certain condition from a certain string, etc.

Because regular expressions are not used frequently, they are easy to forget them frequently. The following editor lists the commonly used functions and functions here in a concise manner for future viewing:

There are 2 commonly used functions of RegExp object

1. Test function

Usage: RegExpObject.test(string)

Return: true if the string string contains text matching RegExpObject, otherwise false.

Description: There is nothing special about this method, and there is no special treatment for modifier g

Example:

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /a=1/;console.log(reg.test(url)); // The output result is true

2. Exec function

Usage: RegExpObject.exec(string)

Return: Returns an array where matching results are stored. If no match is found, the return value is null.

describe:

The exec() method is very powerful. It is a general method and is more complex to use than the test() method and the methods that support regular expressions.

If exec() finds a matching text, a result array is returned. Otherwise, return null. The 0th element of this array is text that matches the regular expression, the 1st element is text that matches the 1st subexpression of RegExpObject, if any, the 2nd element is text that matches the 2nd subexpression of RegExpObject, and so on. In addition to the array element and length attribute, the exec() method returns two properties. The index property declares the position of the first character matching the text. The input property stores the retrieved string string. We can see that when calling the exec() method of a non-global RegExp object, the returned array is the same as the array returned by calling the method String.match().

However, when RegExpObject is a global regular expression, the behavior of exec() is slightly more complicated. It starts searching for string string at the character specified by the lastIndex property of RegExpObject. When exec() finds text matching the expression, after matching, it sets the lastIndex property of RegExpObject to the next position of the last character of the matching text. That is to say, you can iterate through all matching text in the string by calling the exec() method repeatedly. When exec() can no longer find the matching text, it returns null and resets the lastIndex property to 0.

Example:

Regular expression with modifier g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/g;console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["b=2", "b", "2", index: 25, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["c=3", "c", "3", index: 29, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //nullreg.lastIndex = 0; //This code is very important, please pay attention to understanding console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]

Regular expressions without modifier g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/g;console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]reg.lastIndex = 0; console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]reg.lastIndex = 0; console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]

Have you found something different? Read the function description carefully and you will understand ^_^

There are 4 functions of String object that support regularity, we will only talk about 2 of them.

1. Match function

Usage: stringObject.match(searchvalue | regexp), here we only talk about regexp mode

Return value: Array that stores matching results. The contents of this array depend on whether regexp has the global flag g.

describe:

The match() method retrieves the string stringObject to find one or more text matching regexp. The behavior of this method depends to a large extent on whether regexp has the flag g.

If regexp does not have flag g, the match() method can only perform a match once in stringObject. If no matching text is found, match() returns null. Otherwise, it returns an array that stores information about the matching text it found. The 0th element of the array stores matching text, while the rest store text matching the subexpression of the regular expression. In addition to these regular array elements, the returned array also contains two object properties. The index attribute declares the position of the starting character matching the text in the stringObject, and the input attribute declares a reference to the stringObject.

If regexp has the flag g, the match() method performs a global search, finding all matching substrings in stringObject. If no matching substring is found, null is returned. If one or more matching substrings are found, an array is returned. However, the content of the array returned by global match is very different from the former. Its array element stores all matching substrings in stringObject, and there is no index attribute or input attribute.

Example:

Without modifier g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/;var result = url.match(reg);console.log(result); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(result.index); //21console.log(result.input); //http://www.baidu.com?a=1&b=2&c=3"]console.log(result.input); //http://www.baidu.com?a=1&b=2&c=3

With modifier g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/g;var result = url.match(reg);console.log(result); //["a=1", "b=2", "c=3"]console.log(result.index); //undefinedconsole.log(result.input); //undefined

Have you found something different? Read the function description carefully and you will understand ^_^

2. Replace function

Usage: stringObject.replace(regexp/substr,replacement)

Return value: A new string obtained after replacing the first match or all matches of regexp with replacement.

Description: The replace() method of the string stringObject performs a search and replace operation. It will look for substrings matching regexp in stringObject and replace those substrings with replacement. If regexp has the global flag g, the replace() method replaces all matching substrings. Otherwise, it only replaces the first matching substring.

replacement can be a string or a function. If it is a string, then each match will be replaced by the string. But the $ character in replacement has a specific meaning. As shown in the following table, it states that the string obtained from pattern matching will be used for replacement.

Example:

Without modifier g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/;var url1 = url.replace(reg,function(a,b,c,d,e){console.log(a,b,c,d,e); //a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3return 'ok';})console.log(url1); //http://www.baidu.com?ok&b=2&c=3

With modifier g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/g;var url1 = url.replace(reg,function(a,b,c,d,e){console.log(a,b,c,d,e); //Execute 3 times, outputs are: a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3 and b=2, b, 2, 25, http://www.baidu.com?a=1&b=2&c=3 and | c=3, c, 3, 29, http://www.baidu.com?a=1&b=2&c=3return 'ok';})console.log(url1); //http://www.baidu.com?ok&ok&ok

When the second parameter is a string

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/; // without modifier gvar url1 = url.replace(reg,"$&")console.log(url1); //http://www.baidu.com?a=1&b=2&c=3var url1 = url.replace(reg,"$1")console.log(url1); //http://www.baidu.com?a&b=2&c=3var url1 = url.replace(reg,"$2")console.log(url1); //http://www.baidu.com?1&b=2&c=3var url1 = url.replace(reg,"$'")console.log(url1); //http://www.baidu.com?&b=2&c=3&b=2&c=3var reg = /([^?&=]+)=([^?&=])*/g; //with modifier gvar url1 = url.replace(reg,"$&")console.log(url1); //http://www.baidu.com?a=1&b=2&c=3var url1 = url.replace(reg,"$1")console.log(url1); //http://www.baidu.com?a&b&cvar url1 = url.replace(reg,"$2")console.log(url1); //http://www.baidu.com?1&2&3var url1 = url.replace(reg,"$'")console.log(url1); //http://www.baidu.com?&b=2&c=3&c=3&

The above is the comprehensive analysis of match, replace, exec and other functions in JS strings and regular expressions introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!