Regex Explainer

A VS Code extension that decodes and explains regular expressions on mouse hover.

Watch Regex Explainer in action:

Features

• Hover to Explain: Simply hover over any regex pattern to see a detailed explanation
• Smart Detection: Automatically detects regex in multiple formats:
  • Regex literals: /pattern/flags
  • String patterns: "^[a-z]+$"
  • RegExp constructor: new RegExp("pattern", "flags")
• Comprehensive Breakdown: Explains all regex components:
  • Anchors (^, $)
  • Character classes ([a-z], \d, \w)
  • Quantifiers (*, +, ?, {n,m})
  • Groups and alternations ((), |)
  • Lookahead/lookbehind assertions
  • Flags (g, i, m, s, u, y)
• Markdown Formatting: Clean, readable explanations with tables

Example

When you hover over this regex:

const pattern = /^[a-zA-Z0-9_]{3,16}$/;

You'll see:

Regex: ^[a-zA-Z0-9_]{3,16}$

Summary:

• Matches the entire string (anchored at both ends)
• Allows letters and numbers
• Allows underscores
• Length constraint: 3 to 16 characters

Breakdown:

Token	Meaning
^	Start of string/line
[a-zA-Z0-9_]	Any of: lowercase letters, uppercase letters, digits, underscore
{3,16}	Between 3 and 16 times
$	End of string/line

Explanation:

This regex validates that the entire input string matches the specified pattern. The pattern contains 0 group(s) for capturing or organizing sub-patterns.

Limitations:

• This regex performs syntactic pattern matching only.
• Validates format and length only, not semantic meaning.

Examples:

• ✓ Matches: User123, test_name
• ✗ Does not match: user@name, name with spaces

---

Regex Explainer Extension By - Piyush

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Regex Explainer"
4. Click Install

From VSIX

1. Download the .vsix file from releases
2. In VS Code, go to Extensions
3. Click the ... menu and select "Install from VSIX..."
4. Select the downloaded file

Configuration

Commands

• Regex Explainer: Toggle On/Off - Toggle the extension on or off

Supported Languages

The extension works with all common programming languages including:

• JavaScript/TypeScript
• Python
• Java
• C#
• C/C++
• Go
• Rust
• Ruby
• PHP
• And many more...

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/your-username/regex-explainer.git
cd regex-explainer

# Install dependencies
npm install

# Compile
npm run compile

# Watch mode
npm run watch

Testing

Press F5 in VS Code to launch the Extension Development Host.

Packaging

# Install vsce if not already installed
npm install -g @vscode/vsce

# Package the extension
npm run package

Architecture

src/
├── extension.ts      # Extension entry point
├── hoverProvider.ts  # VS Code HoverProvider implementation
├── regexDetector.ts  # Regex detection logic
└── regexParser.ts    # Regex parsing and explanation generation

Key Design Decisions

1. No WebView: Uses native VS Code hover tooltips for performance and simplicity
2. Modular Design: Separate modules for detection, parsing, and presentation
3. Non-blocking: Hover provider checks for cancellation tokens to avoid blocking the editor
4. Heuristic Detection: Uses multiple indicators to identify regex patterns in strings
5. Markdown Output: Leverages VS Code's Markdown support for rich formatting

Contributing

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

License

MIT License - see LICENSE for details.

Changelog

1.0.0

• Initial release
• Hover-based regex explanation
• Support for regex literals, string patterns, and RegExp constructor
• Comprehensive breakdown of regex components

Author

Piyush Singh

💡 Found this extension helpful? Consider giving it a ⭐ on the marketplace!

📝 For bug reports or feature requests, please open an issue on GitHub.