如何实现输入数字动态掩码仅保留最后4位，减少冗余if else判断？

核心需求梳理 #

• 数字部分仅保留最后4位明文，其余全部替换为x
• 完全保留输入中原有的空格格式
• 移除原代码中固定长度判断的冗余if else逻辑
• 输入包含英文字母时直接返回null

实现代码 #

function hideMask(num) {
  // 校验是否包含英文字母
  const hasLetter = /[a-zA-Z]/.test(num);
  // 计算输入内容的纯数字总长度
  const pureDigitLength = num.replace(/\D/g, '').length;
  // 非法输入直接返回null：包含字母/纯数字不足4位
  if (hasLetter || pureDigitLength < 4) {
    return null;
  }
  // 匹配所有后方还有至少4个数字的数字，替换为x
  return num.replace(/\d(?=(\D*\d){4})/g, 'x');
}

如果需要兼容原有代码仅支持16/18位数字的限制，只需修改校验条件为if (hasLetter || ![16,18].includes(pureDigitLength))即可，无需额外增加分支。

效果验证 #

以下测试用例完全符合需求场景：

• 输入1234 5678 9123 4414 → 输出xxxx xxxx xxxx 4414
• 输入12345678 8234245 → 输出xxxxxxxx xxx4245
• 输入12 345678911 → 输出xx xxxxx8911

逻辑说明 #

核心使用正则正向预查实现动态匹配，不需要提前判断总长度：

1. 正则\d(?=(\D*\d){4})中，(?=...)是正向预查规则，仅判断当前数字后面是否满足「存在4个数字（中间可穿插任意非数字字符）」的条件，不会改变原字符串的字符顺序和空格位置
2. 只有符合「后面还有至少4个数字」的数字才会被替换为x，最后4位数字和所有空格都会原样保留

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