Getting Started with

Regular Expressions

Remy Bach

Freelance Front-End Developer

@remybach / remy.bach.me.uk

Press spacebar to progress through the slides.

What is it?

Image source: XKCD

...provides a concise and flexible means to "match" (specify and recognize) strings of text, such as particular characters, words, or patterns of characters.

Can I really use this?

- Source: regular-expressions.info

What they
can do

Match a Password
(for example: between 6 and 10
lower case characters, numbers, ., and -)

/[a-z0-9.-]{6,10}/

What they
can do

Match an Email Address

/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/

First steps

Most Basic Regex

This is a regular old sentence.

To select the letter 'h' in the word 'This',
your regex would quite simply be:

/h/

Most Basic Regex

This is a regular old sentence.

The same can be done for words.
To select the word 'regular':

/regular/

Groups of characters

/[aeiou]/
/[!@£$%&]/

Ranges of characters

/[a-z]/
/[0-9]/
/[a-zA-Z0-9]/

Ranges Example

abcde12345fghij67890

To select the individual numbers (ie: '1'):

/[0-9]/

Matching more than just one

abcde12345fghij67890
/[a-z]+/
(abcde)12345fghij67890

Matching a given amount

abcde12345fghij67890
/[a-z]{3}/
(abc)de12345fghij67890

Flexing that Regex muscle

Special Characters

  • /+/
    - Matches the preceding pattern element one or more times.
  • /./
    - Normally matches any character except a newline. Within square brackets the dot is literal.
  • /*/
    - Matches the preceding pattern element zero or more times.

- Source: Wikipedia

Special Characters

  • /^/
    - Matches the beginning of a line or string.
  • /$/
    - Matches the end of a line or string.

- Source: Wikipedia

Special Characters

  • /?/
    - Matches the preceding pattern element zero or one times.
  • /?/
    - Modifies the *, +, or {M,N}'d regex that comes before to match as few times as possible.
  • /|/
    - Separates alternate possibilities.

- Source: Wikipedia

Shorthand Classes

  • /\s/
    - White space.
  • /\S/
    - NOT a white space.
  • /\d/
    - Digit (Number).
  • /\D/
    - NOT a digit.
  • /\w/
    - Word character.
  • /\W/
    - NOT a word character.

- Source: Regex Cheat Sheet

Picking parts for use

Known: Gmail address.
Desired: everything before the @ symbol,
and whether it's gmail or googlemail.com.

/(.*)@(gmail|googlemail)\.com/

Modifiers

  • g
    - global search (picks up ALL matches - not just the first).
  • i
    - case insensitive.
  • m
    - multiple lines.

Useful Resources

Questions?

http://bit.ly/getting-started-with-regex