Introduction to Regular Expressions using JavaScript - Part 1

What is regular expressions?

Regular expressions - or regexs for short - is a technique used for matching strings. It can be used for evaluating whether a string starts with a capital A or whether an email address has the right format.

This you can also do with normal string functions but regexs offers greater flexibility. Regexs is a very powerfull tool for any programmer and it is well worth taking the time to learn it. Once learned you will wonder how you could ever live without it and will probably never go back to using string methods.

The first example shows how a very simple regex is declared

 1 // Defining a regular expression
 2 var rgx = /A/; 
// Defining a regular expression
var rgx = /A/; 

The first '/' denotes the begining of the regex and the trailing '/' marks the end. As any other JavaScript statement you should terminate with a ';'. This particular regex will match any string with the letter A no matter where in the string that A is placed. So it will match

 1 'Apple'
 2 'brAin'
 3 'bananA'
'Apple'
'brAin'
'bananA'

Regexs are case sensitive so the regex will not match the string 'any'.

With a slight modification we can make the regex a little stricter in what is to be matched.

 1 // Match any string which starts with a capital A
 2 var rgx = /^A/; 
// Match any string which starts with a capital A
var rgx = /^A/; 

If the first character of a regex is a '^' the regex will match any string which starts with a capital A.

 1 // Match any string which starts with a capital A
 2 var rgx = /^A/; 
 3 // Will match
 4 'Apple'
 5 // but will not match
 6 'brAin'
 7 'bananA'
// Match any string which starts with a capital A
var rgx = /^A/; 

// Will match
'Apple'

// but will not match
'brAin'
'bananA'

To match any string which ends with a capital A we add '$' before the ending '/' of the regex

 1 // Match any string ending with a capital A
 2 var rgx = /A$/; 
 3 // Will match
 4 'bananA'
 5 // but will not match
 6 'Apple'
 7 'brAin'
// Match any string ending with a capital A
var rgx = /A$/; 

// Will match
'bananA'

// but will not match
'Apple'
'brAin'

You can use both '^' and '$' in the same regex

 1 // Match any string starting and ending with a capital A
 2 var rgx = /^A$/; 
 3 // Will only match 
 4 'A'
 5 // and will not match
 6 'Apple'
 7 'brAin'
 8 'bananA'
// Match any string starting and ending with a capital A
var rgx = /^A$/; 

// Will only match 
'A'

// and will not match
'Apple'
'brAin'
'bananA'

and you are of course not limited to a single character. So this example

 1 // Match any string which contains 'br' anywhere in the string
 2 var rgx = /br/; 
 3 // Will match 
 4 'brAin'
 5 // but will not match
 6 'Apple'
 7 'bananA'
// Match any string which contains 'br' anywhere in the string
var rgx = /br/; 

// Will match 
'brAin'

// but will not match
'Apple'
'bananA'

matches the 'br' in 'brAin' but not 'bananA' as the 'b' is not followed by an 'r'.

How to use regular expressions

JavaScript has several methods for using regexs but for now we shall only use the most simple one. The test method of a RegExp object allows you to test whether the pattern speficied is present in a string.

 1 // Create a RegExp object which matches any string containing an 'n'
 2 var rgx = /n/; 
 3 // Test the string 'bananA'
 4 if (rgx.test('bananA'))
 5   alert('The string contains the letter n');
 6 else
 7   alert('No letter n in the string');
// Create a RegExp object which matches any string containing an 'n'
var rgx = /n/; 

// Test the string 'bananA'
if (rgx.test('bananA'))
  alert('The string contains the letter n');
else
  alert('No letter n in the string');

You can also write the regex directly without declaring it as a variable first

 1 // Test whether the string 'bananA' starts with a 'b'
 2 if (/^b/.test('bananA'))
 3   alert('The string starts with a b');
 4 else
 5   alert('The string does not start with a b');
// Test whether the string 'bananA' starts with a 'b'
if (/^b/.test('bananA'))
  alert('The string starts with a b');
else
  alert('The string does not start with a b');

This method should be sufficient for you to work with the examples provided in the rest of the tutorial. I strongly encourage you to execute all of the examples and modify them to experiment with how they work

Before we move on to the next part I will introduce an example which we will be working with for the rest of the tutorial.

Below is a basic form for entering data about a user

for which we will develop a set of regexs. Each part of the tutorial will end with applying our new knowledge to this example.

At this point we can not validate much. We have only learned to check for specific names and we haven't discussed numbers and max. length yet.

Leave a comment