Regexp Javascript jQuery You Should Know
In Web Development, there have forms we need to secure and validate using Regexp Javascript or Regular Expression, in some cases are registration form, transaction forms such as valid email, valid postal code, matching strong password and securities.
In this article, I compiled the useful of JavaScript Regular Expression, this is the most common Regexp Javascript we use in web development such validating forms.
These Regular Expression will not match in common cases, it even fewer special cases you might be need, because any Regular Expression can be written broadly and narrowly, meaning, broadly is a match a lot of pattern and narrowly is very restricted in matching.
Example Usage for jQuery
jQuery(function($) {
$("form#register_form input[name='submit']").click(function() {
var email = $("form#register_form input[name='email']").val();
var email_regex = /^[\w%_\-.\d]+@[\w.\-]+.[A-Za-z]{2,6}$/; // reg ex email check
if(!email_regex.test(email)){ // if invalid email
alert("Invalid Email!");
} else {
// your code
}
});
});
1. Matching names
Regex:
/^([A-Z][A-Za-z.'\- ]+) (?:([A-Z][A-Za-z.'\-]+) )?([A-Z][A-Za-z.'\-]+)$/
String that matches:
John Doe John de Doe John Doe Doe John Doe D. Doe J.r III
Pattern can match any valid names with first character capitalize.
2. Matching postal codes
Regex:
/^\d{4,5}(?:-\d{4,5})?$/
String that matches:
75087 10010-6543
Pattern can match postal codes broadly, they match mostly US postal code.
3. Matching email addresses
Regex:
/^[\w%_\-.\d]+@[\w.\-]+.[A-Za-z]{2,6}$/
String that matches:
[email protected] [email protected] [email protected] [email protected]
Pattern can match any valid email format, however this is most common use for validating email in registration form.
4. Matching urls
Regex:
/^(http|https):\/\/[\w.\-]+(\.[\w\-]+)+[/#?\w\-.,@?^=&%:;/~\\+#]+$/
String that matches:
http://www.axlmulat.com http://axlmulat.com http://blog.axlmulat.com https://www.axlmulat.com http://www.axlmulat.com/product_page.html http://www.axlmulat.com/images/image.gif http://www.axlmulat.com/product/ http://www.axlmulat.com/product/3456 http://www.axlmulat.com/product_page.php?product=28 http://www.axlmulat.com?product=28&color=blue http://www.axlmulat.com#details http://255.255.255.255
In the form, might have a extra field to input the user for URL, this regex validate the valid url.
5. Matching decimal numbers
Regex:
/^(\d*\.\d+|\d+)$/
String that matches:
5.4 314.35634 0.123 .345 25
Pattern match a valid decimal numbers.
5. Matching currencies
Regex:
/^(\$|£|¥)(\d*\.\d+|\d+)$/
String that matches:
$50 $43.23 $0.39 $.60 £498.10 ¥12
Pattern can match the right currencies, in reg ex you can add more currencies to match.
6. Matching ip addresses
Regex:
/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
String that matches:
255.255.255.255 0.0.0.0 67.52.159.38 067.052.159.038
Pattern can match the right ip address, obviously the ip address ‘999.999.999.999’ will not match.
7. Matching dates
Regex:
/^\d{1,4}[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[12][0-9]|3[01])$/
String that matches:
2000-11-15 2000-6-9 2000-06-09 2000/6/9
Pattern can matches the date format, year, month and day.
8. Matching time in 12hrs
Regex:
/^(0?[1-9]|1[0-2]):[0-5][0-9]([aApP][mM])?/
String that matches:
02:34 2:34pm 2:34PM 02:34 12:34 12:59 1:00PM
Pattern can match 12 hrs time. it match up to 12:59 am and pm.
9. Matching time in 24hrs with Time zone
Regex:
/^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?( ([A-Z]{3}|GMT [-+]([0-9]|1[0-2])))?$/
String that matches:
0:02 2:34 02:34 12:34 12:34:56 12:34 EST 12:34 GMT -5 12:34 GMT +12 23:45
Pattern can match 24 hrs time. it match up to 23:59 including timezone.
10. Matching HTML tags
Regex:
/^<(?:([A-Za-z][A-Za-z0-9]*)\b[^>]*>(?:.*?)|[A-Za-z][A-Za-z0-9]*\b[^/>]*/>)$/
String that matches:
<strong>Bold</strong> <em>Emphazied</em> <b>Bold</b> <i>Italics</i> <span id="foo">this is the text</span>
Pattern can match HTML tags.
11. Validating strong passwords
Regex:
/^(?=.*\d)(?=.*[~!@#$%^&*()_\-+=|\\{}[\]:;<>?/])(?=.*[A-Za-z])(?=.*[a-z])\S{8,15}$/
String that matches:
mypassword69[] mypass';i#%^9[]
This pattern help to make sure user give a secure password that’s harder for hacker to crack it.
Pattern for password requires.
- Password Any character, except space.
- Password at least 8 characters long
- And not more than 15 characters.
- Password must have a number.
- Password must have a special character.
12. Matching credit card numbers
Regex:
/^(?:3[47]\d{2}([\- ]?)\d{6}\1\d{5}|(?:4\d{3}|5[1-5]\d{2}|6011)([\- ]?)\d{4}\2\d{4}\2\d{4})$/
String that matches:
American Express 370012345612345 3700 123456 12345 3700-123456-12345 Visa 4000123412341234 4000 1234 1234 1234 4000-1234-1234-1234 Mastercard 5100123412341234 5100 1234 1234 1234 5100-1234-1234-1234 Discover 6011123412341234 6011 1234 1234 1234 6011-1234-1234-1234
Pattern can match 4 major of credit card numbers, American Express, Visa, MasterCard, Discover.
Final Word
We explore different kinds and useful JavaScript regular expression, some of these are useful and some are rarely to use, personally I’ll use some of these for my project and it works great in my cases. I hope this you’ll be using these regex’s in your future projects.
