
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
What are regular expressions in JavaScript?
In this tutorial, we will learn what regular expressions are in JavaScript.
A regular expression is an object that describes a pattern of characters. The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions.
Regular expressions, often known as RegExp, are patterns that can use to match character combinations in strings. It’s also used for data validation, searching, and complex queries. It follows the rules to create a pattern out of letters, numbers, and special characters. In addition, it comprises modifiers, brackets, metacharacters, quantifiers, and so on.
There are two ways to specify a regular expression, and those are: using the regular expressions literals and using the RegExp object constructor.
Syntax
// Regular Expression Literal const regex = /pattern/modifiers // RegExp Object Constructor const regex2 = new RegExp(pattern, modifiers)
In the above syntax, we have used regular expression literals and RegExp object constructor to create a regular expression. The ‘pattern’ is the regular expression pattern.
Modifiers
Modifiers specify performing case-insensitive, multiline, and global searches to match a pattern.
Modifier | Description |
---|---|
i | This specifies case-insensitive matching. |
g | This specifies global matching. |
m | This specifies multiline matching. |
Brackets
Brackets specify the range of the characters.
Expression | Description |
---|---|
[xyz] | It uses to find any characters between the brackets. |
[^xyz] | It uses to find any characters, not between the brackets. |
[0-9] | It uses to find any digits that are in between the brackets. |
[^0-9] | It uses to find any digits that are not in between the brackets. |
(x|y) | It uses to find any of the alternatives that are specified. |
Quantifiers
Quantifiers specify the frequency or position of the characters.
Expression | Description |
---|---|
a* | It matches any string containing zero or more instances of a. |
a+ | It matches any string containing at least one instance of a. |
a? | It matches any string containing zero or one instance of a. |
^a | It matches any string containing ‘a’ at the beginning of it. |
a$ | It matches any string containing ‘a’ at the end of it. |
?=a | It matches any string that is followed by a specific string ‘a’. |
?!a | It matches any string not followed by a specific string ‘a’. |
a{N} | It matches any string that contains a sequence of ‘N’ a’s.
Example: a{4} = ‘aaaa’ |
a{N, M} | It matches any string that contains a sequence of ‘N’ to ‘M’ a’s. |
a{N, } | It matches any string that contains a sequence of at least N a’s. |
Metacharacters
Characters with a special significance are known as metacharacters.
Expression | Description |
---|---|
. | It finds a single character, except the newline or line terminator. |
\w | It finds a word character. |
\W | It finds a non-word character. |
\d | It finds a digit. |
\D | It finds a non-digit character. |
\b | It finds a match at the beginning or end of a word. |
\B | It finds a match, but not at the beginning or end of a word. |
\s | It finds a whitespace character. |
\S | It finds a non-whitespace character. |
It finds a new line character. | |
\t | It finds a tab character. |
\0 | It finds a NULL character. |
\v | It finds a vertical tab character. |
\f | It finds a form feed character. |
Example 1
In the below example, we have used the regular expression to validate an email id pattern. First, the regular expression literals create the regular expression. Then, an input field takes user input for email id, and a button ‘Check’ execute a function with a click event. This function will validate the email id using the test() method and show the result on the webpage.
<html> <body> <h2>Validating email id with the <i>Regular Expression and test() method</i>in JavaScript</h2> <h4>Enter email id to validate:</h4> <input id="input-field" type="email" name="email" /> <button onclick="validate()">Check</button> <div id="root" style=" background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; padding: 10px; " > </div> <script> // 'Check' button click event handler function function validate() { // element const root = document.getElementById('root') //input field const input_field = document.getElementById('input-field').value // Regular Expression for Email const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ const result = regex.test(input_field) root.innerHTML = result ? input_field + ' is valid!' : input_field + ' is not valid!' } </script> </body> </html>
Example 2
In the below example, we have used the regular expression to validate a 10-digit phone number. First, the regular expression object constructor creates the regular expression. Then, an input field takes user input for phone numbers, and a button ‘Check’ execute a function with a click event. This function will validate the phone number using the test() method and show the result on the webpage.
<html> <body> <h2>Validating 10-digit phone number with the <i>Regular Expression and test() method</i> in JavaScript</h2> <h4>Enter the phone number to validate:</h4> <input id="input-field" name="phone" /> <button onclick="validate()">Check</button> <div id="root" style=" background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; padding: 10px; "> </div> <script> function validate() { const root = document.getElementById('root') const input_field = document.getElementById('input-field').value // Regular Expression for Phone number const regex = new RegExp('^[0-9]{10}$') const result = regex.test(input_field) root.innerHTML = result ? input_field + ' is valid!' : input_field + ' is not valid!' } </script> </body> </html>
In this tutorial, we discussed the regular expression in JavaScript. We have also seen different examples to use the regular expression to validate email and phone umber.
- Related Articles
- What are regular expressions in C#
- JavaScript Regular Expressions
- What are anchors in regular expressions in C#?
- Lookbehind Assertions JavaScript Regular Expressions
- What are the properties of Regular expressions in TOC?
- What are the regular expressions to finite automata?
- What is Regular Expressions?
- Unicode Property Escapes JavaScript Regular Expressions
- Named capture groups JavaScript Regular Expressions
- What are the Rules of Regular Expressions in Compiler Design?
- What is the role of special characters in JavaScript Regular Expressions?
- What are some basic examples of Python Regular Expressions?
- What are negated character classes that are used in Python regular expressions?
- Explain ‘dotAll’ flag for regular expressions in JavaScript
- What are function expressions in JavaScript?
