w vs W in JavaScript regex?

Javascript Web Development Front End Technology

This article discusses about the \w vs \W in JavaScript regex. The \w and \W meta characters are used to match the characters of a given string. \w and \W are different from each other. \w (character) is equivalent to [a-zA-Z0-9_] that means it matches any single letter, number, or underscore.

The characters that are not matched by the \w are matched by the \W. \W is equivalent to [^a-zA-Z0-9_] that means it matches any character other than letter, number and underscore. To match a string with a pattern, the possible methods are: string.match(pattern), string.search(pattern), pattern.exec(string), pattern.test(text). We use match method only in these examples.

Syntax

The syntax for \w regex is −

RegExp("\w", "g")
Or
/\w/g

Example 1

This is an example program to use the \w metacharacter.

<!DOCTYPE html>
<html>
<head>
   <title>\w vs \W in JavaScript regex</title>
</head>
<body style="text-align : center">
   <h3>\w vs \W in JavaScript regex</h3>
   <p id='result'></p>
   <script>
      var string = "!#@ Tutorials point is one of the best e-learning platform @#!"
      var reg_ex = new RegExp("\w", "g");
      var output = string.match(reg_ex);
      document.getElementById('result').innerHTML = output;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The syntax for \W regex is −

RegExp("\W", "g")
Or
/\W/g

This is an example program to use the \W metacharacter.

<!DOCTYPE html>
<html>
<head>
   <title>\w vs \W in JavaScript regex</title>
</head>
<body style="text-align : center">
   <h3>\w vs \W in JavaScript regex</h3>
   <p id='result'></p>
   <script>
      var string = "!#@ Tutorials point is one of the best e-learning platform @#!"
      var reg_ex = new RegExp("\W", "g");
      var output = string.match(reg_ex);
      document.getElementById('result').innerHTML = output;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example3

This is an example program to compare the result for \w and \W pattern and user defined patterns.

<!DOCTYPE html>
<html>
<head>
   <title>\w vs \W in JavaScript regex</title>
</head>
<body style="text-align : center">
   <h3>\w vs \W in JavaScript regex</h3>
   <p id='result'></p>
   <script>
      var string = "!#@_ Tutorials point is one of the best e-learning platform _@#!"
      var reg_ex1 = new RegExp("\w", "g"); //Existing Regular expression Metacharacter \w
      var reg_ex2 = /[a-zA-Z0-9_]/g; // User-defined pattern
      var reg_ex11 = /\W/g; //Existing Regular expression Metacharacter \W
      var reg_ex22 = /[^a-zA-Z0-9_]/g; // User-defined pattern
      var output1 = string.match(reg_ex1);
      var output2 = string.match(reg_ex2);
      var output11 = string.match(reg_ex11);
      var output22 = string.match(reg_ex22);
      document.getElementById('result').innerHTML = 'For \w :'+'<br/>'+' Using RegExp("\w", "g") : '+output1+'<br/>'+'Using /[a-zA-Z0-9_]/g : '+output2+'<br/>'+'For \W :'+'<br/>'+'Using /\W/g : '+output11+'<br/>'+'Using /[^a-zA-Z0-9_]/g : '+output22;
   </script>
</body>
</html>

On executing the above code, the following output is generated.