Cada lenguaje de programación tiene sus beneficios y funciones en un proyecto. Aunque todos ellos tienen una sintaxis distinta, en el mundo de la programación existen conceptos que son globales para los distintos lenguajes de programación. Uno de ellos son las expresiones regulares. En este post, te enseñaremos qué son las expresiones regulares y cómo utilizarlas para determinar los parámetros requeridos en una contraseña.
¿Qué son las expresiones regulares?
Las expresiones regulares son patrones que nos permiten ejecutar búsquedas poderosas en elementos de texto, como podría ser un input de una contraseña. Es decir, podremos usar estos patrones para validar si una cadena de texto cumple determinados criterios.
En nuestro post sobre las 6 acciones a ejecutar sobre un formulario de registro, te hemos comentado que es muy importante validar los parámetros de una contraseña para hacer que sea más segura. Estos parámetros pueden ir desde una longitud mínima hasta características de mayúsculas y símbolos. Para ejecutar esta acción, es fundamental usar expresiones regulares.
También es importante tener en cuenta que estos patrones se encuentran en todos los lenguajes de programación, no son un tema único de JavaScript. Sin embargo, para conocer más sobre las expresiones regulares y su sintaxis, te invitamos a consultar el artículo patterns and flags en la página web javascrip.info, un gran recurso tanto para principiantes como para expertos del desarrollo.
Caracteres especiales en expresiones regulares
Para comprender el uso de expresiones regulares, primero debes entender algunos caracteres especiales clave:
.: representa cualquier caracter, excepto un salto de línea.*: coincide con cero o más repeticiones del carácter anterior.+: coincide con una o más repeticiones del carácter anterior.?: coincide con cero o una repetición del carácter anterior.[]: define un conjunto de caracteres válidos. Por ejemplo,[aeiou]coincidirá con cualquier vocal.[^]: define un conjunto de caracteres no válidos. Por ejemplo,[^0-9]coincidirá con cualquier carácter que no sea un número.\: escapa un carácter especial para que sea tratado literalmente. Por ejemplo,\.coincidirá con un punto literal.
¿Cómo funcionan las expresiones regulares?
Para demostrarte cómo funcionan las expresiones regulares, crearemos una función que nos permitirá validar si una contraseña contiene números y letras mayúsculas y minúsculas en JavaScript.
Para este ejemplo, usaremos el input de contraseña que creamos en nuestro post sobre crear un formulario de registro en HTML, pero podrás ejecutar esta función sobre el nodo HTML que desees. Ten presente que, si estás trabajando para validar contraseñas en un formulario de registro y definir si son iguales, no hará falta seleccionar el input de contraseña y el de repetir contraseña, pues con solo uno sabrás el texto a validar.
El primer paso para usar las expresiones regulares en este contexto será crear una nueva función. En nuestro caso, se llamará passwordMatchRegExp (RegExp es la forma corta de referirnos a una expresión regular).
Ahora, dentro de esta función deberemos insertar nuestra expresión regular. Ten presente que las expresiones regulares siempre van entre barras. A continuación, te mostramos cómo se ve nuestra expresión dentro de la función creada:
passwordMatchRegExp ( ) {
/^ [a-zA-Z0-9]*$/
}La anterior expresión regular nos permite validar si hay caracteres de la a a la z tanto en minúsculas como en mayúsculas. Además, valida si hay presencia de números del 0 al 9.
Ahora, para ejecutar una lógica en función de las validaciones que nos permiten hacer las expresiones regulares, deberíamos guardar nuestros parámetros dentro de una constante. Esto facilitará el proceso de llamar a esta expresión dentro de otro componente, como sería un condicional if.
A continuación, guardamos nuestra expresión en una constante. Como podrás notar, esta expresión deberá declararse dentro de una nueva instancia de la clase RegExp, que recibe como primer parámetro nuestra expresión regular.
const passwordRegExp = new RegExp (/^ [a-zA-Z0-9]*$/)Al ser una clase nativa, no necesitarás importar RegExp en tu archivo para hacer que funcione.
Declarar una nueva instancia de la clase RegExp nos permitirá ejecutar diversos métodos sobre un texto a partir de nuestra expresión. En nuestro caso, usaremos el método test, que nos permitirá pasar un input y validar si cumple con las expresiones de esta instancia de RegExp.
A continuación, te mostramos cómo usamos el método test sobre la instancia de RegExp que hemos guardado para validar un input de contraseña llamado password.
passwordRegExp.test (password)Con la línea de código anterior, obtendremos de vuelta un valor booleano (true o false) que nos dirá si el input pasado por el método cumple o no con la expresión regular instanciada.
A continuación, te mostramos cómo nos quedan las líneas de código finales de la función passwordMatchRegExp:
passwordMatchRegExp (password) {
const passwordRegExp = new RegExp (/^ [a-zA-Z0-9]*$/);
return passwordRegExpo.test (password)
}
Una vez hecha esta función, se podrá usar para definir qué acción ejecutar cuando la contraseña no cumple con los parámetros de esta expresión regular (por ejemplo, una alerta personalizada que comunique el error).
Ahora que sabes qué son las expresiones regulares, seguro que quieres seguir aprendiendo sobre conceptos como este. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás los conceptos, patrones, lenguajes y herramientas fundamentales para la creación y desarrollo de proyectos web. ¿Te animas a seguir aprendiendo con nosotros para convertirte en todo un experto? ¡Inscríbete ya y triunfa en el sector IT!
