正则表达式将 SSN 的输入屏蔽为 ***-**-xxxx答案

【问题标题】：Regex to mask input for SSN as ***-**-xxxx正则表达式将 SSN 的输入屏蔽为 ***-**-xxxx
【发布时间】：2021-08-18 21:51:01
【问题描述】：

我正在尝试屏蔽社会安全号码的输入字段，以仅显示最后 4 位数字并用“*”屏蔽其余数字。我希望蒙面数字看起来像这样

***-**-1234

我已经能够格式化它以用“*”替换除最后 4 个之外的所有内容，但不知道如何在数字中额外添加“-”以遵循 ssn 格式。

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

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

const formatSsn = (ssn: string | null | undefined) => {
  return !ssn ? "" : ssn.replace(/[^\d\*]/g, "").replace(/(?=\d{5})\d/, "*");
};

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

这是我的jsfiddle 以及我目前所拥有的。

【问题讨论】：

标签： javascript regex

【解决方案1】：

你可以使用

const formatSsn = (ssn: string | null | undefined) => {
  return !ssn ? "" : ssn.length > 11 ? ssn.substr(0,11) : ssn.replace(/[^\d*]/g, "").replace(/(?=\d{5})\d/, "*")
   .replace(/^(.{1,3})(.{1,2})?(.{1,4})?.*$/, (_,x,y,z) =>
    x + (y ? `-${y}` : '') + (z ? `-${z}` : ''));
};

注意事项：

如果ssn 超过 11 个字符，则只返回前 11 个字符
.replace(/^(.{1,3})(.{1,2})?(.{1,4})?.*$/, (_,x,y,z) => x + (y ? `-${y}` : '') + (z ? `-${z}` : '') 将按预期格式化数字，在前三个字符和前五个字符（如果存在）之后添加两个连字符。

【讨论】：