Regular Expressions in a Nutshell

So, you want to validate an email that a user entered into a form to make sure that it is correctly formatted.  No problem, just use a Regular Expression to do this, like the following:

/^(?("")("".+?""@)|(([0-9a-zA-Z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-zA-Z])@))(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,6}))$/
What in the Sam Hill…???

If this was your response (like mine was when first discovering Regular Expressions), then this article is an attempt to demystify and decrypt this mess and explain it in a nutshell, and serve as an introduction to the topic.

Regular Expressions In a Nutshell:

  • In a Quora article about what the most useful and underrated skill in Computer Programming is, Jaime Potter responded that it’s knowing how to use Regular Expressions well.  He posted a picture diagram breaking down the components of a Regular Expression, which I think will best represent them in a nutshell (all credit goes to him as the source of this image diagram):

  • Typically, you would take a Regular Expression (like the one above) and use a matching method (like the preg_match() function in PHP) to see if a specified string matches the search patterns defined in the Regular Expression.  Common use cases  would be validating user submitted form data (for example, an email or address).

Definitions:

  • Regular Expression:  (paraphrased from Wikipedia) A sequence of characters that define a search pattern typically used to find, find and replace, or validate part or all of a string.   (Also referred to as regex or regexp).
  • Delimiter: A character or symbol that identifies a set of data or string of text as complete and separate.  Used to indicate or designate a group of characters or strings in code that are related to each other or an associated task, and to designate a complete statement or group of statements.  In Regular Expressions, the delimiter is the ‘/‘ at the beginning and end which contain it.  Another example would be the ‘;‘ at the end of a statement (i.e. let x = 5;).

REGULAR EXPRESSIONS CHEAT SHEET:

To get started, see this quick reference sheet that I discovered in the User Contributed Notes section of the preg_match() documentation on PHP.net.  This very helpful comment was made by a user named ‘force at md-t dot organd lists out a cheat-sheet for Regular Expression match patterns:

[abc]     A single character: a, b or c
[^abc]     Any single character but a, b, or c
[a-z]     Any single character in the range a-z
[a-zA-Z]     Any single character in the range a-z or A-Z
    Start of line
    End of line
\A     Start of string
\z     End of string
.     Any single character
\s     Any whitespace character
\S     Any non-whitespace character
\d     Any digit
\D     Any non-digit
\w     Any word character (letter, number, underscore)
\W     Any non-word character
\b     Any word boundary character
(...)     Capture everything enclosed
(a|b)     a or b
a?     Zero or one of a
a*     Zero or more of a
a+     One or more of a
a{3}     Exactly 3 of a
a{3,}     3 or more of a
a{3,6}     Between 3 and 6 of a

options: i case insensitive m make dot match newlines x ignore whitespace in regex o perform #{...} substitutions only once

Typical Use Example of Regular Expressions:

  • Validating user submitted form data, such as usernames, emails and addresses, etc. 

For example, to make sure that an email entered is in the correct format (i.e. ‘[email protected]’),  you can use a Regular Expression to define a search pattern that matches the valid email format, and then check to see if the user submitted email matches the pattern (in PHP, you can do this using the preg_match() method which will return 1 if the string matches the pattern defined in the regex).

Example:

$email = $_POST['user_submitted_email'];

$regexp = '/^[^0-9][_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/';

if (preg_match($regexp, $email)) {
    // process user submitted email;
} else { 
    // Error: email is not in a valid format;
}

Further Reading:

See this one page tutorial on Regular Expressions.  This is from a great site that could be considered a one stop shop for all things Regular Expression related at https://www.regular-expressions.info.  The site breaks down how to use Regular Expressions in a thorough and comprehensive, but digestible manner.

BONUS TIP:

Off The Beaten Path: Elm

While attending a meetup in the Boulder, Colorado area (Fullstack Boulder Group on Meetup.com, I had a very interesting discussion with one of the attendees who worked at a local startup.  He introduced me to a programming language called Elm, which is relatively new from what I understand and popular among a small group of developers currently, but that could change in the future.

The most interesting feature he showed me (I’m sure there are many others) was the maybe keyword (see docs here).  This allows the programmer to indicate that an assigned value to a variable could be an expected data type or Nothing (in other words undefined).   This enables flexibility in the code without having to add conditionals to  check if a value or property is not defined.  It enables cleaner, shorter code which is always desirable.

Both of us wondered why a feature like this isn’t implemented in Javascript already, and also speculated that, perhaps in future versions, we might be able to enjoy implementing this flexible option for assigning variable and property values.

I really enjoyed my conversation about Elm and discovering a new and (for now) obscure and not widely used programming language.  If you are in the Denver/Boulder area, there is a meetup you can go to if you want to learn more about the language and hangout with a small, but passionate group of programmers who like the new language.  I love getting off the beaten path and exploring what else is out there, and this is a perfect example of some of the interesting things you can discover when you are open to new ideas and options.

In addition to opening my eyes to Elm, my new friend also turned me on to Reason, which is a new tool created by Facebook that allows programming in OCaml with a Javascript like syntax.  I don’t know much about it yet, but he was very enthusiastic about it and based on what he was able to show me about Elm, I suspect that if he is excited about Reason, then there is a good reason for it.  The fact that it is released by Facebook is noteworthy and it is something that I am going to be putting on my radar.

I love talking to interesting people who I can learn from and open my mind to new ideas.  I plan on continuing my exploration of Elm and look forward to learning more from and other users of the language.  I also look forward to continuing my exploration of the unknown (granted, mostly to me), and to boldly (or, at least eagerly with genuine curiosity) go where, perhaps, not a majority of other people have gone before.

 

PIC BROWSER APP IS ONLINE

I’ve just finished creating a demo version of my Pic Browser App!

Click Here to Try It Out.

Click Here For the GitHub Link with Code samples.

Feature List:

  • User Can Upload Photos into a Collection and Easily Search for a Photo by Caption Description or Filename
  • Instant Search Results via Ajax When Search Terms Entered
  • Gallery Display of Uploaded Photos
  • Edit Photo Collection: Update Captions or Delete Photos
  • Account Registration
  • User Login and Logout
  • Forgot Password Email and Reset Password

Background and Overview of App Functionality:

I got the idea for the app when a friend of mine was trying to show me a photo on Facebook and couldn’t find it in his collections and albums.  There didn’t seem to be an obvious way to search for the specific photo on Facebook, so he gave up and was never able find it and show me.  Since my goal is to create applications that are helpful and useful to people, that prompted me to begin working on an app where users could easily upload a library of photos and find any photo in their collection to show someone or look up for themselves.

The way the app works is users can log in or create an account, and then upload their photos which are displayed by default on a gallery page.

 

During uploading, the user can enter a caption description for the photo which is then stored in the database.  When the user wants to  find a specific pic, they simply type in any descriptive keywords that might match the description they entered for it and if a match is found, the matching pics are instantly displayed on the gallery page via Ajax.

Features to be added in future versions:

  • Photo Albums
  • User Profiles

The demo version lasts 30 minutes and users have access to all features currently implemented.  I hope you enjoy using the app and please feel free to let me know if this is something that you would use regularly and find useful – any feedback is welcome!