Introducing microregex - A highly Curated Catalog of RegEx Patterns

Introducing microregex - A highly Curated Catalog of RegEx Patterns

Sunit Shirke's photo
Sunit Shirke
Β·Oct 24, 2022Β·

5 min read

Subscribe to our newsletter and never miss any upcoming articles

Play this article

Table of contents

Introduction

Regular expressions are an important aspect of software development. Owing to being a powerful and complex language, they can be used to search and replace text, validate input, extract data from structured documents, and more. Remembering all the different regex patterns can be a difficult task. Having an app that will provide you with a list of common regex patterns and their use cases will definitely help.

microregex

microregex is an open source and highly curated catalog of regular expression patterns. It offers programmers RegEx snippets that can be quickly exported into a variety of programming languages and distributed around teams. Whether you are building an app or a website, microregex is the right place for you.

Why?

While coding, I found myself spending a lot more time merely scanning the regex for various sorts of validation rather than needing to fast search and locate one that fits my needs. Most developers jump through numerous hoops of Stack Overflow responses or an article discussing a specific regex snippet to get the one regex pattern that they require. It seems like a lengthy procedure. A friend of mine who experienced the same discomfort joined me in developing a tool that will make finding and copying regex patterns simpler.

Demo

Try out microregex by clicking on the link below:

microregex.netlify.app

Visual Demonstration πŸ“Έ

microregex-demo-06.gif

Features βœ…

  • Search and copy common regex patterns

  • Syntax highlighting

  • Ability to copy code directly for multiple programming languages

  • Ability to filter search based on tags

  • Formatted code for a specific language

Tech Stack βš’οΈ

Folder Structure πŸ“

microregex/
β”œβ”€ assets/
β”œβ”€ public/
β”‚  β”œβ”€ favicon.ico
β”‚  β”œβ”€ index.html
β”‚  β”œβ”€ robots.txt
β”œβ”€ src/
β”‚  β”œβ”€ components/
β”‚  β”‚  β”œβ”€ card.tsx
β”‚  β”‚  β”œβ”€ navbar.tsx
β”‚  β”œβ”€ graphql/
β”‚  β”‚  β”œβ”€ queries.ts
β”‚  β”œβ”€ pages/
β”‚  β”‚  β”œβ”€ home.tsx
β”‚  β”œβ”€ utils/
β”‚  β”‚  β”œβ”€ copytest.ts
β”‚  β”‚  β”œβ”€ tags.ts
β”‚  β”œβ”€ index.css
β”‚  β”œβ”€ index.js
β”œβ”€ .gitignore
β”œβ”€ package.json
β”œβ”€ README.md

We follow simplicity as we explore through the folder structure where files are grouped together based on the usage.

pages β€” are the parent components that can be hyperlinked

components β€” mini components that could be re-used

graphql β€” all our queries going out to

utils β€” all of our utility code that could be reused

Technical Information ℹ️

For storing data, we have used Nhost database, which uses Hasura Postgres DB. Nhost encapsulates and makes it easier for you to use, access and navigate the database and storage modules provided by Hasura.

We used two different graphql queries for searching

  1. All Data Query β€” used while initial page load
query {
    patterns {
        name
        description
        tags
        content
        preview
    }
}
  1. Like Name Query β€” used for querying using name field
query getPatternsLike($name: String){
    patterns(where: {name: {_ilike: $name}}) {
      name
      description
      tags
      preview
      content
    }
  }

Challenges

The primary challenge which we faced was that after querying the jsonb data using contains operator as mentioned here we would get an error as below

image.png

Nhost wasn't allowing us to query multiple strings in an array of strings.

Old GraphQL Query:

query getPatterns($tags: jsonb) {
  patterns(
  where: {
    _and: [{ name: { _ilike: "%%" } }, { tags: { _contains: $tags} }]
  }
){
    name
    description
    tags
  }
}

Old Variables:

{
  "tags": ["auth", "finance"]
}

As you can see, if one or more elements are included in variables, as shown in the above query and variables snippet, it gives the same error as mentioned in the above paragraph.

New GraphQL Query:

query getPatterns($where: patterns_bool_exp) {
  patterns(where: $where) {
    name
    description
    tags
    content
    preview
  }
}

New Variables:

{
  "where": {
    "_and": [
      {
        "name": {
          "_ilike": "%%"
        }
      },
      {
        "_or": [
          {
            "tags": {
              "_contains": "finance"
            }
          }
        ]
      }
    ]
  }
}

So instead of comparing the objects, we used patterns_bool_exp. It is a boolean expression to filter out rows from a table, 'patterns' in our case, and all the fields are combined with a logical 'AND'.

Nhost πŸ“¦

If you're looking to host your Postgres database for free, you should definitely check out Nhost. It has a lot of features similar to Firebase with the ability to query data using GraphQL and use Hasura for all development services.

Checkout the docs here: [docs.nhost.io/]

Enhancements ✨

  • Implemented a debounced search and filtering where limited requests are made avoiding unnecessary calls to our GraphQL endpoints

  • Responsiveness

  • We used useMediaQuery hook & inline styling to handle responsiveness at certain breakpoints.

Future Scope πŸ”­

  • Take advantage of color mode offered by chakra-ui to add dark mode support

  • Visualize regex with examples

  • Language export script that will optimize data entry

  • Revisit search and make it more user-friendly

Contribution and Hacktoberfest πŸ“

Hacktoberfest is a great initiative in my opinion because it encourages more contributions, more developer engagement and in turn a rapid growth of countless open source projects. If you are a developer interested in contributing to an open source project,

Creators πŸ‘₯

App: microregex.netlify.app

GitHub repo: github.com/Maddoxx88/microregex

Vote of thanks 🀝

We would like to thank Nhost and React-Play for hosting Hack-R-Play. Special thanks to the members of React-Play discord server for providing such a good support.

Did you find this article valuable?

Support ReactPlay Blog by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors