输入框自动补全连字符及退格删除功能的实现优化咨询

需求回顾 #

需要实现格式为 指定字母-[字母/数字]数字串（如AC-123456789）的输入框，要求：

• 输入第二个字符后自动添加连字符（仅一次）
• 第一组首字符为指定字母，第二个字符可字母/数字；第二组仅允许数字
• 退格时可正常删除连字符（如输入AB-后按退格需返回AB）

原代码问题分析 #

你提供的原函数未处理输入末尾为连字符的场景：当输入AB-时，input.replace('-', '').length为2，input[2]是'-'，但原逻辑的else if分支仅在特定条件下截断到前两位，实际输入事件中可能因输入状态未被正确捕获导致连字符无法删除。此外，原代码未做输入合法性过滤（比如第二组输入非数字的情况）。

优化后的函数实现 #

以下是兼顾格式处理、输入验证和退格逻辑的实现：

// 可根据需求修改指定的首字母，比如示例中的'A'
const REQUIRED_FIRST_CHAR = 'A';

const transformInput = (input) => {
  // 1. 过滤非法字符，仅保留字母、数字和单个连字符
  let cleaned = input.toUpperCase().replace(/[^A-Z0-9-]/g, '');
  
  // 2. 确保首字符为指定字母，不符合则清空无效前缀
  if (cleaned.length > 0 && cleaned[0] !== REQUIRED_FIRST_CHAR) {
    cleaned = cleaned.replace(new RegExp(`^[^${REQUIRED_FIRST_CHAR}]`), '');
  }
  
  // 3. 去掉多余连字符，仅保留一个可能的连字符
  cleaned = cleaned.replace(/-+/g, '-');
  
  // 4. 处理格式与第二组数字验证
  const validChars = cleaned.replace('-', '');
  let result = '';
  
  if (validChars.length >= 2) {
    // 拆分前两位和剩余部分，剩余部分仅保留数字
    const firstPart = validChars.slice(0, 2);
    const numPart = validChars.slice(2).replace(/[^0-9]/g, '');
    result = `${firstPart}-${numPart}`;
  } else {
    result = validChars;
  }
  
  // 5. 移除末尾多余的连字符（解决输入`AB-`后按退格的问题）
  return result.replace(/-$/, '');
};

正则简化实现 #

如果偏好正则方案，可使用以下更简洁的版本，同时满足所有需求：

const REQUIRED_FIRST_CHAR = 'A';

const transformInput = (input) => {
  // 清理输入：保留指定首字母、字母/数字、数字，以及单个连字符
  const cleaned = input.toUpperCase()
    .replace(/[^A-Z0-9-]/g, '')
    .replace(new RegExp(`^[^${REQUIRED_FIRST_CHAR}]`), '')
    .replace(/-+/g, '-');

  // 正则匹配并格式化，同时过滤第二组非数字字符
  return cleaned.replace(
    new RegExp(`^(${REQUIRED_FIRST_CHAR}[A-Z0-9])(.*)`),
    (_, firstPart, rest) => `${firstPart}-${rest.replace(/[^0-9]/g, '')}`
  ).replace(/-$/, '');
};

使用方式 #

在输入框的input事件中调用该函数即可实时格式化：

<input 
  type="text" 
  oninput="this.value = transformInput(this.value)" 
  maxlength="12" 
  placeholder="例如：AC-123456789"
/>

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