Aquí está mi código React que puede hacer la conversión, pero necesito un poco de modificación en el enfoque actual. La conversión debería ser a medida que sigo escribiendo.
A continuación se muestra mi código actual....
import React, { useEffect, useState } from 'react'; import './styles.css'; export default function App() { const [keyword, setKeyword] = useState(''); const formatInput = (e) => { setKeyword(e.target.value); }; const normalize = (keyword) => { if (keyword.length <= 13) { setKeyword(keyword.replace(/([AZ]{2})([AZ]{3})(\d{6}$)/, '$1-$2-$3')); } return null; }; useEffect(() => { normalize(keyword); }); return ( <div className="App"> <input type="text" placeholder="enter string" onChange={formatInput} /> {keyword} </div> ); } // DL-HGK-123456La salida esperada debe ser la siguiente...
Por ejemplo:
DLHGK para ser convertido a Dl-HGK
DLHGK12 para convertir a DL-HGK-12
como cuando estamos escribiendo la entrada en nuestro cuadro de entrada.
Gracias por la ayuda.
Puedes usar
keyword.replace(/[^AZ\d]+/g,'') // Remove any non-alphanumeric entered .replace(/^([AZ\d]{11}).*/, '$1') // Keep only 2+3+6=11 max chars .replace(/^([AZ]{2})([AZ]{1,3})?(\d{1,6})?$/, (_,x,y,z) => z ? `${x}-${y}-${z}` : y ? `${x}-${y}` : x ); // Format the output La expresión regular principal es ^([AZ]{2})([AZ]{1,3})?(\d{1,6})?$ :
^ - comienzo de la cadena([AZ]{2}) - Grupo 1: dos letras mayúsculas([AZ]{1,3})? - Grupo 2 (opcional): de una a tres letras mayúsculas(\d{1,6})? - - Grupo 3 (opcional): de uno a seis dígitos$ - final de la cadena.Vea la demostración de JavaScript:
const rx = /^([AZ]{2})([AZ]{1,3})?(\d{1,6})?$/; $('body').on('input', '.demo', function(e) { this.value = this.value.replace(/[^AZ\d]+/g,'') .replace(/^([AZ\d]{11}).*/, '$1') .replace(rx, (_,x,y,z) => z ? `${x}-${y}-${z}` : y ? `${x}-${y}` : x ); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="demo" maxlength=13> Tenga en cuenta que la maxlength se establece en 13 aquí, 11 caracteres + 2 guiones.