Understanding Regex, being an HNG-11 Intern.

As a developer, I have to admit that regex is one of the most confusing and rather annoying topics I have had to deal with, and I believe it is the same for most developers out there. In case you don't know what regex expressions are, let's get down to it.

Regular Expressions(Regex) are sequences of characters that specify a match pattern in text. - Google. This means that; a regex value is a search pattern you can build/construct to match specific characters or patterns in a given text. For example, we have probably the most used/common regex pattern which is the pattern used for checking if a text is an email address or not, here is what it looks like; ^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$. Honestly, it just looks like a bunch of random stuff but we both know it's not random.

So, how can one construct a valid regex? Here is a guide to how I was able to create my first regex value.

The Problem

It always starts with a problem, doesn't it? While working on a poll feature that required the user to put in the duration of the poll, I needed to convert that duration which would be in string values, to a time unit(seconds) to block voting on the poll once the time was elapsed. The idea was pretty basic; when a user types in something like "20 days", I want to be able to convert that string to seconds equivalent to its value, meaning I want to get the value of 20 days in seconds. Also, keep in mind that the string can be as dynamic as ever, meaning it could read "5 weeks" or "80 hours", and I needed to be able to satisfy every instance.

Solving the Problem

The first thing I did was identify the time units to be expected from the user, being [second, minute, hour, day, or week], there was no reason for having month or year for a poll duration.
Ideally, no matter what value is sent in, it must be in two words(the numeric value and the time unit). The time unit needed to be converted to seconds, and the numeric value was to assist in that conversion, so I created an object to identify what values I would be multiplying the numeric value against to get the value in seconds, came up with this;

const timeUnitinSeconds = {
            "second": 1,
            "minute": 60,
            "hour": 3600,
            "day": 86400,
            "week": 604800
        };

So if there is a value that reads "20 days", multiplying 20 by the value of "day"(86400) would get the value in seconds. All that was needed was knowing what value to multiply by.

Firstly, I needed to make sure the incoming string was in the format being expected(e.g. 20 days), identify what the time unit is, and then multiply it accordingly. Here is where my regex comes in.

Constructing the regex pattern for this was significantly not the most important part of the feature, but it was definitely the most difficult part to get done.

In all honesty, I did not know how to create a regex pattern, so I did a Google search, clicked a few links, and found this link to be most useful. Now that I had basic knowledge, all that was left was to implement it.

There was a lot of back and forth, a few hisses, and power naps, but in the end, I was able to come up with this;

/^(\d+)\s*(second|minute|hour|day|week)s?$/i

Here is what it means;

• /^ - This indicates the start of the pattern.

• (\d+) - This indicates the numeric value to be expected

• \s* - This checks if there is a whitespace/tab or not

• (second|minute|hour|day|week) - This checks if the time unit matches any of the values in the bracket.

• s? - This checks whether the time unit is in plural or not (day or days)

• $ - This indicates the end of the pattern

• /i - This makes the pattern case insensitive so "20 days" would still be regarded as "20 Days".

Now that I am writing this article, it feels rather simple, but I spent almost 2 days trying to understand the whole thing and making it work. Such is the path of a developer(laughs in tiredness).
The regex would match patterns/strings like "20 days", "3Hours" or "5 weeks", all irrespective of the spacing in between, or the case sensitivity.

Here is my implementation of it;

        const matches = durationString.match(/^(\d+)\s*(second|minute|hour|day|week)s?$/i);
        console.log("mat: ", matches);

        if (!matches) return this.process_failed_response("Invalid duration");

It was rather frustrating to work on, but still pretty interesting.

Being a Backend Developer presents quite several challenges along the line, like this one, and of course, I love challenges, it is the reason why I became a Backend developer in the first place. Plus, it is also the reason why I joined in on the HNG-11 internship program. I have heard about it a lot in my recent years as a developer but always learned about the registration late. Well, not anymore, and it's got me pretty excited.

If you want to challenge yourself in your tech stack, I implore you to join the most fast-paced and challenging internship(HNG).
Not just that, if you are someone looking to hire a tech talent, HNG has a pool of them available, you can check it out here.

So, there you have it, I hope you have learned a thing or two about Regex(hopefully more), my name is Lawwee, and thank you for reading my post, you can connect with me via the information below, and send a DM if there is anything you’d like to talk about or ask.

Have a good day.

LinkedIn: https://www.linkedin.com/in/mohammed-lawal/
Twitter: https://twitter.com/lawaldafuture1
Email: lawalmohammed567@gmail.com