RegEx in ReactJS

In this article, we are going to see how to handle the strings with RegEx handling in a React application.

A RegEx or Regular Expression is a sequence of characters that forms a search pattern and is used to check if a string contains a specified search pattern or not. It is also used to validate strings which consist of email, passwords etc.

Syntax

new RegExp(pattern[, flags])

Example

In this example, we will build an authentication React application that takes an email and password from the user and checks if they are validated or not.

We have Regex.js which contains all the regular expressions to validate the email and password for our application.

Regex.jsx

<span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> validEmail </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RegExp</span><span class="pun">(</span><span class="pln">
   </span><span class="str">'^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$'</span><span class="pln">
</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> validPassword </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RegExp</span><span class="pun">(</span><span class="str">'^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$'</span><span class="pun">);</span>

App.jsx

<span class="kwd">import</span><span class="pln"> </span><span class="typ">React</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> useState </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'react'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> validEmail</span><span class="pun">,</span><span class="pln"> validPassword </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./regex.js'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">const</span><span class="pln"> </span><span class="typ">App</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
   </span><span class="kwd">const</span><span class="pln"> </span><span class="pun">[</span><span class="pln">email</span><span class="pun">,</span><span class="pln"> setEmail</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> useState</span><span class="pun">(</span><span class="str">''</span><span class="pun">);</span><span class="pln">
   </span><span class="kwd">const</span><span class="pln"> </span><span class="pun">[</span><span class="pln">password</span><span class="pun">,</span><span class="pln"> setPassword</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> useState</span><span class="pun">(</span><span class="str">''</span><span class="pun">);</span><span class="pln">
   </span><span class="kwd">const</span><span class="pln"> </span><span class="pun">[</span><span class="pln">emailErr</span><span class="pun">,</span><span class="pln"> setEmailErr</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> useState</span><span class="pun">(</span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
   </span><span class="kwd">const</span><span class="pln"> </span><span class="pun">[</span><span class="pln">pwdError</span><span class="pun">,</span><span class="pln"> setPwdError</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> useState</span><span class="pun">(</span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
   </span><span class="kwd">const</span><span class="pln"> validate </span><span class="pun">=</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">validEmail</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">email</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
         setEmailErr</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
      </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">validPassword</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">password</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
         setPwdError</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
   </span><span class="pun">};</span><span class="pln">
   </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln">
      </span><span class="str"><div></span><span class="pln">
         </span><span class="pun"><</span><span class="pln">input
            type</span><span class="pun">=</span><span class="str">"email"</span><span class="pln">
            placeholder</span><span class="pun">=</span><span class="str">"Email"</span><span class="pln">
            </span><span class="kwd">value</span><span class="pun">={</span><span class="pln">email</span><span class="pun">}</span><span class="pln">
            onChange</span><span class="pun">={(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> setEmail</span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="kwd">value</span><span class="pun">)}</span><span class="pln">
         </span><span class="pun">/></span><span class="pln">
         </span><span class="pun"><</span><span class="pln">input
            type</span><span class="pun">=</span><span class="str">"password"</span><span class="pln">
            placeholder</span><span class="pun">=</span><span class="str">"Password"</span><span class="pln">
            </span><span class="kwd">value</span><span class="pun">={</span><span class="pln">password</span><span class="pun">}</span><span class="pln">
            onChange</span><span class="pun">={(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> setPassword</span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="kwd">value</span><span class="pun">)}</span><span class="pln">
         </span><span class="pun">/></span><span class="pln">
         </span><span class="str"><div></span><span class="pln">
            </span><span class="pun"><</span><span class="pln">button onClick</span><span class="pun">={</span><span class="pln">validate</span><span class="pun">}></span><span class="typ">Validate</span><span class="pln">
         </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
         </span><span class="pun">{</span><span class="pln">emailErr </span><span class="pun">&&</span><span class="pln"> </span><span class="str"><p></span><span class="typ">Your</span><span class="pln"> email </span><span class="kwd">is</span><span class="pln"> invalid</span><span class="pun"></</span><span class="pln">p</span><span class="pun">>}</span><span class="pln">
         </span><span class="pun">{</span><span class="pln">pwdError </span><span class="pun">&&</span><span class="pln"> </span><span class="str"><p></span><span class="typ">Your</span><span class="pln"> password </span><span class="kwd">is</span><span class="pln"> invalid</span><span class="pun"></</span><span class="pln">p</span><span class="pun">>}</span><span class="pln">
      </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
   </span><span class="pun">);</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">default</span><span class="pln"> </span><span class="typ">App</span><span class="pun">;</span>

In the above example, when the user clicks the Validate button, it checks for the validity of the email and password and displays the result accordingly.

Output

This will produce the following result.