Why character class and capturing group show different results in javascript regexp for a whitespace character followed by a dot?

Question

I was solving the chapter exercises from this book - http://eloquentjavascript.net/09_regexp.html

There is a question where I need to write a regular expression for a whitespace character followed by a dot, comma, colon, or semicolon.

I wrote this one

var re1 = /\s(.|,|:|;)/;

The book had this as answer

var re2 = /\s[.,;:]/;

I understand that the second one is correct, and it is more efficient. But leaving behind efficiency, the first one should also give correct results.

The first one doesn't give correct output for the following piece of code -

console.log(re1.test("escape the dot"));  // prints true

It should have given "false" but it outputs the opposite. I couldn't understand this. I tried https://www.debuggex.com/ too, but the figure also seems to be okay!

It seems that I am missing some understanding from my end.

Answer 1

Just as I finished this question to post, I realised my mistake that was giving me the wrong output. So, I thought I would rather share both the question and answer here so as to help anyone who might face some similar problem in future.

The thing is the period (dot) itself, when used between square brackets, loses its special meaning. The same goes for other special characters, such as +.

But they retain their special meaning when used in a capturing group.

So, the code

var re1 = /\s(.|,|:|;)/;
console.log(re1.test("escape the dot"));  // prints true

is rather looking for the pattern - a space followed by either a character that's not newline ( because of period ), or any of comma, colon, and semi-colon.

To get the correct output, the correct re, if used with capturing group, would be,

var re1 = /\s(\.|,|:|;)/;