RegEx Live Lens

Interactive, real-time Regular Expression (RegEx) simulator and visualizer built right into VS Code. No more context switching to browser-based tools like regex101 or RegExr. Test and build your regular expressions instantly, directly inside your code.

⚡ Features

• Inline Auto-Detection: Instantly recognizes regular expression definitions (JS/TS literals, JS new RegExp objects, Python re.compile, and Go regexp.Compile) in your codebase.
• Visual Hover Explanations: Hovering your cursor over a detected RegEx displays a clean, english breakdown of its key components and a click action to test it.
• CodeLens Triggers: Displays a subtle ⚡ Live Test indicator above matches to quickly pop open the simulator in a split panel beside your code.
• Vibrant Interactive Webview:
  • Live Testing: Type sample text in the editor and watch matches highlight instantly with color-coded identifiers.
  • Interactive Token Explainer: Character-by-character syntax parsing explaining exactly what anchors, character sets, groups, and quantifiers are matching.
  • Capture Groups: Real-time listing of match indexes and contents of capturing groups.
  • Quick Templates (RegEx Builder): One-click injection of common regular expressions (Email, URL, IP Address, Phone, Secure Password, and Dates).
  • Operators Reference: Insert common regex characters at your cursor in one click.
• Sync Back to Editor: Tweak and refine your regex inside the simulator, then click ⚡ Apply to Editor to write the updated expression directly back into your code, formatting it exactly to your original programming language's specification.

🚀 How to Use

1. Place your cursor over any regular expression in your code (e.g. /^[a-zA-Z]+$/gi).
2. Click the ⚡ Live Test CodeLens appearing above the expression, or hover your cursor and click ⚡ Live Test in Lens in the tooltip.
3. The simulator will slide open on the right side.
4. Type sample strings inside the Test String card to watch regular expressions highlight matching sections dynamically.
5. Click Apply to Editor once you've adjusted the expression to save changes back to your source file.

🛠️ Configuration Settings

Customize how RegEx Live Lens behaves inside your VS Code environment:

• regex-live-lens.enableHover: Enable or disable the interactive RegEx hover tooltips (Default: true).
• regex-live-lens.enableCodeLens: Enable or disable the ⚡ Live Test CodeLens overlays (Default: true).

📦 Requirements

• VS Code version 1.80.0 or higher.

Enjoy clean regex writing without leaving your editor! 🚀