DEV Community

Cover image for Introducing Regcode - Create Regular Expressions Easily with Code
Anton Ödman
Anton Ödman

Posted on

Introducing Regcode - Create Regular Expressions Easily with Code

Every programmer has most likely heard the term Regex, or Regular Expressions. It's extremely useful, but the unreadable syntax makes it hard the learn and easy to forget once you've learned it.

I really wanted to make Regex easy, so therefore I created Regcode - a tool to create regular expressions easily with code (Github repo for those interested, it's open-source).

Regcode can be easily summarized in this picture:

regcode explanation


Features

Regcode comes loaded with different features to make it easier for the developer to create their own regular expressions - without actually knowing Regex.

  • Create Regular Expressions with simple code
  • English-like syntax that is easy to read
  • Easy to learn, easy to read
  • Simple API
  • Easy documentation
  • Convert to Regex or match directly to a string in the API
  • Web app to use it create it in the browser
  • Get started in minutes
  • No need to learn Regex to create an expression
  • Free and open-source

Regcode - the simple way to write Regex

As you can see on the picture above - Regcode is not at all difficult to use. The syntax is basically English, making it easy to read and learn.

<matchAll> hasBefore(https://) [character]{any} normal(.) [character]{any} hasAfter(.[character]{2,6});
Enter fullscreen mode Exit fullscreen mode

This is a simple regcode to match different URLs that ends with .com or .net (and starts with https:// but does not include it). The syntax makes it easy for the developer to write, but also for other developers to read and actually understand. The regex it generates is much harder to understand.

/(?<=https:\/\/)[A-Za-z\u00C0-\u017F]*\.[A-Za-z\u00C0-\u017F]*[A-Za-z\u00C0-\u017F]{2,6}/g
Enter fullscreen mode Exit fullscreen mode

Web app - use it directly in the browser

Web app

You can create your own regcode directly in the browser over at the main page for regcode.

Generate your regex directly, and compare your code directly with your own strings to see if they match.


API - use it in your project

The API can be installed directly from NPM and used inside of your JavaScript/TypeScript projects.

Install it as usual with NPM.

npm install regcode --save
Enter fullscreen mode Exit fullscreen mode

After that, import it and use it.

const regCode = new RegCode();
const code = "hasBefore(https://) normal(www.) [character]{any} normal(.com)[or]normal(.net)";
const sentenceToMatch = "The url is https://www.regcodejs.com, here you go!";

// look for matches
const match = regCode.match(code, sentenceToMatch);    // ["www.regcodejs.com"]

// or convert to regex and match the normal way
const regex = regCode.convert(code);
const match = sentenceToMatch.match(regex);           // ["www.regcodejs.com"]
Enter fullscreen mode Exit fullscreen mode

Documentation with examples

Documentation

The documentation is short and hopefully easy to understand, with a lot of different examples to easily get you going. It's really easy to get started with the basics. And for those eager to get going directly, you can start at the examples page.


Thank you for very much for taking your time and reading this post. I really hope Regcode comes to good use for you. Feel free to ask me if you have any questions, or create your own issues/pull request if you want to contribute to the project.

Top comments (4)

Collapse
 
mwrpwr profile image
Joseph Maurer

What a cool project! I wrote earlier about some of the issues with using regular expression and I think this alleviates part of the issue. Understanding what someones regex is trying to do is half of the battle honestly. Does your tool allow you to enter a regex and convert it to your easier to read syntax?

Collapse
 
banjoanton profile image
Anton Ödman

Thank you, and interesting article!

I completely agree, the most difficult part is probbably maintaing regex. That was the main reason I wrote this program.

Unfortunately, this only works one way. I was thinking about making it the other way also, but it would require a lot more of work.

Collapse
 
banjoanton profile image
Anton Ödman

I had never seen that before. I guess that was something I had in mind when I build my application. Thank you!

Collapse
 
awwsmm profile image
Andrew (he/him)

In a similar vein, this reminded me of the Rosie Pattern Language:

gitlab.com/rosie-pattern-language/...