🛡️ Regex Helper

Explain, score, and safety-check JavaScript/TypeScript RegExp — right inside VS Code.

Regex Helper turns complex JavaScript/TypeScript regular expressions into clear, structured explanations and runs lightweight performance + ReDoS risk checks so you can catch dangerous patterns before they ship.

Table of contents

• Features
• Quick demo
• Supported syntax
• Installation
• Usage
• Configuration
• How it works
• Limitations
• Contributing
• Roadmap
• License

Features

🔍 Plain English explanation on hover

Hover any JS/TS regex literal and get a structured breakdown, including:

• Named and numbered capture groups
• Lookaheads / lookbehinds
• Backreferences
• Character classes & Unicode properties
• Quantifiers (greedy / lazy)
• Flag explanations (g, i, m, s, u, y, d, v)

🛡️ ReDoS security scanner

Warns about patterns that may trigger catastrophic backtracking, including:

• Nested quantifiers like (a+)+, (.*)+, ([\s\S]*)*
• Ambiguous alternations under repetition like (a|aa)+
• Repetition over complex branches

Warnings are surfaced directly in the hover output.

📊 Complexity scoring

Each regex is scored using structural signals (nesting depth, repetitions, alternations, groups, assertions).

Example:

Complexity: 🔴 High (Score: 18)

🎯 Live match highlighting

Place your cursor inside a regex and see matches highlighted in the current document.

Safety guardrails are built in:

• Debounced execution
• Match count limit
• Large document cap (defaults to 50k characters)
• Auto-skip highlighting if the ReDoS scanner flags the regex as risky

Quick demo

Hover over:

/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g

You’ll see an explanation like:

• 📦 Named group year: digits repeated 4 times
• 🔤 Literal -
• 📦 Named group month: digits repeated 2 times
• 🔤 Literal -
• 📦 Named group day: digits repeated 2 times

Supported syntax

Supported now:

• JavaScript/TypeScript regex literals: /pattern/flags
• Modern flags including d (indices) and v (Unicode sets)

Notes:

• u and v cannot be combined in JavaScript.

Installation

1. Open VS Code.
2. Go to Extensions.
3. Search for Regex Helper.
4. Click Install.

Usage

Hover explanation

• Hover your mouse over a regex literal in a .js / .ts / .jsx / .tsx file.

Live highlighting

• Click your cursor inside the regex literal.
• Matches will highlight in the active editor (subject to safety limits).

Configuration

Open Settings → search for Regex Helper.

Suggested settings (names may vary depending on your implementation):

• regexHelper.enableHover: Enable/disable hover explanations
• regexHelper.enableHighlight: Enable/disable match highlighting
• regexHelper.maxDocumentChars: Skip highlighting if document exceeds this size (default 50000)
• regexHelper.maxMatches: Cap the number of matches highlighted (default 500)
• regexHelper.debounceMs: Debounce delay for highlighting (default 150)
• regexHelper.redos.strictMode: Prefer fewer false negatives at the cost of more warnings

How it works

• AST parsing: Uses regexp-tree to parse regex into an AST for deterministic traversal.
• Safe literal extraction: Extracts /pattern/flags without relying on fragile “regex to parse regex” logic.
• Caching: Parsed AST results are cached in-memory to keep hover fast.
• Non-blocking UI: Highlighting is debounced and bounded to avoid editor freezes.

Limitations

• Optimized specifically for JavaScript (ECMAScript) RegExp rules.
• Does not currently analyze new RegExp("...") constructor patterns.
• Does not target non-JS engines (PCRE, .NET, Python re, etc.).
• ReDoS detection is heuristic-based (best-effort) and may produce false positives/negatives.

Contributing

Pull requests are welcome.

1) Prerequisites

• Node.js
• VS Code

2) Install dependencies

npm install

3) Run the extension (dev mode)

1. Open the project in VS Code.
2. Open src/extension.ts.
3. Press F5 to launch Extension Development Host.
4. In the dev host, open a JS/TS file and hover a regex like /^[a-z]+$/g.
5. After edits, reload the dev host with Ctrl+Shift+F5.

4) Package a VSIX

npx @vscode/vsce package

Roadmap

• Analyze RegExp() constructor strings (basic + template literals)
• Stronger ReDoS detection (broader patterns, fewer false negatives)
• More complete AST node translation (Unicode sets, named refs, escapes)
• Workspace-wide scanning command + results panel

License

MIT License