RegexLens: Regex Explainer & Inline Sandbox 🔍

Hover over regular expressions to see plain-English breakdowns, and test regex against sample text in an interactive sandbox with real-time match highlights!
Never leave VS Code to debug regular expressions on external websites again.

🔍 Why RegexLens?

Regular expressions like /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ look like incomprehensible hieroglyphics to 99% of developers. Whenever a regex breaks, developers are forced to copy-paste code into third-party websites like Regex101 to understand what each token does.

RegexLens solves this directly inside VS Code:

• 📖 Instant Hover Explanations: Hover over any regex literal (/pattern/g), new RegExp(), or re.compile() to see a structured, plain-English breakdown of every anchor, character set, quantifier, and group.
• 🧪 Interactive Testing Sandbox: Test patterns against sample text in an embedded side-by-side sandbox with live match pills, group tables, and substitution testing.
• ✨ In-Document Highlighter: Highlight every matching pattern directly inside your open code files with one click.
• 📚 1-Click Preset Library: Instant templates for Email, URL, IPv4, UUID, ISO Dates, and Phone numbers.

🌟 Key Features

1. 🔍 Plain-English Token Breakdown

Hovering over any regex provides an in-depth breakdown:

• ^ ➔ Asserts the start of the line or string
• [a-zA-Z0-9._%+-]+ ➔ Matches one or more characters in the alphanumeric & symbol set
• \. ➔ Matches literal dot '.'
• {2,} ➔ Matches at least 2 repetitions
• $ ➔ Asserts the end of the line or string
• Includes flag explanations (g, i, m, s, u).

2. 🧪 Live Testing Sandbox (Alt + Shift + R)

• Open the interactive sandbox beside your code.
• Real-time match counting and glowing highlight pills.
• Capture Groups Inspector: See $1, $2, and named capture groups separated in a clean data table.
• Substitution / Replacement Playground: Test regex substitutions in real time before writing code!

3. ✨ In-Editor Document Match Highlighting

Want to see every place in your active document that matches a regex? Run "RegexLens: Highlight Regex Matches in Active Document" to highlight every match in bright glowing green.

⌨️ Keyboard Shortcuts & Commands

⚙️ Configuration

Customize RegexLens in VS Code Settings (Ctrl + , / Cmd + ,):

{
  // Show plain-English breakdown on hover
  "regexlens.enableHoverExplanation": true,

  // Highlight color for in-editor regex matches
  "regexlens.highlightColor": "rgba(34, 197, 94, 0.35)"
}

👨‍💻 Author & Connect

Developed with ❤️ by Pirapaakaran Pirathapan.

• 💼 LinkedIn: pirapaakaran-pirathapan
• 🌐 Facebook: pirapaakaranpirathapan

If you find this extension helpful, please consider leaving a ⭐⭐⭐⭐⭐ review on the VS Code Marketplace!

📄 License

MIT License © 2026 Pirapaakaran Pirathapan.