Entonces, el código formateado debe verse así:
"US-XXX-12-12345"Así que son dos letras, seguidas de 3 letras/números, seguidas de 2 números, luego seguidas de 5 letras/números. Pude hacerlo funcionar usando solo números con lo siguiente:
return testString .replace(/(\d{2})(\d)/, '$1-$2') .replace(/(\d{3})(\d)/, '$1-$2') .replace(/(\d{2})(\d{2})/, '$1-$2') .replace(/(\d{4})(\d{2})/, '$1-$2')Esto devuelve:
"12-345-67-89012"Intenté cambiar las d minúsculas por mayúsculas (que representan letras) y agrega todo tipo de guiones adicionales y no me permite retroceder. ¡Cualquier ayuda es muy apreciada!
EDITAR: Terminé resolviéndolo así:
const clean = new RegExp(/[^a-zA-Z0-9]/, 'gi') return testString .replace(clean, '') .replace(/([a-zA-Z0-9]{2})([a-zA-Z0-9])/, '$1-$2') .replace(/(-[a-zA-Z0-9]{3})([a-zA-Z0-9])/, '$1-$2') .replace(/(-[a-zA-Z0-9]{3})(-[a-zA-Z0-9]{2})([a-zA-Z0-9])/, '$1$2-$3')Gracias a todos los que intentaron ayudar, realmente lo aprecio <3
Yo usaría una función como esta:
function mask(string, model){ let i = 0; return model.replace(/#/g, () => string[i++] || ""); }usar:
mask("USXXX1212345", "##-###-##-#####") => 'US-XXX-12-12345'el primer parámetro de la función es la cadena que desea formatear, y el siguiente parámetro es cómo se formateará
Esto no es exactamente lo que solicitó, pero regex probablemente no sea la mejor solución para esta pregunta. Una mejor opción probablemente sería usar algo como react-input-mask porque mencionaste usar esto en tiempo real en un formulario de reacción.
import { useState } from "react"; import InputMask from "react-input-mask"; const Example = () => { const [inputText, setInputText] = useState(""); return ( <InputMask mask="aa-***-99-*****" value={inputText} onChange={(e) => setInputText(e.target.value)} /> ); };Y aquí hay un ejemplo de CodeSandbox porque no puedo incrustar un ejemplo funcional en una respuesta SO: https://codesandbox.io/s/react-input-mask-example-554lcn?file=/src/App .js
Si se sabe que la cadena tiene el patrón correcto, puede reemplazar las coincidencias de la siguiente expresión regular con un guión.
(?<=^.{2})|(?<=^.{5})|(?<=^.{7}) Si se permiten letras minúsculas, se debe establecer el indicador de mayúsculas y minúsculas ( i ).
Esta expresión contiene una alternancia compuesta por tres expresiones positivas de mirar hacia atrás . Dice, "haga coincidir la posición que sigue al segundo, quinto o ( | ) séptimo carácter de la cadena. Piense en (?<=^.{2}) como si coincidiera con la ubicación entre el segundo y el tercer carácter de la cadena. Porque no coincide con ningún carácter, se denomina coincidencia de ancho cero .
Si no se sabe que la cadena tiene el patrón correcto, sugiero que primero se compare la cadena con la siguiente expresión regular para confirmar que su patrón es correcto.
^[AZ]{2}[AZ\d]{3}\d{2}[AZ\d]{5}$Esta expresión regular (con el indicador de mayúsculas y minúsculas establecido) se puede desglosar de la siguiente manera.
^ # match the beginning of the string [AZ]{2} # match two letters [AZ\d]{3} # match three letters or digits \d{2} # match two digits [AZ\d]{5} # match five letters or digits $ # match end of stringLa primera expresión regular se puede modificar para confirmar también que la cadena tiene el patrón correcto, pero complica considerablemente la expresión. Si desea ver eso, por favor hágamelo saber.