Regex Tester
A pattern against a test string, with matches highlighted and capture groups listed. Zero-length matches are guarded — `/a*/g` matches empty at every position and hangs a naive exec loop.
src/components/ui/regex-tester.tsxAbout
From the component's own source, where it was written.
A regular expression against a test string, with matches highlighted.
The pattern is compiled in a try/catch and the error is shown as you type. An unfinished pattern is the normal state while typing, so a syntax error is a hint, not a failure — the previous good match set is not thrown away.
Zero-length matches are guarded. /a*\/g matches empty at every position and a naive exec loop over it never terminates; the index is advanced manually when a match consumes nothing. This is the bug in most hand-rolled regex testers.
Named and numbered capture groups are listed per match. A pattern that matches but captures the wrong thing is the failure people actually hit, and a highlight alone cannot show it.
Install
npx astralyx-ui add regex-tester
Usage
import { RegexTester } from '@/components/ui/regex-tester'
<RegexTester pattern={pattern} onPatternChange={setPattern} />Composer
Change the props and the source below follows.
- 0
ada@example.comGroups:1="ada"2="example"user="ada" - 17
marc@northwind.comGroups:1="marc"2="northwind"user="marc" - 49
devon@example.comGroups:1="devon"2="example"user="devon"
<RegexTester pattern={'(?<user>\w+)@(\w+)\.com'} flags="g" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
RegexTester
Extends Omit<ComponentProps<'div'>, 'onChange' | 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | string | — | All three are controlled or uncontrolled independently, so you can pin the pattern and let the test string be edited. |
| onPatternChange | (pattern: string) => void | — | — |
| flags | string | — | All three are controlled or uncontrolled independently, so you can pin the pattern and let the test string be edited. |
| onFlagsChange | (flags: string) => void | — | — |
| input | string | — | All three are controlled or uncontrolled independently, so you can pin the pattern and let the test string be edited. |
| onInputChange | (input: string) => void | — | — |
| patternLabel | ReactNode | 'Pattern' | — |
| flagsLabel | ReactNode | 'Flags' | — |
| inputLabel | ReactNode | 'Test string' | — |
| matchesLabel | ReactNode | 'Matches' | — |
| noMatchLabel | ReactNode | 'No matches' | — |
| groupsLabel | ReactNode | 'Groups' | — |
Types
RegexMatch
A regular expression against a test string, with matches highlighted.
| Field | Type | Description |
|---|---|---|
| index | number | — |
| text | string | — |
| groups | { name: string; value: string }[] | Numbered and named. A pattern that matches but captures the wrong thing is the failure people actually hit, and a highlight cannot show it. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| errors | shown, not thrown | An unfinished pattern is the normal state while typing, so a syntax error is a hint — the previous match set is not discarded. |
| zero-length | guarded | lastIndex is advanced manually — the bug in most hand-rolled regex testers. |