DJ Quilter

Front-End Developer

Getting Started with Regular Expressions: Part One

If you’re reading this, I’m assuming you know what a regular expression is, but you probably don’t know how to write one. I think that’s a situation that a lot of developers are in, and certainly I was until recently.

Regular expressions are used in a number of languages, but I have used them predominantly in Javascript, so that will be the focus of the following article.

Types of Regular Expression

There are two common things that you might want to do with a regular expression: match or replace. So, you’ll try to match a bit of information against a set of rules, or replace a matched bit of information with something else. This is shown in the simple example below:

var toCompare = "I am coding!";

var regExMatch = toCompare.match(/coding/);
// Returns ["coding"]

var regExReplace = toCompare.replace(/coding/, 'doing Regular Expressions');
// Returns "I am doing Regular Expressions!"

So the above looks for the string ‘coding’ within another string. The ‘match’ regular expression will return all matching parts in an array. A replace will just return your new piece of data. Simple, right?!

The Basic Special Character

I’m guessing the regular expressions you’ve seen look a lot less readable though. They will have used special characters, which act as rules for finding very specific pieces of information. The following are the basic building blocks of those special characters. Code examples are included for clarity.

Match the first number
Match the first alphanumeric character (letter, number or underscore)
Match the first character that isn’t a number
Match the first non-alphanumeric character (not a letter, number or underscore)
var toCompare = "I can count 123!";

var regExNum = toCompare.match(/\d/);
// Returns ["1"]

var regExAlNum = toCompare.match(/\w/);
// Returns ["I"]

var regExNonNum = toCompare.match(/\D/);
// Returns ["I"]

var regExNonAlNum = toCompare.match(/\W/);
// Returns [" "] (the first space)

Maybe you don’t just want to match the first number though. Maybe you want to match all of the characters which match your rule? In that case, you need to add the global flag (although ‘greedy’ flag is probably the better way to remember it).

var toCompare = "I can count 123!";

var regExNum = toCompare.match(/\d/g);
// Returns ["1", "2", "3"]

I Want More!

So far, we’ve just pulled out single characters. What if we want more than that? Well then we need a quantifier.

Match more than one character
Match an exact number of characters
Match a number or more characters
{n, m}
Match an amount of character that sit between two boundaries

That not overly clear? Hopefully the following code will be:

var toCompare = "Luke Leia Han Chewie";

var regExLots = toCompare.match(/\w+/g);
// Returns ["Luke" "Leia" "Han" "Chewie"]

var regExExact = toCompare.match(/\w{4}/g);
// Returns ["Luke" "Leia" "Chew"]

var regExOrMore = toCompare.match(/\w{1,}/g);
// Returns ["Luke" "Leia" "Han" "Chewie"]

var regExBetween = toCompare.match(/\w{4,6}/g);
// Returns ["Luke" "Leia" "Chewie"]

Note that with the ‘exact’ match, if you have something within your string which is longer than your ‘exact’ length, it will pick up all of the characters up to that length.

To Be Continued…

There’s plenty more to learn with regular expressions, so I shall follow this post up in the future. In the meantime, I would suggest throwing any of the above code into something like JSBin or JSFiddle so you can have a play with it. Regular expressions have a habit of not doing exactly what you’re expecting, so it’s good to be able to experiment with the code to get a grasp of what is actually happening.

If you’re impatient to learn more, I found RegexOne immensely helpful in getting to grips with regular expressions. It is a step by step interactive guide through all of the basics, and I would highly recommend it.