Find non-word character in a string with JavaScript RegExp

Javascript Web Development Front End Technology

In this tutorial, we learn how to find non-word characters in a string using JavaScript Regular Expression. Actually, word characters include A-Z, a-z, 0-9 and _. Coming to the non-word characters except word characters like !, @, #, $, %, ^, &, *, (, ), {, } etc. Non-word characters, we denote as \W. We all know about RegExp (Regular Expression) in JavaScript. RegExp is an object that specifies the pattern used to do a search and replace operations on a string or for input validation. RegExp was introduced in ES1 and it is fully supported by all browsers.

ASCII code for non-word characters are

! - 33, @ - 64, #- 35, $ - 36, % - 37, ^ - 94, & - 38, * - 42, + - 43, - - 45, ( - 40, ) - 41.

Now, we will check how to find non-word characters using RegExp.

Syntax

Syntax for non-word or \W character is

new RegExp("\W") or simply /\W/

/\W/, is introduced in ES1. It is fully supported by all browsers. Like, Chrome, IE, Safari, Opera, FireFox and Edge.

RegExp has modifiers like g, i, m. "g" for performing global matches, "i" for performing case-insensitive matching and "m" for performing multiline matching.

The syntax for \W with a modifier like,

new RegExp("\W", "g") or simply /\W/g

Steps to find non-word character in a string

STEP 1 - Declare and define a string with some non-word characters.

STEP 2 - Define regular expression pattern.

STEP 3 - Find the non-word characters by matching the string with the regex pattern.

STEP 4 - Display the result.

Example

In the below example, we use RegExp and the match() method to find non-word in a string.

<!DOCTYPE html>
<html>
<body>
   <h1>Finding non-word character</h1>
   <p>Non-word characters :
      <p id="result"></p>
   </p>
   <script>
      let text = "_HiWelcome@2022%!$%&*@!{[()]}";
      let pattern = /\W/g;
      let result = text.match(pattern);
      document.getElementById("result").innerHTML = result;
   </script>
</body>
</html>

Example

Here, If non-word characters exist in the given text, match() method will return an array of existing non-word characters. If not, it will return as null. Let's see another example.

<!DOCTYPE html>
<html>
<body>
   <h1>Finding non-word character</h1>
   <p id="result"></p>
   <script>
      let text = "_HiWelcome2022";
      let pattern = /\W/g;
      let result = text.match(pattern);
      if(result == null){
         document.getElementById("result").innerHTML = "Sorry, No non-word present in the text";
      }else{
         document.getElementById("result").innerHTML = "Non-word character(s):" +result;
      }
   </script>
</body>
</html>

Here, there are no non-word characters present in the text. The match() method returned as null. So, if the statement is executed. If text has non-word characters as shown in the first example, then match() method will return an array of existing nonword characters. So, the else statement will execute.

Example

Now, we will check how to replace word character(s) in a given text. Let’s see an example

<!DOCTYPE html>
<html>
<body>
   <h1>Replace non-word character(s)</h1>
   <p>After replacing non-word character(s) :
      <p id="result"></p>
   </p>
   <script>
      let text = "_HiWelcome@2022%!$%&*@!{[()]}";
      let pattern = /\W/g;
      let result = text.split(pattern).join(" ");
      document.getElementById("result").innerHTML = result;
   </script>
</body>
</html>

Example

We will also check another way to replace non-word character(s). Let’s see an example

<!DOCTYPE html>
<html>
<body>
   <h1>Replace non-word character(s)</h1>
   <p>After replacing non-word character(s) :
      <p id="result"></p>
   </p>
   <script>
      let text = "_HiWelcome@2022%!$%&*@!{[()]}";
      let pattern = /\W/g;
      let result = text.replace(pattern , " ");
      document.getElementById("result").innerHTML = result;
   </script>
</body>
</html>

As we discussed, g for global matches. Instead of stopping with the first occurrence, it will look for all the occurrences.

I Hope, this tutorial will help you to know how to find non-word characters using RegExp in JavaScript.