Online Regular Expression Text Find and Replace Utility

A professional-grade, client-side web application designed to help developers and content editors manipulate text using Regular Expressions (Regex). The tool focuses on privacy, speed, and ease of use, running entirely within the user's browser.

Core Layout & UI Structure

• Dual-Pane Editor: Split-view layout (side-by-side on desktop, stacked on mobile) with a "Source Input" pane and a "Processed Output" pane.
• Control Panel: A persistent header or sidebar area containing the Regex input field, Replacement string field, and Flag toggles.
• Syntax Highlighting: Real-time highlighting of regex patterns in the input text to show what will be replaced before execution.
• Theme Support: Includes a "Developer Dark Mode" and "High Contrast Light Mode" for accessibility.

Interactive Features

1. Real-time Regex Evaluation: The output updates instantly as the user types, providing immediate visual feedback.
2. Regex Flag Configuration: Checkboxes for Global (g), Case-Insensitive (i), Multiline (m), and Sticky (y) flags.
3. Match Visualization: The source pane highlights all matches found in a distinct color (e.g., yellow) and the current match being replaced in a bolder color (e.g., orange).
4. Capture Group Support: Full support for standard replacement patterns like $1, $2, and $n.
5. Regex Library: A dropdown menu containing common, pre-written patterns (e.g., "Remove HTML Tags", "Extract Email Addresses", "Format Dates", "Remove Whitespace").
6. Export & Copy: One-click "Copy to Clipboard" for the result, and "Download as .txt" functionality.
7. Undo/Redo Stack: Browser-integrated history to revert changes to the regex or input text.
8. Error Handling: Non-blocking alerts if an invalid regex pattern is entered (e.g., "Unbalanced parenthesis"), providing helpful syntax suggestions.

Technical Requirements

• Client-Side Only: Implementation via native Web APIs (JavaScript Regex engine, Blob for file downloads).
• Responsive Design: Mobile-first architecture using Flexbox and Grid.
• Performance: Use of debounced input handling (300ms) to ensure smooth performance during heavy regex operations on large text blocks.
• No-Framework Preference: Built with clean, vanilla TypeScript or minimal modern framework components for instant load times.

Color Palette

• Primary: Slate Blue (#4A6FA5) for primary action buttons.
• Background: Soft Gray (#F4F7F6) for UI, White for input areas.
• Accents: Amber (#FFBF00) for highlighting matches, Emerald (#10B981) for success states, Crimson (#DC2626) for error states.