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

RegexBuilder 正则构建器

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

基础用法

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

背景视口

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

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

编译错误

故意输入非法 pattern（如未匹配的方括号），错误信息显示在 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" />
    </>
  );
}

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

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