Regex Tester Overlay on Selection

WHAT IT DOES This script provides a floating overlay that appears when you select text on any page, allowing you to instantly test regular expressions against that text. Type a regex pattern into the overlay, and it highlights all matches directly on the page, shows the match count, and displays capture group information. The overlay includes flags for case-insensitive (gi), multiline (m), and dot-all (s) matching. A history of recent regex patterns is stored for quick reuse. You can copy match results, clear highlights, and see match indices with capture groups. Perfect for developers, data analysts, and anyone who works with text patterns. WHERE IT RUNS The script works on any web page with selectable text—code editors, documentation sites, log files, JSON responses, and any page containing text. It runs on any website, adapting to each page's structure. The overlay appears when you select text, making regex testing seamless and context-aware. HOW TO USE After installation, select any text on a page. A floating overlay appears near your selection. Type a regex pattern between the slashes and choose flags (gi, m, s). Click "Test" or press Enter to apply the regex. Matches are highlighted directly on the page in a distinctive color. The overlay shows the number of matches, match indices, and capture groups. Click individual match entries to preview them. Use the keyboard shortcut Ctrl+Shift+R to manually trigger the overlay on the current selection. The overlay closes when you click outside it or press Escape. TECHNICAL MECHANISM The script uses a multi-stage regex testing pipeline. First, it captures text selection using the Selection API, detecting when the user selects text and determining the selection's bounding rectangle for overlay positioning. Second, it builds the regex from the user's pattern and flags using the JavaScript RegExp constructor, with error handling for invalid patterns. Third, it executes the regex against the selected text using `exec` in a loop to capture all matches and their positions. Fourth, it highlights matches directly on the page by traversing the DOM within the selection range, wrapping matched text in styled `` elements with background color and capture group labels. Fifth, it displays match results with count, indices, and capture groups. Sixth, it maintains a history of regex patterns in GM_setValue, stored as JSON with timestamps, and renders them as clickable chips in the overlay. The overlay uses pointer-events auto for interactivity while remaining non-intrusive. THE PANEL The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions. PLEASE NOTE This script requires the free BotGentz extension to run. Regex testing is performed entirely in your browser using JavaScript's native RegExp engine. Complex patterns or very large selections may affect performance. The script does not access, store, or transmit any personal data or browsing history. All regex history is stored locally in your browser's userscript storage and never leaves your device.