David Nguyen
David Nguyen

David Nguyen

iHateRegex - a regex cheatsheet for the haters - don't just use; understand.

iHateRegex - a regex cheatsheet for the haters - don't just use; understand.

David Nguyen's photo
David Nguyen
Β·Aug 12, 2022Β·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

iHateRegex 😈

image.png

don't just use; understand.

iHateRegex.io - a regex cheatsheet for the haters.

Features 😎

  • [x] Visual representation of regular expressions
  • [x] Matched strings - the Testing area
  • [x] Embed regular expression visualization on your sites
  • [x] Regex code highlighting and validation
  • [x] Regex description with markdown support
  • [ ] Playground page where you can create your own expression and link to it.
  • [ ] User login and save the regex

Setup πŸš€

  1. Install yarn

  2. Clone this repo

  3. Install dependencies βš™οΈ

    $ yarn install
    
  4. Test on localhost πŸ› 
    # serve with hot reload at localhost:3600
    $ yarn dev
    
  5. Build and Start nuxt server πŸš€
    # build for production and launch server
    $ yarn build
    $ yarn start
    

This project is built with Nuxt.js πŸ™Œ

For a detailed explanation of how things work, check out Nuxt.js docs.

Contribute Regex πŸ™

Contribute to this project and make this the largest collection of useful expressions 😍

You can also submit regex via this google form

To contribute:

  1. Add your regex to /static/regex/data.json
Show sample JSON json { "id": "username", "title": "username", "tagline": "match a username", "description": "Alphanumeric string that may include _ and - having a length of 3 to 16 characters.", "regex": "^[a-z0-9_-]{3,15}$", "flag": "gm", "matchText": [ "lorem", "ipsum", "gr3at", "a", "ab", "abcd", "abcde", "john doe", "johnny", "abcdefghijklmnopqrst" ], "cheatRegex": [ "/^/", "/$/", "/[a-zA-Z0-9]/", "/(hello){1,3}/" ], "embedHeight": 300, "tags" : ["name", "slug"] },
Show JSON properties | Property | Definition | |------|------------| | id| this is the slug and also the short name of the regex. cannot contain spaces and only contain url-safe characters| | title | Title of the page. | | tagline | Tagline | | description | First line under the tagline and also the meta description | | regex | The actual regex string | | flag | regex flags associated with the expression. eg; g | | matchText | Array(line by line) of strings to be included in the string matching are | | cheatRegex | refer static/regex/cheatsheet.json and see what all cheats are relevent to this expression. (you can also add your own cheats into cheatsheet.json and refer to that) | | embedHeight | Height in pixels of the regex visualization embed | | tags | tags related to the expression (to be used later) |
  1. Create a markdown file in /static/regex/markdown/ named <regex-id>.md for longer description and explanation

    <regex-id> is the id from data.json

That's it πŸ™Œ Go ahead and shoot a new pull request✨✨

Descriptions

There are 2 descriptions for each regex.

  • One is the description property inside /static/regex/data.json.

    • This is used for page meta description as well.
    • This is the first description
  • Second is a dedicated markdown file in /static/regex/markdown/<file>.md

    • This should explain how the expression works in detail.
    • This is the long description

image.png

PropertyDefinitionexample
description property inside data.jsonThis should explain about what the target match is in a few lines. It should not contain any html or markdownA username is a unique identifier given to accounts in websites and social media
dedicated markdown fileExplain about the expression and how it worksip addresses are of the range 0.0.0.0 - 255.255.255.255. The expression matches the ....(more)
Β 
Share this