geongeorge/i-hate-regex

★ 4,565VueAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((i-hate-regex))
    What it does
      Visualize regex patterns
      Live pattern testing
      Pattern library
    Tech Stack
      Vue
      Nuxt.js
      Regexper
    Use Cases
      Learn regex visually
      Find common patterns
      Embed diagrams
    Audience
      Web developers
      Beginners

mindmap root((i-hate-regex)) What it does Visualize regex patterns Live pattern testing Pattern library Tech Stack Vue Nuxt.js Regexper Use Cases Learn regex visually Find common patterns Embed diagrams Audience Web developers Beginners

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Look up a ready-made regular expression for common patterns like email addresses, IP addresses, or usernames without writing one from scratch.

USE CASE 2

Understand a confusing regular expression by viewing its visual breakdown into named parts.

USE CASE 3

Contribute a new regex pattern to the site by adding an entry to the JSON data file with test strings and an optional explanation.

Tech stack

VueNuxt.jsJavaScriptJSON

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

iHateRegex is the source code for ihateregex.io, a website that helps people understand and use regular expressions without needing to already know how they work. Regular expressions are a compact notation used in programming to search for patterns in text, and they are notoriously hard to read. This site makes them more approachable by showing a visual diagram of what each part of an expression does, alongside a testing area where you can see which strings it matches. The site works as a cheat sheet and a reference library. Each entry in the collection has a title (like "username" or "email address" or "IP address"), a short description of what it matches, the actual expression, and a visual breakdown of the expression's structure. You can also embed the diagram directly into your own website or blog post. The project is built with Nuxt.js, which is a framework for building web applications with Vue. To run it locally, you install the dependencies with yarn and then start a development server. The regex definitions are stored as JSON files in a static folder, which makes it easy to add new entries without touching any application code. Contributing a new regex is straightforward: you add an entry to the data.json file with the expression and some test strings, and optionally create a markdown file with a longer explanation of how the expression works. The project welcomes outside contributions and the process is well documented in the README. The visual diagram component is built on top of an open-source tool called Regexper, which converts regular expressions into railroad diagrams. The rest of the interface was built by the project's author.

Copy-paste prompts

Prompt 1

I want to run the ihateregex.io site locally and add a new regex pattern for matching URLs. Walk me through adding an entry to data.json with the expression and test strings.

Prompt 2

Using the i-hate-regex project, show me how to embed the visual regex railroad diagram for the email pattern into my own blog post or documentation page.

Prompt 3

I'm building a Nuxt.js reference site similar to ihateregex.io. How does this project structure its regex data files and generate a page for each pattern?

Open on GitHub → Explain another repo

← geongeorge on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.