What is a Regular Expression(RegEx)?
Regular expressions/sequence of characters are patterns used to match character combinations in strings.
A regEx can be a single character or a complicated pattern. Regular expressions can be used to perform text search and validation operations.
Special characters in regular expressions
Character | Meaning |
---|---|
^ | It Matches the beginning of an input e.g., /^A/ does not match the ‘A’ in “an A”, but matches the ‘A’ in “An E” |
$ | Matches the end of an input. If the multi line flag is set to true, it also matches immediately before a line break character e.g., /t$/ does not match the ‘t’ in “eater”, but matches it in “eat” |
* | Matches the preceding expression 0 or more times. Equivalent to {0,} e.g., /bo*/ matches ‘boooo’ in “A ghost booed” and ‘b’ in “A bird” but nothing in “A goat” |
+ | Matches the preceding expression 1 or more times. Equivalent to {1,} e.g., /a+/ matches the ‘a’ in “candy” and all the a’s in “caaaandy”, but nothing in “cndy” |
? | Matches the preceding expression 0 or 1 time e,g., /e?le?/ matches the ‘er’ in “anger”, ‘le’ in “angle” and the ‘l’ in “also” |
. | The decimal point matches any single character except the newline character e.g., /.n/ matches ‘an’ and ‘on’ in “nay, an apple is on the tree”, but not ‘nay’. |
x(?=y) | Matches ‘x’ only if it is followed by ‘y’ e.g., /Jack(?=Spat)/ matches ‘Jack’ only whn it is followed by ‘Spat’. /Jack(?=Spat|Fost)/ matches ‘Jack’ only if it is followed by ‘Spat’ or ‘Fost’; However, neither ‘Spat’ nor ‘Fost’ is part of the match results. |
x(?!y) | Matches ‘x’ only if it is not followed by ‘y’ e.g., /\d+(?!\.)/ matches a number only when it is not followed by a decimal point e.g., the regular expression /\d+(?!\.)/.exec(“3.141”) matches ‘141’ but not ‘3.141’ |
x|y | Matches ‘x’ or ‘y'(when there’s no match for ‘x’) |
{n} | Matches exactly n occurrences of the preceding expression where N must be a positive integer. For example, /a{2}/ doesn’t match the ‘a’ in “candy,” but matches all the a’s in “caandy,” and the first two a’s in “caandy” |
{n,} | Matches at least n occurrences of the preceding expression e.g., /a{2,}/ matches “aa”, “aaa” and “aaaa” but not “a” |
[xyz] | This pattern matches any one of the characters in the brackets |
[^xyz] | It matches anything that is not enclosed within the brackets. Everything that works in the normal character set also works e.g., [^abc] is the same as [^a-c]. This initially match ‘r’ in “brisket” and ‘h’ in “chop” |
[\b] | Matches a backspace |
/d | Matches a digit character i.e., equivalent to [0-9] e.g., /\d/ matches ‘3’ in “B3 is the number” |
/D | Matches a non-digit character i.e., equivalent to [^0-9] e.g., /\D/ matches ‘B’ in “B2 is the number” |
\s | Matches a white space character including space, tab, form feed, line feed etc e.g., /\s\w*/ matches ‘ bar’ in “tool bar” |
\S | Matches a character other than white space e.g., /\S*/ matches ‘foo’ in “foo bar” |
\t | Matches a tab |
\w | Matches any alphanumeric character including underscore e.g., /\w/ matches ‘a’ in “ant,” ‘5’ in “$528,” and ‘2’ in “2D” |
\W | Matches any non-word character e.g., /\W/ or /[^A-Za-z0-9_]/ matches ‘%’ in “70%” |
\n | Where n is a positive integer, a back reference to the last substring matching the n characters in the regular expression |
\xhh | Matches two hexadecimal digits |
\uhhh | Matches four hexadecimal digits |
Methods that uses regular expressions
Method | Description |
---|---|
exec() | It is a RegExp method that executes a search for a match in a string. It returns an array of information or null for a mismatch |
test() | A RegExp method that tests for a match in a string. It returns true or false |
match() | A String method that executes a search for a match in a string. It returns an array of information or null on a mismatch |
search() | A String method that tests for a match in a string. It returns the index of the match or -1 if the search fails |
replace() | A String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring |
split() | A String method that uses a regular expression or a fixed string to break a string into an array of substrings. |
Example
First see to match the part of a string using match()
1 2 3 4 | var string="this is a ball. this is a small ball. this is a red color ball. this is a plastic ball"; var RegEx=/ball/g; var result=string.match(RegEx); document.writeln(result); |
Output
ball,ball,ball,ball
To validate name that should contain only letters with minimum 3 character and maximum 15 characters.
The regular expression will be
/^[a-zA-Z]+$/
it will check one or more occurrence of a-z or A-Z
to limit no of characters we include character range there.
check for range between 3 to 15
/^[a-zA-Z]{3,15}$/
1 2 3 4 5 6 7 8 9 10 | function validate(){ var regex = /^[a-zA-Z]{3,15}$/; var ctrl = document.getElementById("fname"); if (regex.test(ctrl.value)) { alert("Enter characer between 3 to 15"); } else { alert("wrong input"); } } |
to validate full name that my contain spaces above regular expression can be modified as
/^[a-zA-Z ]{3,15}$/
Program to check url and mail validity using regular expression
/^[0-9]+$/
validate number between zero to nine with minimum one digit
/^[0-9]{5,10}$/
accept digits between zero to 9 with range or 5 to 10 digits
one space is added after character range.
To accept characters and all digits we can use following
/^[a-zA-Z0-9]+$/
/^[a-zA-Z0-9]{5,10}$/
above regular expression will access alphanumeric in range of 5 to 10
to validate mail id
/^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <input type="text" id="email"/> <button onclick="validateEmail()">Validate Email</button> <script> function validateEmail() { var emailId=document.getElementById("email").value; var regex =/^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/; if (regex.test(emailId)) { alert("valid mail"); } else { alert("invalid mail"); } } </script> </body> </html> |
to validate url we can use
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <input type="text" id="url"/> <button onclick="validateURL()">Validate Url</button> <script> function validateURL() { var url=document.getElementById("url").value; var regex =/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/; if (regex.test(url)) { alert("valid url"); } else { alert("invalid url"); } } </script> </body> </html> |
/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&’\(\)\*\+,;=.]+$/