Product Specification: Free Online Regex Tester and Visualizer

Overview

A high-performance, browser-based utility designed to help developers and data analysts build, debug, and visualize regular expressions in real-time. This tool bridges the gap between complex pattern creation and clear, human-readable feedback.

Technical Constraints & Compliance

• Architecture: Single-file HTML5 application (HTML/CSS/JS).
• Storage: No localStorage, sessionStorage, or cookies. All state is held in memory.
• Compatibility: Fully operational within a sandboxed <iframe> with null origin.
• Interaction: No use of alert(), confirm(), or prompt(). All interactive elements are custom-built DOM components.
• Aesthetic: Strictly light-mode, professional SaaS UI utilizing neutral grays and accessible, high-contrast action colors (e.g., Indigo/Blue).

UI/UX Design

Layout Structure

1. Header: Clean, centered title with a brief description of the tool's purpose.
2. Configuration Toolbar: Toggles for regex flags (Global, Case-Insensitive, Multiline, Sticky, Unicode, DotAll). Clearly labeled with tooltips.
3. Input Section:
   • Regex Input (Monospaced font, auto-highlighting syntax).
   • Test String Input (Multi-line text area, scrollable).
4. Visualization & Results:
   • Match Highlights: A mirrored background layer behind the test string that highlights matches in real-time using soft background colors (e.g., light blue for matches, light red for errors).
   • Structure Breakdown: A clean grid showing capture groups and match details.
5. Cheat Sheet (Sidebar/Drawer): A collapsible reference panel explaining common tokens (\d, \w, [a-z], etc.) and quantifiers.

Aesthetics & Styling

• Color Palette: Background #FFFFFF, primary action color #4F46E5, secondary neutral #F3F4F6, border color #E5E7EB, text color #111827.
• Typography: Inter or System Sans-Serif. Monospaced font (Roboto Mono or Courier New) for regex input.
• Transitions: Smooth CSS ease-in-out transitions for all interactive elements (hover states on buttons, modal entry/exit).

Feature List

1. Real-Time Validation: Instant error handling if the regex is malformed (no server round-trip).
2. Visual Syntax Highlights: Dynamic coloring of tokens within the regex input field to distinguish between literals, classes, and quantifiers.
3. Capture Group Highlighting: Ability to inspect nested capture groups when hovering over the regex or the match results.
4. Match Statistics: Instant reporting of total matches, duration of execution, and group breakdown.
5. Interactive Cheat Sheet: Click-to-insert functionality allowing users to select a common pattern from the cheat sheet to instantly append it to the active regex field.
6. Responsive Layout: The interface shifts from a split-pane (side-by-side) desktop view to a stacked vertical mobile view on screens smaller than 768px.

Developer Instructions

• Use standard RegExp objects for evaluation.
• Implement a debounced event listener for text inputs (200ms delay) to ensure performance.
• Use SVG icons for UI elements to maintain a lightweight footprint.
• Do not use external CSS frameworks that require post-processing. Use a single CDN link for Tailwind CSS via <script src="https://cdn.tailwindcss.com"></script> for rapid styling.