Find word character in a string with JavaScript RegExp?

Javascript Web Development Front End Technology

In this tutorial, we will see how to find a word character from the text. Word character denote as \w. Word character is a character like a-z, A-Z and 0-9 and also includes underscore(_). We all know about RegExp (Regular Expression) in js. RegExp is an object and specifies the pattern used to do search and replace operations on string or for input validation. RegExp was introduced in ES1 and it is fully supported by all the browsers.

ASCII code for A-Z is 65- 90, a-z is 97-122, 0-9 is 48-57 and for underscore is 95.

Syntax

Syntax for 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

Syntax for \w with modifier like,

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

Steps to find word character in a string

STEP 1 - Define a string with some word characters.

STEP 2 - Define a regular expression to find word characters.

STEP 3 - Perform matching between the string and the regex. The result of this matching is an object of word characters in the string.

STEP 4 - Display the result.

Let's see an example for finding the word character \w from the text.

Example

In the example below, we find the word characters in a string using the regular expression and the match() method.

<!DOCTYPE html>
<html>
<body>
   <h1>Finding word character</h1>
   <p>Word characters :
      <p id="result"></p>
   </p>
   <script>
      let text = "_Hi, Welcome back!20@";
      let pattern = /\w/g;
      let result = text.match(pattern);
      document.getElementById("result").innerHTML = result;
   </script>
</body>
</html>

Here, If word characters exist in the text, match() will return an array of word characters or it will return as null. Let's see another example with statements

Example

In the below example, we define a string without any word character and try to find a word character in the same string.

<!DOCTYPE html>
<html>
<body>
   <h1>Finding word character</h1>
   <p id="result"></p>
   <script>
      let text = "!@#$^%*{[]}";
      let pattern = /\w/g;
      let result = text.match(pattern);
      if(result == null){
         document.getElementById("result").innerHTML = "Sorry, no word characters exist";
      } else {
         document.getElementById("result").innerHTML = result;
      }
   </script>
</body>
</html>

Here, in the input text there are no word characters that exist. The match() method will return as null. So, if the statement is executed. If text contains word characters like as shown in the first example. Then, the else statement is executed.

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

Example

<!DOCTYPE html>
<html>
<body>
   <h1>Replace word character(s)</h1>
   <p>After replacing the word character(s) :
      <p id="result"></p>
   </p>
   <script>
      let text = "_Hi, Welcome back!20@";
      let pattern = /\w/g;
      let result = text.split(/\w/g).join(" ");
      document.getElementById("result").innerHTML = result;
   </script>
</body>
</html>

We will also replace the word character(s) in a simpler way. Like,

Example

<!DOCTYPE html>
<html>
<body>
   <h1>Replace word character(s)</h1>
   <p>After replacing the word character(s) :
      <p id="result"></p>
   </p>
   <script>
      let text = "_Hi, Welcome back!20@";
      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.

Hope this tutorial helped to find the word character in a string using RegExp in JavaScript.