Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

177
Vistas
expresiones regulares para máscara de entrada: lista separada por comas de hasta tres caracteres por elemento

Tengo un campo de input , que quiero limitar de la siguiente manera:

  1. La entrada será una lista separada por comas
  2. Cada cadena en la lista debe estar limitada a 1..3 caracteres
  3. La lista puede tener tantos elementos como el usuario quiera

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:

  • después de que el usuario ingresa el tercer carácter en una fila que no es una coma, se inserta una coma automáticamente
almost 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

He trabajado en el jsfiddle que has encontrado . Algunas notas:

  • No ha especificado caracteres válidos/no válidos, pero los ejemplos dados parecen sugerir "alfanumérico más coma"
  • Se permiten comas consecutivas ya que no se especifica lo contrario.

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,");
}
almost 4 years ago · Santiago Trujillo Denunciar

0

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.

almost 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda