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

Regular expression (regular expression) describes a string matching pattern, 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 string.

Regular expressions are often forgotten because they are not often used. Here is a brief list of commonly used functions and functions for later review:

There are two commonly used functions for RegExp objects

1. test function

Usage: RegExpObject. test (string)

Returns true if the string string contains text that matches RegExpObject, otherwise false.

Description: There is nothing special about this method, and there is no special treatment for the 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 is  true 

2. exec function

Usage: RegExpObject. exec (string)

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

Description:

The exec () method is very powerful, it is a generic method, and it is more complex to use than the test () method and the methods of String objects that support regular expressions.

If exec () finds a matching text, it returns an array of results. Otherwise, null is returned. The 0th element of this array is the text that matches the regular expression, the first element is the text that matches the first subexpression of RegExpObject (if any), the second element is the text that matches the second subexpression of RegExpObject (if any), and so on. In addition to the array element and the length attribute, the exec () method returns two attributes. The index attribute declares the position of the first character of the matching text. The input attribute holds the retrieved string string. You can see that when you call the exec () method of a non-global RegExp object, you return the same array as when you call the method String. match ().

However, when RegExpObject is a global regular expression, the behavior of exec () is slightly more complicated. It starts retrieving the string string at the character specified by the lastIndex attribute of RegExpObject. When exec () finds text that matches the expression, after the match, it sets the lastIndex property of RegExpObject to the next 1 position of the last 1 character of the matching text. That is, you can iterate through all the matching text in the string by repeatedly calling the exec () method. When exec () can no longer find a 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)); //null
reg.lastIndex = 0; // This code is very important oh, pay attention to understand 
console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]

Regular expression 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]

Have you found anything different? Read the function description carefully once and you will understand it

There are 4 functions of String object that support regularity, and 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: An array of matching results. The contents of the array depend on whether regexp has the global flag g.

Description:

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

If regexp does not flag g, the match () method can only perform one match in stringObject. If no matching text is found, match () returns null. Otherwise, it returns an array containing information about the matching text it finds. The 0th element of the array holds the matching text, while the remaining elements hold the text that matches the subexpressions of the regular expression. In addition to these regular array elements, the returned array also contains two object attributes. The index attribute declares the position of the starting character of the matching text in stringObject, and the input attribute declares a reference to stringObject.

If regexp has the flag g, the match () method performs a global retrieval to find 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 contents of the array returned by global matching are quite different from the former. Its array elements hold all the matching substrings in stringObject, and there is no index attribute or input attribute.

Example:

g without modifier

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); //21
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); //undefined
console.log(result.input); //undefined 

Have you found anything different? Read the function description carefully once and you will understand it

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 the Find and Replace operation. It looks for substrings in stringObject that match regexp and replaces them with replacement. If regexp has the global flag g, the replace () method replaces all matching substrings. Otherwise, it replaces only the first matching substring.

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

字符	替换文本
$1、$2、...、$99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与 regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$'	位于匹配子串右侧的文本。
$$	直接量符号。（意思就是要替换为 $ 符号的时候，就写两个$）

Example:

g without modifier

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=3
return '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 The output is: 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=3
return '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 modifiers g
var url1 = url.replace(reg,"$&")
console.log(url1); //http://www.baidu.com?a=1&b=2&c=3
var url1 = url.replace(reg,"$1")
console.log(url1); //http://www.baidu.com?a&b=2&c=3
var url1 = url.replace(reg,"$2")
console.log(url1); //http://www.baidu.com?1&b=2&c=3
var url1 = url.replace(reg,"$'")
console.log(url1); //http://www.baidu.com?&b=2&c=3&b=2&c=3
var reg = /([^?&=]+)=([^?&=])*/g; // With modifiers g
var url1 = url.replace(reg,"$&")
console.log(url1); //http://www.baidu.com?a=1&b=2&c=3
var url1 = url.replace(reg,"$1")
console.log(url1); //http://www.baidu.com?a&b&c
var url1 = url.replace(reg,"$2")
console.log(url1); //http://www.baidu.com?1&2&3
var url1 = url.replace(reg,"$'")
console.log(url1); //http://www.baidu.com?&b=2&c=3&&c=3&