DJ Quilter

Front-End Developer

Getting Started with Regular Expressions: Part Two

Having covered the basics of regular expressions in my previous post, it’s time to deal with some of the more complicated things that you might want to do when using them. If you haven’t read the first part of this series yet, I would suggest you do, as this article makes reference to it.

When You Just Don’t Care

The wildcard is useful if you don’t care what you’re searching for. Place a full stop in the position that you want, and it will match a letter, number, space, or punctuation mark, as you’ll see in the following example:

var toCompare = "RegEx";

var regExWild = toCompare.match(/.egEx/);
// Returns ["RegEx"]

The optionality character is also useful; it allows you to specify a character as being… you guessed it… optional! Place a question mark within your matching criteria, and it will reference the character that precedes it.

var toCompare = "Option";

var regExOne = toCompare.match(/Options?/);
// Returns ["Option"]

var alsoToCompare = "Options";

var regExTwo = alsoToCompare.match(/Options?/);
// Returns ["Options"]

Both of the above comparisons return a positive result, because the optionality character tells it not to worry whether or not the ‘s’ is included at the end.

Another way to do this would be to use the alternation character, which looks like ‘|’. The following example shows you how it should be used:

var toCompare = "Rick, Carl, Glen";

var regExAlt = toCompare.match(/Rick|Carl/g);
// Returns ["Rick", "Carl"]

Here we’re looking for either of the two Grimes boys, both of which have been returned because we used the global flag that I mentioned in the previous article.

But what happens if you’re specifically looking for a full stop, a question mark or even that vertical line? In that case, you need to do something called an escape, which is not at all complicated. Just add a ‘\’ before the character, and the regular expression will know that you’re looking for the punctuation mark/character.

var toCompare = "This is a sentence. Is this a question?";

var regExStop = toCompare.match(/\./);
// Returns ["."]

var regExQuestion = toCompare.match(/\?/);
// Returns ["?"]

Spaces and Cases

Another useful character to know about is ‘\s’, which is what we use when searching for a space. Note the ‘\’ which is used to escape the ‘s’ (in the same way as the question mark and full stop which I’ve mentioned). Without this, we’d just be asking to match any letter ‘s’.

var toCompare = "This is a sentence.";

var regExStop = toCompare.match(/\s/g);
// Returns [" ", " "," "]

If you’ve been following me up to this point, that shouldn’t tax your brain too much. In the above example, I have just used spaces, but the same character can be used to search for any form of whitespace, including tabs, new lines and carriage returns.

You’ll notice that I’ve used the global flag again (to return multiple matches), but this is not the only flag which is out there for you to make use of. The case-insensitive flag is set in the same way as the global flag, but it is represented by an ‘i’. When used, the case-insensitive flag says to ignore the difference between upper and lower case letters.

var toCompareSensitive = "Bish Bash Bosh";

var regExStop = toCompareSensitive.match(/bash/);
// Returns null

var toCompareInsensitive = "Bish Bash Bosh";

var regExStop = toCompareInsensitive.match(/bash/i);
// Returns ["Bash"]

In the first comparison, without the flag set, no matches are returned because all the words in our string are capitalised. In the second, because we’re using the flag, a match is returned.

And that’s just about that for this article! Again, if you want to explore the above in more detail, I would highly recommend using something like JSBin or JSFiddle to delve deeper.