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

<script setup lang="ts">
import { ref } from 'vue';
import { CfRegexBuilder } from '@chufix-design/vue';
const pattern = ref('\\b([A-Z][a-z]+)\\s(\\d+)');
const flags = ref('g');
const text = ref('Order 1234, Item 9876, Refund 42, Login 7890');
</script>

<template>
  <CfRegexBuilder
    :pattern="pattern"
    :flags="flags"
    :test-text="text"
    @update:pattern="(v) => pattern = v"
    @update:flags="(v) => flags = v"
    @update:test-text="(v) => text = v"
  />
</template>

<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]+

<script setup lang="ts">
import { ref } from 'vue';
import { CfRegexBuilder } from '@chufix-design/vue';
const pattern = ref('([unbalanced');
const flags = ref('g');
const text = ref('试试在上面输入合法的 pattern，比如 [a-z]+');
</script>

<template>
  <CfRegexBuilder
    :pattern="pattern"
    :flags="flags"
    :test-text="text"
    @update:pattern="(v) => pattern = v"
    @update:flags="(v) => flags = v"
    @update:test-text="(v) => text = v"
  />
</template>

<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.