Preview Updated 2026-05-10

Regex builder

Live compile + match testing with friendly error messages; flags toggled via chips.

Basic usage

Type a pattern, pick flags, and matches in the test text are highlighted live. If the pattern fails to compile, the native SyntaxError.message is shown.

//g

匹配 4 处

Order 1234, Item 9876, Refund 42, Login 7890

<CfRegexBuilder
:pattern="pattern"
:flags="flags"
:test-text="text"
@update:pattern="setPattern"
@update:flags="setFlags"
@update:test-text="setText"
/>

<CfRegexBuilder
pattern={pattern}
onPatternChange={setPattern}
flags={flags}
onFlagsChange={setFlags}
testText={text}
onTestTextChange={setText}
/>

Compile errors

Intentionally enter an invalid pattern (e.g. an unbalanced bracket) and the error message renders in a red box below the input.

//g

正则编译错误：Invalid regular expression: /([unbalanced/g: Unterminated character class

匹配 0 处

试试在上面输入合法的 pattern，比如 [a-z]+

<CfRegexBuilder :pattern="'([unbalanced'" />

<CfRegexBuilder pattern="([unbalanced" />

API

Prop	Type	Default	Description
`pattern`	`string`	`''`
`flags`	`string`	`'g'`	Any subset of: `g i m s u y`
`testText`	`string`	`''`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`patternPlaceholder` / `testPlaceholder`

Safety: the component uses new RegExp() internally. Don’t run untrusted user strings as patterns — ReDoS attacks are possible. The internal match loop is capped at 5000 hits.