DJ Quilter

Front-End Developer

Getting Started with Regular Expressions: Part Three

In the final part of this series, I’ll be looking at ways of getting much more specific in your Regular Expressions. If you haven’t read the previous parts, you’d do well to go back and have a look at them.

Beginnings and Endings

Sometimes you’ll find yourself looking for something that occurs specifically at the beginning or end of a string, in which case you’ll need to use the following two special characters:

^
Matches a pattern only if it is at the beginning of the string
$
Matches a pattern only if it is at the end of the string

The following example should show you how to use the two. They use the wildcard character described in the previous article, so if you haven’t read that, I would go back and have a look.

var toCompare = "Mario Wario Dario";

var regExStartOne = toCompare.match(/^.ario/);
console.log(regExStartOne);
// Returns ["Mario"]

var regExStartTwo = toCompare.match(/^Wario/);
console.log(regExStartTwo);
// Returns null

var regExEndOne = toCompare.match(/.ario$/);
console.log(regExEndOne);
// Returns ["Dario"]

var regExEndTwo = toCompare.match(/Wario$/);
console.log(regExEndTwo);
// Returns null

The first example is looking for one of our characters, but importantly the one that’s at the beginning. Hence, it returns Mario. The second is looking for instances of Wario, but ones that occur at the beginning. Because none exist, we’re given a null. The third and fourth examples are similar, but this time we’re looking for instances at the end of our string.

Some Square Brackets

As tools go, the wild card is quite useful, but it’s a bit of a sledgehammer, where you might want something a bit more refined. For example, taking our friends from earlier, maybe we’re only looking for the ones that were given to us by Nintendo. Some square brackets can help us with that:

var toCompare = "Mario Wario Dario";

var regExNintendo = toCompare.match(/[MW]ario/g);
console.log(regExNintendo);
// Returns ["Mario", "Wario"]

The square brackets are saying that we only want to find matches with these letters in this position. Note the use of the global flag (described earlier in the series) to grab more than one result.

The above can also be accomplished using a letter range:

var toCompare = "Mario Wario Dario";

var regExNintendo = toCompare.match(/[M-W]ario/g);
console.log(regExNintendo);
// Returns ["Mario", "Wario"]

So here we’re saying that we’re looking for matches where the first letter is between ‘M’ and ‘W’. Uppercase and lowercase letters are considered separate, so searching for letters within a range in uppercase will not return matches for lowercase letters. You can also search for number ranges, if that’s your bag.

A third way to do the above is to just exclude the letter that you don’t want:

var toCompare = "Mario Wario Dario";

var regExNintendo = toCompare.match(/[^D]ario/g);
console.log(regExNintendo);
// Returns ["Mario", "Wario"]

Here the use of the ‘^’ character says we don’t want any matches that start with ‘D’. We’ve already seen the ‘^’ character in this article. When used inside square brackets, it means we’re excluding the contents of the square bracket. If it were entered before the square brackets, it would be looking for a match from the beginning of our string.

Conclusion

And that’s all I have for you! The information in this series came primarily from .Net Magazine and a website which I’ve already mentioned, RegexOne. I would highly recommend this site for it’s interactive tutorials.

In finishing up this series, I’ve also found a site called RegExr, which is a great site for testing out your regular expressions and also has a bounty of examples and a very good reference library (which has already taught me a few more tricks that you might see in a future article).