开发预览更新于 2026-05-10

RegexBuilder 正则构建器

实时编译 + 测试匹配，错误友好提示，flags 用 chip 切换。

基础用法

输入 pattern + 选 flags，实时编译并在 test text 上高亮匹配。若 pattern 编译失败，显示原生 SyntaxError.message。

//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}
/>

编译错误

故意输入非法 pattern（如未匹配的方括号），错误信息显示在 input 下方红框内。

//g

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

匹配 0 处

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

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

<CfRegexBuilder pattern="([unbalanced" />

API

属性	类型	默认值	说明
`pattern`	`string`	`''`
`flags`	`string`	`'g'`	任意子集：`g i m s u y`
`testText`	`string`	`''`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`patternPlaceholder` / `testPlaceholder`

安全：组件内部用 new RegExp()。请勿把不可信用户字符串当 pattern 直接执行 ReDoS 攻击 —— 内部循环上限 5000 命中。