DEV Community

loading...
Cover image for Making Regular Expressions Readable in JavaScript

Making Regular Expressions Readable in JavaScript

rfornal profile image bob.js Originally published at rfornal.hashnode.dev ・2 min read

Reggie-Docs

"My first foray into Open Source development."

Now, this is not the first time I've contributed to open-source software. It is the first time I have submitted my own project to npmjs.

The Project: Reggie Docs

Regular Expressions are complicated to write.

It's even more difficult to reason about them; especially if you have to read someone else's code.

About a year ago, I wrote an article about an experiment I was working with (see it HERE). I've actually used this pattern several times since writing the article and working through the code.

Then, someone said, "this should be an open-source library."

And ... something in my brain clicked.

And ... I started reworking the codebase I had into something more functional.

The Open-Source Project

The project is here: reggie-docs.

This project will allow a developer to use a Template Literal to build a regex, with comments to make it more readable.

const code0001 = `
  /* Matches text avoiding additional spaces
  */
  ^       // Beginning of line
  [\\s]*  // Zero or more whitespace
  (.*?)   // Any characters, zero to unlimited,
          //   lazy (as few times as possible, expanding as needed)
  [\\s]*  // Zero or more whitespace
  $       // End of line
`;
Enter fullscreen mode Exit fullscreen mode

... rather than ...

const code0001regex = /^[\s]*(.*?)[\s]*$/;
Enter fullscreen mode Exit fullscreen mode

Here's a pattern for use of the code0001 above ...

const Reggie = require('reggie-docs');
const reggie = new Reggie();

let results = {};

const patternCheck0001 = '  Test Spaces Before and After   ';

results.code0001 = reggie.create(code0001);
const code0001Exp = reggie.generate(code0001);
results.code0001Test = code0001Exp.exec(patternCheck0001)[1];
Enter fullscreen mode Exit fullscreen mode

Conclusion

The whole concept of this project is to make Regular Expressions easier to understand and reason about. In doing this, the process should be simple and easy to work with.

Discussion

pic
Editor guide
Collapse
jonrandy profile image
Jon Randy

So you want to slow your code down for the benefit of perceived readability for people who aren't so good at regex? This would be something better done at build time

Also, if you really want to do it right there in the code, you could make the syntax a lot nicer by using a tagged template:

reggie`commented regex here`
Enter fullscreen mode Exit fullscreen mode
Collapse
rfornal profile image
bob.js Author

The slowdown is negligible. If used in a service or class, the regex can be generated once.

As to people who “aren’t so good at regex,” I always write my code with the assumption that someone else has to figure out what I did and if I can make readability easier, I should. That is what the whole project is about.

Tagged template: hadn’t thought of that. I’ll look into it.

Thanks!

Collapse
rfornal profile image
bob.js Author

Tagged Template Literal is now included.

Also, there are plans to incorporate this within build tools.

Collapse
sshine profile image
Simon Shine

You've re-invented Perl's /x for Javascript, congrats!

Some people like them, others feel that they don't really solve the fundamental problem of regexes being unreadable. I can say that I've seen examples of /x use where those in-lined comments helped greatly.

Whether such a complex regex should really have been expressed with parser combinators instead, which allows for composing and naming sub-parts of an expression as logical units, one could argue.

Collapse
rfornal profile image
bob.js Author

Thank you for all the information. I will dig in and explore both the Perl tools you mentioned and the parser combinators.

Exciting stuff!

Collapse
s11637883 profile image
S

What about this library xregexp.com/? This library is much heavier, but it can do more. (personally, I don't like heavy things).

Anyway, I see two problems at the moment. First, we need a tool for highlighting patterns, and second, we need, for example, a webpack loader for removing garbage and compressing patterns, especially for client-side applications.

Anyway, I'm not sure it's worth it. I hope the x flag will be added soon.

Collapse
rfornal profile image
bob.js Author

Thanks for the reference. I do like what I see there ... I am kind of leary of using a tool like that with custom "comments." It would be nice to see some of this functionality added to the JavaScript specs.

I do not intend for my project to have that kind of weight (or functionality for that matter). I don't want to add functionality and dig into the logistics of how Regular Expressions should work.

The tooling I am building is simply to make the Regular Expressions themselves more legible to a developer.

Again, thanks for the reference. I will definitely take a look.

Collapse
subztep profile image
Andras Serfozo

I rarely use regexp, when necessary I craft on regex101.com/, this page describes the pattern on a similar way as your examples. For a regexp heavy project which involve more developers I can see its benefit.

So ironic you couldn't use it in the library itself. xD

Collapse
rfornal profile image
bob.js Author

What an awesome comment. I actually use regex101, as well. My go-to site. Maybe there was some unconscious influence.