The life-changing magic of regular expressions

I’ll never forget the first time I saw a regular expression (also known as regex). I had no idea what I was looking at.

string.match(/beginning[\s|\S]*?^end$/m)

I mean, WTF is that?

I’d been working through a JavaScript challenge, and what had taken me 20 lines of code to do, some genius completed in one line using regex.

I didn’t understand it, but it had my attention. I could see its magic. I had to learn more.

And learn more I did.

Now I use regular expressions regularly!

Once you get your head around what regex is good for, there are loads of times it comes in useful. I probably end up writing regex most days I’m coding.

I plan to share what I’ve learned in a series of blog posts. Because there is lots to learn about regex. And it’s not exactly easy on the eye, so it can be hard to get started when you have no idea what you are looking at.

But in this blog post, I’m going to talk about the power of Regex, and why it’s worth learning about. Because if you’re going to learn something that can look like this…

string.match(/(\[[^\]]+\([^\)]*\)[^\]]*\])|(\[.+?\])/)

You need a damn good reason!

I would forgive you for thinking that I made up that example. It looks like I got that by bashing my fists randomly on the keyboard. But it’s actually some real regex that I wrote recently.

Yep. It looks horrendous.

But I love regex. Not because it’s pretty to look at (it isn’t). Not because it makes me feel smart (I still feel stupid every time I look at it). But because of what it does.

Regex matches patterns in strings.

That’s what regex does. Matches patterns in strings.

In Javascript, you can use .match() or .exec() on a string if you need information about the regex match. Or you can use .test() or .search() if to check if there is a match.

As a developer, or just as someone who uses a computer, a huge amount of the code and data you will work with is in string format. A user fills in a form on your website, that information will be sent as strings. You get some content back from an API request, it will probably contain strings.

Strings are everywhere. In your code. On your server. In your database. You’re reading a string right now.

But maybe you want to validate that string. Check it’s in the right format. Or check it only contains allowed characters. Or check it doesn’t contain anything it shouldn’t.

And you can do all of that (and more) with regex. In JavaScript, to run a regex match on a string, you can use the .match() function.

// use regex to find a match for "your" in the string
"your string".match(/your/);

And regex can look through a string at lightning speed, looking for any patterns you give it.

The example above just looked for one occurrence of "your", but you can pass the global g flag to look for every match.

// use regex to find every match for "your" in the string
"your string is still your string".match(/your/g);

You don’t have to look for words. You can use regex to match characters, patterns, words, groups and combinations of each.

You can think about Regex about like the Find function you get in text editors. But on steroids.

Regex transforms strings

You don’t just have to stop at matching patterns. You can use regex to replace them too!

In JavaScript you can use .replace() to change a string with regex, or .split() to break a string to an array with regex.

Maybe you need to reuse some data but in a slightly different format. Maybe you need to update a string to work with a new service. Or maybe you want to remove certain characters or patterns.

To replace instead of .match() you will use .replace() and here’s how that will look.

"your string".replace(/your/, "my");
// "my string"

This is a really basic example. The true power of regex can be used to match multiple occurrences of a pattern, to match multiple groups, to find patterns within patterns.

You can get much more specific. And not just with your match, but also with your replacement.

Keeping with the example above, let’s say you have a longer string, and you want to replace all occurrences of "your" with "my".

You can use the g flag (global) to match all occurrences in the string.

You might also have "your" at the beginning of a sentence, so you also need to pass the i flag (case insensitive), so it matches "Your" too.

And now for the replacement.

"Your string is still your string!".replace(/your/gi, function(match) {
    return /Y/.test(match) ? "My" : "my";
});
// "My string is still my string!"

Because the replacement is a little more complex in the above example, you can pass a function instead of a simple replacement string. And that function runs some more regex inside it /Y/.test(match) to see if the replacement needs a capital M or not. If it's a capital Y, replace it with "My". If not, replace it with "my".

These basic examples give only a glimpse of what’s possible with regex. But you can get super expressive with your regular expressions! In future posts, we can dive deeper into modifiers, groups, conditions and other regex tips and tricks.

Being able to validate data at speed, or save yourself hours of manual work updating a large amount of text. That’s where regex shines. And that’s the life-changing magic of regular expressions.