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

src/App.vue

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

<script setup>
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>

import { useState } from 'react';
import { CfRegexBuilder } from '@chufix-design/react';

export default function Demo() {
  const [pattern, setPattern] = useState('\\b([A-Z][a-z]+)\\s(\\d+)');
  const [flags, setFlags] = useState('g');
  const [text, setText] = useState('Order 1234, Item 9876, Refund 42, Login 7890');
  return (
    <>
      <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]+

src/App.vue

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

<script setup>
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>

import { CfRegexBuilder } from '@chufix-design/react';

export default function Demo() {
  const pattern = '([unbalanced';
  return (
    <>
      <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.