Technical Specification: Negative Lookahead RegEx Visualizer

Overview

A high-performance, browser-based utility designed for developers and data engineers to debug and visualize the behavior of negative lookahead assertions (?!...) in Regular Expressions. The app operates entirely client-side, providing instant feedback without server latency.

Core Features

• Real-time Evaluation: RegEx engine updates matches as the user types.
• Lookahead Logic Highlighting: Distinct visual indicators (colors/underlines) for successful matches vs. failed lookahead assertions.
• Match Breakdown: A detailed list showing groups, captures, and assertion results.
• URL State Sharing: Ability to share patterns via encoded URL fragments (stateless functionality).
• Accessibility-First: High contrast ratios, screen-reader friendly text, and keyboard navigation support.

UI/UX Design

• Layout:
  • Header: Minimalist navigation with tool title and a "How it Works" modal trigger.
  • Input Section: Two primary text areas: "Regular Expression" (with monospace font) and "Test String" (multi-line support).
  • Results Section: A card-based display showing the "Matches Found" (highlighted text) and "Explanation" (why a lookahead failed or succeeded).
• Aesthetic:
  • Palette: White (#FFFFFF) background with Slate (#F1F5F9) containers and Indigo (#4F46E5) accents.
  • Typography: Inter or System UI font stack for modern clarity.
  • Transitions: All UI changes (such as displaying match breakdowns) use 200ms ease-in-out CSS transitions for a "buttery" feel.

Technical Constraints & Requirements

• Architecture: Single HTML file (HTML5, Vanilla CSS3, Vanilla ES6+ JS).
• No-Storage Policy: Absolutely no localStorage, sessionStorage, or cookies. Use URLSearchParams for state preservation.
• Iframe Compatibility: Designed to function within a null-origin sandboxed iframe. No alert(), prompt(), or confirm(). Use custom modal components.
• Performance: Debounce keystrokes (300ms) to ensure smooth performance during heavy regex calculations.
• Security: Sanitize all input strings to prevent XSS. Treat input regex as text only.

Implementation Steps

1. Setup: Create a container structure using CSS Flexbox/Grid for responsive flow.
2. Logic: Implement a RegExp instance parser that handles standard capture groups and lookaheads.
3. Visualization: Create a "highlighting engine" that parses the input string, wraps matches in <span> tags with specific CSS classes based on match type (Positive vs. Negative Lookahead check).
4. UX: Build a custom Modal component for documentation and helper text.
5. Sharing: Create an updateURL() function that serializes inputs into a base64 string for URL sharing.