Introduction to Regular Expressions using JavaScript - Part 2

Working with character classes

If you have read part 1 you should be able to test strings for simple patterns like whether a string contain specific characters and where in the strings those characters should appear.

This part of the tutorial is concerned with what we call character classes.

A character class is a collection of characters and provides a short hand syntax for matching several characters.

 1 // Match any string which starts with the letters 'ab'
 2 var rgx = /^ab/; 
 3 // Will match 
 4 'abolishment'
 5 // but not
 6 'banana'
// Match any string which starts with the letters 'ab'
var rgx = /^ab/; 

// Will match 
'abolishment'

// but not
'banana'

The regex only matches strings starting with 'ab' and in that order.

To match a string which starts with either a or b we can create a character class. For this we use [ and ] (square brackets).

 1 // Match any string which starts with either 'a' or 'b'
 2 var rgx = /^[ab]/; 
 3 // Will match 
 4 'abolishment'
 5 'banana'
// Match any string which starts with either 'a' or 'b'
var rgx = /^[ab]/; 

// Will match 
'abolishment'
'banana'

Now any strings which starts with a letter inside the brackets is matched.

To find any strings which starts with a 'c' followed by either an 'a' or an 'o' we can write

 1 // Match any string which starts with c followed
 2 // by either 'a' or 'o'
 3 var rgx = /^c[ao]/; 
 4 // Will match 
 5 'cat'
 6 'corn'
 7 // but not
 8 'celtic'
// Match any string which starts with c followed
// by either 'a' or 'o'
var rgx = /^c[ao]/; 

// Will match 
'cat'
'corn'

// but not
'celtic'

Character classes can be negated - that is they can be reversed so the meaning becomes 'any character not inside the brackets'. To do this we place a caret (^) as the first character inside the class

 1 // Match any string which does not contain a 'g'
 2 var rgx = /[^g]/; 
 3 // Will match 
 4 'cat'
 5 'corn'
 6 // but not
 7 'goat'
 8 'ugly'
// Match any string which does not contain a 'g'
var rgx = /[^g]/; 

// Will match 
'cat'
'corn'

// but not
'goat'
'ugly'

If we want to match strings not starting with an 'f' we can do

 1 // Match any string which does not start with an 'f'
 2 var rgx = /^[^f]/; 
 3 // Will match 
 4 'afraid'
 5 'after'
 6 // but not
 7 'family'
 8 'fond'
// Match any string which does not start with an 'f'
var rgx = /^[^f]/; 

// Will match 
'afraid'
'after'

// but not
'family'
'fond'

If we want to match a sequence of letters we can use a hyphen (-). This is practical as writing classes like [abcdefghifklmn] quicly becomes tedious.

The same class can be written as [a-n] meaning any character between 'a' and 'n' both inclusive.

 1 // Match any string which contains a character in the range
 2 // a to n
 3 var rgx = /[a-n]/; 
 4 // Will match 
 5 'anchor'
 6 'senses'
 7 // but not
 8 'sour'
 9 'yo'
// Match any string which contains a character in the range
// a to n
var rgx = /[a-n]/; 

// Will match 
'anchor'
'senses'

// but not
'sour'
'yo'

You can mix ranges as in

 1 // Match any string which contains a character in the range
 2 // f to i or n to t
 3 var rgx = /[f-in-t]/; 
 4 // Will match 
 5 'nobody'
 6 'cent'
 7 // but not
 8 'apple'
// Match any string which contains a character in the range
// f to i or n to t
var rgx = /[f-in-t]/; 

// Will match 
'nobody'
'cent'

// but not
'apple'

Ranges are not limited to letters. You can have any Unicode character in a class and mix lower and uppercase. To allow the letters 'a', 'f', 'S' to 'Z' and all digits

 1 // Match any string which contains an 'a' or an 'f' of an
 2 // uppercase character in the range 'S' to 'Z' or any digit
 3 var rgx = /[afS-Z0-9]/; 
 4 // Will match 
 5 'first'
 6 'Sentry'
 7 '2nd'
 8 // but not
 9 'zen' (only uppercase Z i matched)
10 'generic'
// Match any string which contains an 'a' or an 'f' of an
// uppercase character in the range 'S' to 'Z' or any digit
var rgx = /[afS-Z0-9]/; 

// Will match 
'first'
'Sentry'
'2nd'

// but not
'zen' (only uppercase Z i matched)
'generic'

You can not mix classes and negated classes. A class is either negated or not and you can not nest classes.

Predefined character classes

JavaScript comes with a collection of predefined classes. These classes are denoted by a backslash (\) followed by a letter identifying the class.

The predefined classes covers the most used ranges and are

You can use these classes to match a string which starts with an 'a' followed by a space followed by any character which is not a digit

 1 // Match any string which starts with an 'a', is followed
 2 // by a space an not folloed by a digit
 3 var rgx = /^a\s\D/; 
 4 // Will match 
 5 'a song'
 6 // but not
 7 'apple'
 8 'a 45'
// Match any string which starts with an 'a', is followed
// by a space an not folloed by a digit
var rgx = /^a\s\D/; 

// Will match 
'a song'

// but not
'apple'
'a 45'

The predefined classes can also be used in your own classes as in

 1 // Match any string which ends in with a blank character or a digit
 2 var rgx = /[\s\d]$/; 
 3 // Will match 
 4 'a song '
 5 'Mainstreet 56'
 6 // but not
 7 'apple'
 8 'a sentence'
// Match any string which ends in with a blank character or a digit
var rgx = /[\s\d]$/; 

// Will match 
'a song '
'Mainstreet 56'

// but not
'apple'
'a sentence'

Finally an example of how to match any character

 1 // Match any string which starts with 'H' followed by any character
 2 // followed by an 'l'
 3 var rgx = /^H.l/; 
 4 // Will match 
 5 'Helium'
 6 'Halo'
 7 'Holistic'
 8 // but not
 9 'Haven'
10 'Hive'
// Match any string which starts with 'H' followed by any character
// followed by an 'l'
var rgx = /^H.l/; 

// Will match 
'Helium'
'Halo'
'Holistic'

// but not
'Haven'
'Hive'

User form example

So lets see just how much we can validate with what we have learned

I have filled in the form with the regexs we can make for now.

The above is not enough to validate what we want. None of the regexs can accept the required number of characters. We don't know how to make a prefix for a phone number optional and we certainly don't know how to validate the complex email format.

The regexs in the form translate to

Next up we will learn how to count characters and look at matching repeating characters

Leave a comment