Angular中逗号分隔字符串匹配正则表达式编写求助

架构老林

2026-10-10

正则实现方案

你原有正则的问题：

[.+?]错误将元字符定义为普通字符集，仅能匹配.、+、?三个字符，和你需要的项匹配规则完全不符
锚点^、$位置错误，放在组内部无法适配多逗号分隔的列表结构
缺失逗号前后的空格匹配逻辑

正确正则写法

你可以直接使用下方的正则，将x替换为你需要的单条子串最大长度即可：

^\s*[a-zA-Z0-9_]{1,x}(?:\s*,\s*[a-zA-Z0-9_]{1,x})*\s*$

规则说明

自动忽略所有逗号前后、字符串首尾的空格
每条子串（去空格后）仅支持大小写字母、数字、下划线，和你给出的示例规则匹配，若要支持其他字符可自行修改[a-zA-Z0-9_]字符集
自动校验每条子串长度在1~x之间，不允许空项

Angular 中使用示例

以响应式表单验证为例，假设你需要限制单条子串最大长度为6：

import { FormControl, Validators } from '@angular/forms';

const MAX_ITEM_LENGTH = 6;
// 动态生成正则
const commaListValidator = Validators.pattern(
  new RegExp(`^\\s*[a-zA-Z0-9_]{1,${MAX_ITEM_LENGTH}}(?:\\s*,\\s*[a-zA-Z0-9_]{1,${MAX_ITEM_LENGTH}})*\\s*$`)
);

// 绑定到表单控件
const yourListControl = new FormControl('', commaListValidator);