JavaScript Case Converter Using RegEx

This is a follow up from my earlier article, so I’m not going to run through the basics in this tutorial. If you need to get to grips with the very basics, I’d recommend reading that first and it’s available here.

What we’re going to be building is a simple case converter. This can be used for things such as taking a hyphenated html prop name and converting it to a JavaScript variable name and vice-versa.

We’ll build the functionality in sections, building the camel/pascal case to kebab case converter function first, followed by the kebab case to camel/pascal case converter function. Once these two functions are complete, we’ll also build a wrapper function for them.

First off, we’ll figure out what we need to simplify what this function need’s to do.

We know that we need to find all occurrences of capital letters and insert a hyphen before them, unless of course it is the very first letter. Once we have done this, we need to convert the entire string to lowercase letters.

We’ll do each section separately and then put it all together at the end.

To find all of the capital letters, we will use a RegExp that uses groupings and character sets.

A grouping is like a mini-regex inside of a pair of parenthesis, whilst a character set is a range between square brackets. We are using grouping as it gives us convenient variables to play with when building our result.

The particular regular expression we need for this task is:

First, you’ll see that we have 2 groups, the first group is a range consisting of any lowercase letter and the second group is a range of any uppercase letter. At the end of the regular expression, we also have the ‘g’ global modifier.

The regular expression can’t do everything so we will need to manually convert it to lowercase. Our resulting function would be like in the pen below.

That’s nice and simple but it does have one quirk, which well address in our wrapper function.

So what do we need this function to do? Well, it’s slightly more than our last function, but it’s still not too difficult.

First, we need to capitalize each letter that comes after a hyphen and remove all of the hyphens. We can do this by passing a function as the second argument to the JavaScript replace method. We can use this to dynamically set our replacement value.

Our converter function is below:

What this function does, is takes a string which will be a hyphen followed by a letter and returns the letter, capitalized.

Our regular expression to find a hyphen and include the following character is:

If you followed my previous article, you will be aware of what’s going on here however if you aren’t already familiar with what’s going on, then allow me to explain.

First, we need to find the hyphen, which is done using ‘\-’. Then we need to include the following word character, which is done using ‘\w’. Obviously we need to match all occurrences, so the global modifier is also there too.

We also need to account for pascal case, so we are going to add a conditional which will check an optional second argument to our function to determine whether it should output pascal case or not. If it should, we will simply take the result and uppercase the first character.

Wrapped up into a function, we would have the following:

Now it’s time to make the wrapper function, is two-fold. Firstly, it provides all of the functionality in one place and secondly it performs some common functionality that would otherwise have been duplicated between the functions. In other words, the wrapper helps to keep our code dry.

To try to eliminate errors, I’m going to first add a check in our wrapper function to determine whether the string contains any spaces or underscores. If it does, then these need to be removed so we’ll go ahead and do that.

We can also get clever with our wrapper function and use it to automatically determine which one of our converter functions to call. I’d say this would be the best implementation as the other alternative is to pass four arguments to our wrapper function and I don’t like that, I think it’s ugly. Besides, the whole idea of programming is about getting clever, isn’t it?

We’ll do this by using the regular expressions we have devised earlier in the article to check the string, call the correct function and output the correct results.

Our wrapper function should look like this:

This is by no means a package ready to release but it’s certainly a handy little helper for personal projects.

I hope you’ve enjoyed the tutorial and the previous article if you read that. Don’t forget to leave some feedback and share if you enjoyed it.

If you haven’t already checked out my other article on regular expressions, please feel free to check it out here.

Related posts:

Heathrow Airport is the busiest airport in the UK and is located approximately 14 miles west of Central London. Serving around 80 million passengers each year, Heathrow is the second busiest airport…

Are you a Duolingo app user who uses the app regularly and wishes you had more ability to do speaking practices? Do you tire of all the writing and typing parts of the lessons and wish there was a…

Cryptocurrencies are so bad for the world that it would be better if the basic technology enabling them, permissionless blockchain had never been invented. Here are my five arguments to prove it. The…