Regex Visualizer & Explainer

A powerful, client-side regex testing tool that helps developers, students, and data analysts understand and debug regular expressions with real-time highlighting, capture group visualization, and plain English explanations.

✨ Features

• Real-time Pattern Testing - See matches highlighted instantly as you type
• Capture Group Visualization - Each capture group displayed in distinct colors
• Plain English Explanations - Every regex token explained in human-readable terms
• Flag Controls - Toggle Global (g), Case Insensitive (i), and Multiline (m) flags
• Preset Patterns - Quick access to common patterns (Email, Phone, URL, Date, Password)
• Code Generator - Copy-ready code snippets for JavaScript, Python, and PHP
• Quick Reference Cheat Sheet - Collapsible regex syntax reference
• Responsive Design - Works on desktop, tablet, and mobile devices
• 100% Client-Side - No server required, your data stays private

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/techiekamal/regex-visualizer.git

# Navigate to project directory
cd regex-visualizer

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build

The built files will be in the dist/ directory.

🧪 Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

📁 Project Structure

regex-visualizer/
├── src/
│   ├── main.ts           # Application entry point
│   ├── processor.ts      # Regex validation and matching
│   ├── tokenizer.ts      # Pattern parsing into tokens
│   ├── explainer.ts      # Token explanation generation
│   ├── highlighter.ts    # Match highlighting logic
│   ├── codeGenerator.ts  # Multi-language code snippets
│   ├── state.ts          # Application state management
│   ├── presets.ts        # Preset pattern definitions
│   ├── cheatSheet.ts     # Quick reference data
│   ├── types.ts          # TypeScript interfaces
│   ├── styles.css        # Application styles
│   └── ui/               # UI components
│       ├── PatternInput.ts
│       ├── TestArea.ts
│       ├── ExplainerPanel.ts
│       ├── PresetSelector.ts
│       └── CodeGenerator.ts
├── tests/
│   └── property/         # Property-based tests
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

🛠️ Tech Stack

• TypeScript - Type-safe JavaScript
• Vite - Fast build tool and dev server
• Vitest - Unit and property-based testing
• fast-check - Property-based testing library

📝 Usage Examples

Testing an Email Pattern

1. Enter pattern: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
2. Enter test string: contact@example.com
3. See the match highlighted and explanation panel updated

Using Presets

1. Select "Email Address" from the Presets dropdown
2. Pattern and test example are automatically loaded
3. Modify as needed for your use case

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

techiekamal

• Instagram: @techiekamal
• GitHub: @techiekamal

🙏 Acknowledgments

• Powered by Codebyart
• Built with ❤️ for developers, students, and data analysts

---

⭐ Star this repo if you find it helpful!