javascript - js regular expression will be weird if you use ^ and $ and then use g, but no error will be reported

Question

var reg1 =  /^1$/g;
var reg2 = /^1$/;
for (var i = 0; i < 10; i++) {
    console.log(reg1.test('1')) // true false true false true false true false ...
    console.log(/^1$/g.test('1')) // true  true  true  true  true  true  true ...
    console.log(reg2.test('1')) // true  true  true  true  true  true  true ...
    console.log(/^1$/.test('1')) // true  true  true  true  true  true  true ...
}

Why is the first console.log output like this?

Answer 1

When regular expression is executed, the lastIndex of the RegExp object may change.

The

test method is used to detect whether a string matches a certain regular rule. As long as the string contains text that matches the regular rule, the method returns true, otherwise it returns false.

In fact, if the regular expression has a global flag (with parameter g), the test method is also affected by the lastIndex attribute of the regular object, as follows:

var reg = /[a-z]+/;//正则不带全局标志
console.log(reg.test("abc"));//true
console.log(reg.test("de"));//true

var reg = /[a-z]+/g;//正则带有全局标志g
console.log(reg.test("abc"));//true
console.log(reg.lastIndex);//3, 下次运行test时,将从索引为3的位置开始查找
console.log(reg.test("de"));//false

This impact will be analyzed in the explanation of the exec method.

The

exec method is used to detect the match of a string against a regular expression. If a matching text is found, it returns a result array, otherwise it returns null.

Syntax: exec(string)

The array returned by the

exec method contains two additional attributes, index and input. And the array has the following characteristics:

• The 0th item represents the text captured by the regular expression

• The 1st~n item represents the 1~nth back reference, which points to the text captured in the 1~nth group in turn. You can use RegExp.$ + "Number 1~n" to get the text in the group in order

• index represents the initial position of the matching string

• input represents the string being retrieved

Regardless of whether the regular expression has the global flag "g" or not, the behavior of exec is the same. But the behavior of the regular expression object is somewhat different. Let's explain in detail how the behavior of the regular expression object is different.

Assume that the regular expression object is reg, the detected character is string, and the return value of reg.exec(string) is array.

If reg contains the global mark "g", then the reg.lastIndex attribute represents the position after the end of the matched string in the original string, that is, the position where the next matching starts. At this time, reg.lastIndex == array.index (match Starting position) + array[0].length (matching the length of the string). As follows:

var reg = /([a-z]+)/gi,
    string = "World Internet Conference";
var array = reg.exec(string);
console.log(array);//["World", "World", index: 0, input: "World Internet Conference"]
console.log(RegExp.);//World
console.log(reg.lastIndex);//5, 刚好等于 array.index + array[0].length

As the retrieval continues, the value of array.index will be incremented, that is to say, the value of reg.lastIndex will also be incremented synchronously. Therefore, we can also traverse all matches in the string by repeatedly calling the exec method Text. When the exec method no longer matches text, it will return null and reset the reg.lastIndex property to 0.

Following the above example, we continue to execute the code to see if the above is correct, as shown below:

array = reg.exec(string);
console.log(array);//["Internet", "Internet", index: 6, input: "World Internet Conference"]
console.log(reg.lastIndex);//14

array = reg.exec(string);
console.log(array);//["Conference", "Conference", index: 15, input: "World Internet Conference"]
console.log(reg.lastIndex);//25

array = reg.exec(string);
console.log(array);//null
console.log(reg.lastIndex);//0

In the above code, as the exec method is called repeatedly, the reg.lastIndex property is eventually reset to 0.

Problem Review

In the explanation of the test method, we left a problem. If the regular expression has the global flag g, the execution result of the above test method will be affected by reg.lastIndex. Not only that, the exec method is also the same. Since reg.lastIndex The value is not always zero, and it determines the starting position of the next match. If you want to start retrieving a new string after completing a match in a string, you must manually reset the lastIndex attribute. is 0. Avoid the following errors:

var reg = /[0-9]+/g,
    str1 = "123abc",
    str2 = "123456";
reg.exec(str1);
console.log(reg.lastIndex);//3
var array = reg.exec(str2);
console.log(array);//["456", index: 3, input: "123456"]

The correct execution result of the above code should be "123456", so it is recommended to add "reg.lastIndex = 0;" before executing the exec method for the second time.

If reg does not contain the global flag "g", then the execution result (array) of the exec method will be exactly the same as the execution result of the string.match(reg) method.

This snippet comes from the Regular Expression Front-End User Manual | louis blog. If it was helpful, please give it a like~

Answer 2