正则提取横杠/下划线分隔字符串中目标数字的实现方案咨询

规则说明 #

• 优先提取横杠（-）或下划线（_）两个分隔符之间的连续数字段
• 不存在被两个分隔符包裹的数字段时，提取分隔符后片段中的连续数字
• 字符串无分隔符且本身为纯数字时，直接返回该数字
• 仅调整「Display Name」对应TextField组件的取值逻辑，原始输入值绑定至「Name」输入框，原有全量提取字符串所有数字的逻辑不符合规则要求

验证用例 #

• 输入：AB2C_192_A9，预期输出：192
• 输入：AB2C-192_A9，预期输出：192
• 输入：AB2C-192-A9，预期输出：192
• 输入：AB2C-192，预期输出：192
• 输入：192，预期输出：192
• 输入：ABC_192Z，预期输出：192

原有问题代码 #

原有实现直接提取所有数字拼接，无法匹配优先级规则：

<TextField
  disabled
  label="Display Name"
  variant="outlined"
  value={value && value?.match(/\d+/g)?.join("")}
/>

修复后代码 #

按规则优先级分层匹配即可满足所有用例：

// 按规则提取展示名称
const formatDisplayName = (inputVal) => {
  if (!inputVal) return "";
  // 第一优先级：取两个分隔符中间的连续数字
  const betweenSepNum = inputVal.match(/[-_](\d+)[-_]/);
  if (betweenSepNum) return betweenSepNum[1];
  // 第二优先级：取分隔符后出现的连续数字
  const afterSepNum = inputVal.match(/[-_](\d+)/);
  if (afterSepNum) return afterSepNum[1];
  // 第三优先级：无分隔符且全为数字直接返回
  if (/^\d+$/.test(inputVal)) return inputVal;
  return "";
};

<TextField
  disabled
  label="Display Name"
  variant="outlined"
  value={formatDisplayName(value)}
/>

内容的提问来源于stack exchange，提问作者John