Regular Expression Match Groups

By  on  

Regular expressions are incredibly powerful but can be difficult to maintain. They're a skill you learn on the job and, when the suits walk by, make you look incredibly smart if you have a few up on your screen. How can we solve the maintainability problem? With a match groups, as Addy Osmani enlightened me about last week:

https://twitter.com/addyosmani/status/1386031624232456194

Look at the ?<descriptor> pattern, with the descriptor being a meaningful name that you want to give to a give group. With the group usage, you can more intelligently handle match results:

const re = /(?\d{4})-(?\d{2})-(?\d{2})/;
const result = re.exec('2021-04-26');

// Deconstructing from result.groups
const { year, month, day } = result.groups;

// Using array syntax
const [, year, month, day] = result;

The only real downside of using this strategy is that most developers probably don't know about it. You could also complain that it makes the regular expression longer. In the end, however, maintainability rules the day, and I love that Addy shared this tip with us!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

  • By
    CSS Rounded Corners

    The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!