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.