\\w - stands for [A-Za-z0-9_] Character class
But i am not able to understand how it is interpreted inside character class.
So when
I guess range is doing everything here, when you use ^[A-Za-z0-9_-~]+$
_-~ matches a single character in the range between _ (index 95) and ~ (index 126) (case sensitive) that's why T| get matched and returns true but when you use ^[\w-~]+$ it is not forming any range of characters like _-~ to match so it fails and returns false
See ^[A-Za-z0-9-~]+$ also returns false because it doesn't include the _ character to make the range _-~ between _ (index 95) and ~ (index 126)
let test = (str) => /^[A-Za-z0-9-~]+$/.test(str)
console.log(test("T|"))
See https://regex101.com/r/vbLN9L/5 here on the EXPLANATION section.
I believe that the main difference between both your examples is the location of your - character. What's happening here is that in this example:
let test = (str) => /^[A-Za-z0-9_-~]+$/.test(str)
console.log(test("T|"))
It's evaluated as a range, like so:
let test = (str) => /^[_-~]+$/.test(str)
console.log(test("|"))
will return true.
Where in this one:
let test = (str) => /^[\w-~]+$/.test(str)
console.log(test("T|"))
Since \w is a set of characters in and of itself, it's evaluating the character - by itself.
The position of - and it's surrounding can make a huge difference in how it's interpreted.
You could avoid that situation, altogether, by moving it to the end, like so:
let test = (str) => /^[A-Za-z0-9_~-]+$/.test(str)
console.log(test("T|"))
which will return false