Estoy tratando de enmascarar un campo de entrada para un número de seguro social para mostrar solo los últimos 4 dígitos y enmascarar el resto con un "*". Quiero que el número enmascarado se vea así
***-**-1234Pude formatearlo para reemplazar todos menos los últimos 4 con "*", pero no sé cómo agregar adicionalmente el "-" en el número para seguir el formato 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"))Aquí está mi jsfiddle con lo que tengo hasta ahora.
Puedes usar
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}` : '')); };Notas :
ssn tiene más de 11 caracteres, simplemente devuelva los primeros 11 caracteres.replace(/^(.{1,3})(.{1,2})?(.{1,4})?.*$/, (_,x,y,z) => x + (y ? `-${y}` : '') + (z ? `-${z}` : '') formateará el número como se esperaba, se agregarán dos guiones después de los primeros tres caracteres y después de los primeros cinco caracteres (si están presentes).