{"id":53,"date":"2024-06-06T18:37:25","date_gmt":"2024-06-06T18:37:25","guid":{"rendered":"https:\/\/imcodinggenius.com\/?p=53"},"modified":"2024-06-06T18:37:25","modified_gmt":"2024-06-06T18:37:25","slug":"simplify-regular-expressions-with-regexpbuilderjs","status":"publish","type":"post","link":"https:\/\/imcodinggenius.com\/?p=53","title":{"rendered":"Simplify Regular Expressions with RegExpBuilderJS"},"content":{"rendered":"

Regular expressions are on of the most powerful tools in a developer’s toolkit. But let’s be honest, regex kind of sucks to write. Not only is it hard to write, but it’s also hard to read and debug too. So how can we make it easier to use?<\/p>\n

In its traditional form, regex defines powerful string patterns in a very compact statement. One trade-off we can make is to use a more verbose syntax that is easier to read and write. This is the purpose of a package like regexpbuilderjs.<\/p>\n

\n
\n
<\/div>\n
\n

The regexpbuilderjs package is actually a port of the popular PHP package, regexpbuilderphp<\/a>. The regexpbuilderphp package itself is a port of an old JS package, regexpbuilder, which now seems to be gone. This new package is meant to continue the work of the original regexpbuilder package.<\/p>\n

All credit goes to Andrew Jones<\/a> for creating the original JS version and Max Girkens<\/a> for the PHP port.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

Installation<\/h2>\n

To install the package, you can use npm:<\/p>\n

$<\/span> npm install regexpbuilderjs<\/span><\/p>\n

Usage<\/h2>\n

Here’s a simple example of how you can use the package:<\/p>\n

const<\/span> RegExpBuilder = require<\/span>(‘regexpbuilderjs’<\/span>);<\/p>\n

const<\/span> builder = new<\/span> RegExpBuilder();
\nconst<\/span> regEx = builder
\n .startOfLine()
\n .exactly(1<\/span>)
\n .of(‘S’<\/span>)
\n .getRegExp();<\/p>\n

Now let’s break this down a bit. The RegExpBuilder class is the main class that you’ll be using to build your regular expressions. You can start by creating a new instance of this class and chain methods together to create your regex:<\/p>\n

startOfLine(): This method adds the ^ character to the regex, which matches the start of a line.
\nexactly(1): This method adds the {1} quantifier to the regex, which matches exactly one occurrence of a given character or group.
\nof(‘S’): This method adds the S character to the regex.
\ngetRegExp(): This method returns the final RegExp object that you can use to match strings.<\/p>\n

With this, you can match strings like «Scott», «Soccer», or «S418401».<\/p>\n

This is great and all, but this is probably a regex string you could come up with on your own and not struggle too much to read. So now let’s see a more complex example:<\/p>\n

const<\/span> builder = new<\/span> RegExpBuilder();<\/p>\n

const<\/span> regExp = builder
\n .startOfInput()
\n .exactly(4<\/span>).digits()
\n .then(‘_’<\/span>)
\n .exactly(2<\/span>).digits()
\n .then(‘_’<\/span>)
\n .min(3<\/span>).max(10<\/span>).letters()
\n .then(‘.’<\/span>)
\n .anyOf([‘png’<\/span>, ‘jpg’<\/span>, ‘gif’<\/span>])
\n .endOfInput()
\n .getRegExp();<\/p>\n

This regex is meant to match filenames, which may look like:<\/p>\n

2020_10_hund.jpg
\n2030_11_katze.png
\n4000_99_maus.gif<\/p>\n

Some interesting parts of this regex is that we can specify type of strings (i.e. digits()), min and max occurrences of a character or group (i.e. min(3).max(10)), and a list of possible values (i.e. anyOf([‘png’, ‘jpg’, ‘gif’])).<\/p>\n

For a full list of methods you can use to build your regex, you can check out the documentation<\/a>.<\/p>\n

This is just a small taste of what you can do with regexpbuilderjs. The package is very powerful and can help you build complex regular expressions in a more readable and maintainable way.<\/p>\n

Conclusion<\/h2>\n

Comments, questions, and suggestions are always welcome! If you have any feedback on how this could work better, feel free to reach out on X<\/a>. In the meantime, you can check out the repo on GitHub<\/a> and give it a star while you’re at it.<\/p>","protected":false},"excerpt":{"rendered":"

Regular expressions are on of the most powerful tools in a developer’s toolkit. But let’s be honest, regex kind of sucks to write. Not only is it hard to write, but it’s also hard to read and debug too. So how can we make it easier to use? In its … <\/p>\n

Read More<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts\/53"}],"collection":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=53"}],"version-history":[{"count":0,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts\/53\/revisions"}],"wp:attachment":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}