JavaScript regular expressions (regex) are patterns used to match, search, and manipulate text within strings. They are a powerful tool for tasks like data validation and text extraction.
Regular expressions can be created in two ways in JavaScript:
Literal Notation: Enclosing the pattern in forward slashes. This method is best for constant patterns.
const re = /ab+c/;
RegExp Constructor: Using the new RegExp() constructor function with the pattern as a string argument. This is used when the pattern is dynamic or comes from user input.
const re = new RegExp("ab+c");
Flags are optional modifiers added after the literal slashes or as a second argument to the constructor.
| Flag | Description |
| g | Global search (find all matches, not just the first). |
| i | Case-insensitive search. |
| m | Multiline mode (^ and $ match the start/end of a line, not just the whole string). |
| u | Enables Unicode support. |
Metacharacters have special meanings beyond their literal representation.
| Character | Description |
| . | Matches any character except newline. |
| \\d | Matches any digit (0-9). |
| \\w | Matches any word character (alphanumeric and underscore). |
| \\s | Matches any whitespace character. |
| \\D | Matches any non-digit character. |
| \\W | Matches any non-word character. |
| \\S | Matches any non-whitespace character. |
| \\b | Matches a word boundary. |
| ^ | Matches the beginning of the string/line. |
| $ | Matches the end of the string/line. |
Quantifiers specify how many occurrences of a character or group to match.
| Quantifier | Description |
| *Zero or more occurrences. | |
| + | One or more occurrences. |
| ? | Zero or one occurrence (optional). |
| {n} | Exactly n occurrences. |
| {n,m} | Between n and m occurrences. |
| {n,} | At least n occurrences. |
JavaScript provides several methods on both the RegExp object and the String object to work with regular expressions:
| Syntax | Description |
| RegExp.prototype.test() | Tests for a match in a string and returns true or false. |
| RegExp.prototype.exec() | Executes a search for a match and returns an array of information or null on a mismatch. |
| String.prototype.match() | Returns an array containing all matches, or null if none are found. |
| String.prototype.search() | Tests for a match and returns the index of the match, or -1 if not found. |
| String.prototype.replace() | Executes a search and replaces the matched substring with a replacement string. |
/^[\w-.]{3,}+@\w{3,}+.\w{2,3}$/gi
<input type="text" id="regexemail">
<p id="emailregexError"></p>
<script>
const emailField = document.getElementById('regexemail');
emailField.onblur = () => {
var emailvalue = emailField.value;
if(emailvalue.length == 0){
document.getElementById('emailregexError').innerHTML = "Email is required";
}else{
var pattern = /^[\w-.]{3,}@\w{3,}.\w{2,3}$/gi;
if(!pattern.test(emailvalue)){
document.getElementById('emailregexError').innerHTML = "Invalid Email";
}else{
document.getElementById('emailregexError').innerHTML = "";
}
}
}
</script>
^[\w-.]{3,} Matches at least 3 alphanumeric character along with "-" and "." at the beginning of the string. (Case insensitive)
+@ First string must be followed by @
\w{3,} Matches at least 3 alphanumeric character after @.
+. Second string must be followed by .
\w{2,3} Matches 2-3 alphanumeric character after . at the end of the string.
/^[+]?[\d]{6,11}$/
<input type="text" id="phoneregex">
<p id="phoneregexError"></p>
<script>
const phoneField = document.getElementById('phoneregex');
phoneField.onblur = () => {
var phonevalue = phoneField.value;
if(phonevalue.length == 0){
document.getElementById('phoneregexError').innerHTML = "Phone is required";
}else{
var pattern = /^[+]?[\d]{6,11}$/;
if(!pattern.test(phonevalue)){
document.getElementById('phoneregexError').innerHTML = "Invalid Phone Number";
}else{
document.getElementById('phoneregexError').innerHTML = "";
}
}
}
</script>
^[+]? Allows + as an option at the beginning of the string
[\d]{6,11} Allows 6-11 numeric characters at the end of the string
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W]).{8,}$/
<input type="text" id="passwordregex">
<p id="passwordregexError"></p>
<script>
const passwordField = document.getElementById('passwordregex');
passwordField.onblur = () => {
var passwordvalue = passwordField.value;
if(passwordvalue.length == 0){
document.getElementById('passwordregexError').innerHTML = "Password is required";
}else{
var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W]).{8,}$/;
if(!passwordvalue.match(pattern)){
document.getElementById('passwordregexError').innerHTML = "Password must be at least 8 characters long and must contain at least one number, one uppercase, one lowercase and a special character";
}else{
document.getElementById('passwordregexError').innerHTML = "";
}
}
}
</script>
(?=.*\d) Matches any digit except line breaks.
(?=.*[a-z]) Matches any small letters except line breaks.
(?=.*[A-Z]) Matches any capital letters except line breaks.
(?=.*[\W]) Matches any special characters line breaks.
. Matches any digit except line breaks.
{8,} Minimum character count must be 8.
Leave a comment