I'm trying to mask an input field for a social security number to only show the last 4 digits and mask the rest with an "*". I want the masked number to look something like this
***-**-1234
I have been able to format it to replace all but last 4 with "*" but can't figure out how to additionally add the "-" in the number to follow the ssn format.
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"))
Here's my jsfiddle with what I have so far.
You can use
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}` : ''));
};
Notes:
ssn is longer than 11 chars, just return the first 11 chars.replace(/^(.{1,3})(.{1,2})?(.{1,4})?.*$/, (_,x,y,z) => x + (y ? `-${y}` : '') + (z ? `-${z}` : '') will format the number as expected, two hyphens will be added after the first three chars and after the first five chars (if present).