How to write Regex without writing regex 🦄
Tags: javascript, regex, typescript, webdev
Published: 2023-03-10 23:45:13

Writing regex is not that difficult, I know, But without a doubt, it's one of the most boring tasks in the world, and if you don't understand it, it's super frustrating. So today I present to you, **magic-regexp**

This library allows you to create regular expressions with a very natural and intuitive syntax. 

First, we need to install it
```bash
npm install magic-regexp
```

Now, let's create an array where we can test our expressions

```javascript
const stringsToParse = [
    "id: 123",
    "there is no id",
    "random string id: 1",
    "[INFO] id: 12",
    "id: 1a",
    "random log info id: 4b93H6Hd random log",
    "id: 4b93H6Hd"
]
```

### First case
Our first case will be a simple one, just match the string "id: "

```javascript
import { createRegExp, exactly } from 'magic-regexp'

const regex = createRegExp(
    exactly('id: ')
)
```

![Regex to find exact string with magic-regexp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g14yukx3eh7tz3l20t4b.png)

We can see that almost all the strings matched our regex, only the second one didn't contain the exact string "id: ".
 
### Second case
Let's do something more complicated. Let's find the word "id: " again, but now we also want it to be followed by a letter or digit, and to be between 2 and 6 in length.

```javascript
import { createRegExp, exactly, letter, digit } from 'magic-regexp'

const regex = createRegExp(
    exactly('id: ')
    .and(letter.or(digit).times.between(2, 6))
)
```

![Regex to find exact string and specific length](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao3zbhs4sql38qm1ni18.png)

As you can see, the third word didn't match because the number after the id contains only one letter/digit.

### Third case
So, let's add one more thing here, the `.at.lineStart()`. As the name says, it will only care about the string where your condition is at the beginning.

```javascript
import { createRegExp, exactly, letter, digit } from 'magic-regexp'

const regex = createRegExp(
    exactly('id: ')
    .at.lineStart()
    .and(letter.or(digit).times.between(2, 6))
)
```

![Regex to find exact string, specific length and at the beggining](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo4ii2o9azjsngn712th.png)

As you can see, only those matching the previous conditions and those starting with our "id: " match the condition.

### Fourth case
Let's push things a little further. Let's add the `.at.lineEnd()`. As the name says, it will only look for those that are at the end of the line. Notice that we put this inside the `and()` function.

```javascript
import { createRegExp, exactly, letter, digit } from 'magic-regexp'

const regex = createRegExp(
    exactly('id: ')
    .at.lineStart()
    .and(letter.or(digit).times.between(2, 6).at.lineEnd())
)
```

![Regex to find exact string, specific lengt, at the beggining and at the end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/875lb0wosrx6e6wv5x2j.png)

With this particular condition, only two strings satisfy the condition.


## Summary
As you can see, writing regular expressions with a more natural language is a lot easier if you don't have experience with regex. There are many more things that you can do with this library, you can check directly the [documentation](https://regexp.dev/).

A big inspiration for this post, came from this [Youtube Video](https://youtu.be/X_k198mrGL8), so check it if you want something more visual :)

That's all, I hope it can be helpful for you 🥳