What is RegEx Really and Important RegEx Functions

Regex…Reg what?!

So you’ve probably seen these crazy, intimidating sets of characters bundled together called ‘Regular Expressions’ (RegEx).

What the actual f@^*?! (checks for an email address pattern)

You may have wondered what they actually do? Perhaps you may have even vowed to one day, very, very far in the future to look into it properly. Well my friend, TODAY is that day!

let’s go champ

The common explanation is:

Regular Expressions is a sequence of characters that define a search pattern.

Usually such patterns are used by string searching algorithms for “find” or “find and replace” operations on strings, or for input validation

What uses does it have?

RegEx allows us to check for patterns in text strings such as trying to match a valid email address or password. One of the great superpowers of RegEx is being able to define your own search criteria for a pattern to fit your needs, and it is like a language of its own.

Every form out there in the world, at some level, is using a RegEx pattern. They all do similar things, but they can all be very different. There is a lot of control when deciding on a pattern you want to search for.

However, it is not just forms that RegEx is used on. Imagine you have some dynamic data coming in a text/string format. If it is dynamic you’d want to check it against a certain pattern to validate it against a database perhaps. Since that string is dynamic, you’d need something to validate it has the desired parameters. That is where RegEx can shine and validate that it is the pattern you want.

Another great thing about RegEx is that if you learn it in one language you pretty much learn it in others like Javascript, Perl, Python, Php, and Java. Understanding RegEx is a transferable skill to use in your arsenal as a software/web engineer.

Getting started

So here’s the meat and potatoes of RegEx. The core of what it is to use Regular Expression. Let’s start at the beginning…

Declaring a RegEx method

There are a few ways to declare your Regular Expressions, the below is the easiest way I’ve found and is the most common.

The second method is a little bit more verbose as it uses the RegExp() method.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

The RegExp constructor creates a regular expression object for matching text with a pattern. Fancy huh? With most things fancy, it’s also usually unnecessary. Use the first method.

‘Testing’ a Regular Expression

Now how do we see if our RegEx declaration matches a given string.

Luckily, a simple test method .test() is already in place natively to see whether your RegEx pattern matches or not, returning a boolean.

‘Executing’ the search for a particular match

The exec() method executes a search for a match in a specified string. Returns a result array, or null.

In this case, it will return an array.

Match

Though executing a pattern search is great, but what if we want to actually do the matching? Well I’ve got you covered with the .match() method.

The .match() method searches a string for a match against a regular expression, and returns the matches, as an Array object. However, in this case, we want to return the array with some further useful information like the specific instances our pattern occurs. We do this by appending the g (global) method to our reg variable declaration like this…

That now returns an array of instances that the pattern outlined in reg occurs.

Replace

Now you don’t always need to declare a regular expression pattern. You can always just use your string and a method. As is the case with the .replace() method.

Which simply just replaces whatever matches your pattern with something of your choice…

Search

Another cool regEx method is the .search() method which searches a string for a specified value, and returns the position of the match.

One of the great things about regEx is here in this method in that search value can be string or a regular expression. The customisability is quite varied and its why you’ll see so many differing opinions on what the best way to do anything in regEx is throughout the developer community.

This method also returns -1 if no match is found.

Wanna learn some fun tricks?

Range

Searching for a range of characters can be extremely useful when you’re trying to limit the pattern for a set of letters or numbers.

Using the .match() method we return an array of the results.

To return a number range range we simply;
replace in reg the regEx to /[1-9]/g ;

Use regEx natively in HTML as an attribute argument

Patterns is an attribute in HTML used on <input>elements that can check for patterns using regEx.

The pattern also work with attribute of the following input types: text, date, search, url, tel, email, and password.

It’s a great way of plumbing in your regular expressions in to the HTML only and not have to worry about writing any accompanying JavaScript.

When to use RegEx

Now that you have a better understanding of what RegEx is, when should you use it?

Good use cases

• Throwaway code
• User-input validation
• When trying to find a specific pattern within a big glob of text!

Bad use cases

• Regex isn’t suited to parse HTML because HTML isn’t a regular language.
• I would avoid parsing a URL’s path and query parameters with regex. Most standard libraries have mature tools for pulling a URL apart into its own corresponding parts.
• Email addresses are another example of a complicated data format that isn’t well suited to regex. Here is an example of the hoops you have to jump through with regex to parse most (not all) valid email addresses. Again, I would recommend a dedicated parsing library for this purpose.

That’s all you need to get going

RegEx is not something you’ll master after one article despite how great this one was.

Though this is the beginning of your RegEx journey, I highly implore you to just go out there and get stuck in. Create anything simple to test out your new ‘l337 skillz’ with Regular Expressions.

You could even do something similar to the signup validation demo I did below?

RegEx Sign up Demo

So I created a demo for this article that outlines how to hypothetically use regEx on a sign up form and check for validation without a regEx library.

If interested check out the live demo now here
https://regex-validation.netlify.com/

And for the source code take a look at it’s repo
https://github.com/hghazni/regEx

Thanks for reading

My names Harry Ghazni and I work in Nottingham, UK.

If you liked what I wrote you can find me on twitter or on medium. I love what I do, what I learn and sharing it with others.

I also have a YouTube channel called Curious Byte where I post tutorials and advice, check it out!