如何用正则实现SSN输入框掩码，格式化为***-**-xxxx仅展示后四位

解决方案 #

你需要调整formatSsn的处理逻辑，同时修改输入框onChange的赋值逻辑，避免掩码和分隔符污染存储的原始值：

核心逻辑说明 #

1. 存储层仅保留纯数字的SSN原始值，方便后续业务使用
2. 格式化时先对纯数字做掩码处理，仅保留最后4位，其余替换为*
3. 按长度动态插入分隔符-，适配实时输入的展示效果

完整修改后代码 #

const TestComp = () => {
    const [ssn, setSsn] = React.useState(""); 

    return (
    <div>
      <input 
        type="text" 
        value={formatSsn(ssn)} 
        onChange={ e => setSsn(e.target.value.replace(/\D/g, ""))}
      />
    </div>
  )
}

const formatSsn = (ssn: string | null | undefined) => {
  if (!ssn) return "";
  // 仅保留数字原始值
  const cleanNum = ssn.replace(/\D/g, "");
  // 生成掩码，仅保留最后4位
  const maskedStr = cleanNum.length > 4 
    ? "*".repeat(cleanNum.length - 4) + cleanNum.slice(-4)
    : cleanNum;
  // 按SSN规则插入分隔符
  if (maskedStr.length <= 3) return maskedStr;
  if (maskedStr.length <= 5) return `${maskedStr.slice(0,3)}-${maskedStr.slice(3)}`;
  return `${maskedStr.slice(0,3)}-${maskedStr.slice(3,5)}-${maskedStr.slice(5)}`;
};

ReactDOM.render(<TestComp />, document.querySelector("#app"))

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