Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/geongeorge/i-hate-regex

The code for iHateregex.io ๐Ÿ˜ˆ - The Regex Cheat Sheet
https://github.com/geongeorge/i-hate-regex

nuxt regex tailwindcss vue

Last synced: about 1 month ago
JSON representation

The code for iHateregex.io ๐Ÿ˜ˆ - The Regex Cheat Sheet

Lists

README 

        


  

  


    iHateRegex ๐Ÿ˜ˆ

  


  

  


    

      PRs Welcome

    

      Nodejs CI

     

    

  


  










  

  

  


    don't just use; understand.




  


    iHateRegex.io - a regex cheatsheet for the haters.

  



  


   Chat with us on Telegram








## 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](https://ihateregex.io/playground) where you can create your own expression and link to it.

- [ ] User login and save regex



## Setup ๐Ÿš€



1. Install [yarn](https://yarnpkg.com/)



2. [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) this repo



3. Install dependencies โš™๏ธ



  ``` bash

  $ yarn install



  ```

4. Test on localhost ๐Ÿ› 

  ``` bash

  # serve with hot reload at localhost:3600

  $ yarn dev

  ```

5. Build and Start nuxt server ๐Ÿš€

  ``` bash

  # build for production and launch server

  $ yarn build

  $ yarn start

  ```



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



For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).



## Contribute Regex ๐Ÿ™



Contribute to this project and make this the largest collection of useful expressions ๐Ÿ˜



You can also submit regex via this [google form](https://forms.gle/Cwo3VupujQJzeoYQ9)



### 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)  |



2. Create a markdown file in `/static/regex/markdown/` named `.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/.md`



  - This should explain how the expression works in detail.

  - This is the **long description**



  


  

  



| Property | Definition | example |

|------|------------|------------|

| **description** property inside `data.json` | This should explain about what the target match is in a few lines. It should not contain any html or markdown |A username is a unique identifier given to accounts in websites and social media |

|dedicated **markdown file**|Explain about the expression and how it works| ip addresses are of the range 0.0.0.0 - 255.255.255.255. The expression matches the ....(more)|



## Sponsors ๐Ÿ’–












Donate via Opencollective




## Credits



- The visual demo is built with: [regexper](https://gitlab.com/javallone/regexper-static

)