Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

168
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!