Tengo un campo de input , que quiero limitar de la siguiente manera:
algunos ejemplos:
1,4,6a,16b
1
abc,def,ghi,jkl,mno,pqr,stu,vwx,yzz
Encontré el siguiente jsfiddle: https://jsfiddle.net/2x8y1dhL/ que proporciona un punto de partida para crear una máscara de entrada, pero asume una cantidad fija de elementos en la lista y una longitud fija de cada entrada.
Lo que quiero es la siguiente lógica:
He trabajado en el jsfiddle que has encontrado . Algunas notas:
El meollo del asunto son las dos funciones createMask y destroyMask :
function createMask(string){
return string.replace(/(\w{3})(?!,)(.+)$/g,"$1,$2");
}
function destroyMask(string){
return string.replace(/[^0-9A-Z,]/ig,'');
}
Actualización 1: Pegar la entrada que tiene más de seis caracteres, es decir, debe dividirse más de una vez, resultó ser problemático con la respuesta original. Se necesita un bucle explícito ya que el modificador g no ayuda con esa expresión regular. Aquí está el violín actualizado :
function createMask(string){
let s = string;
let t;
do {
t = s;
s = s.replace(/(\w{3})(?!,)(.+)$/,"$1,$2");
} while (s !== t)
return s;
}
Actualización 2: Sin embargo, podemos escapar sin un bucle explícito con esta expresión regular alternativa que solo usa una captura única: violín actualizado :
function createMask(string){
return string.replace(/(\w{3})(?!,|$)/g,"$1,");
}
Puede repetir repeticiones opcionales de 3 caracteres de word seguidos de una coma y luego hacer coincidir 3 caracteres de word afirmando un carácter de word a la derecha.
^(?:\w{3},)*\w{3}(?=\w)
Demostración de expresiones regulares | violín bifurcado
En el reemplazo, use la coincidencia completa $& seguida de una coma.
$("input[name='masknumber']").on("input", function(){
let n = destroyMask(this.value);
this.setAttribute("data-normalized", n);
this.value = createMask(n);
})
function createMask(string){
return string.replace(/^(?:\w{3},)*\w{3}(?=\w)/g,"$&,");
}
function destroyMask(string){
return string.replace(/[^0-9A-Z,]/ig,'');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="masknumber" data-normalized="" size=64>
O la demostración de violín con una variante con 2 grupos de captura.