Como programadores, a menudo nos encontramos con el desafío de manejar datos de entrada de usuarios en formularios web o de extraer información relevante de grandes bloques de texto. En estos escenarios, las expresiones regulares en JavaScript emergen como una herramienta poderosa y versátil. En este artículo, exploraremos cómo aprovechar estas expresiones para validar datos de formularios y para extraer información de texto de manera eficiente.
Vamos a comenzar con la parte de validar los datos de un formulario con expresiones javascript y luego veremos como se pueden usar las expresiones regulares para otros propósitos.
Validación de datos de formularios con Javacript
Imagina que estás desarrollando una aplicación web y necesitas asegurarte de que los usuarios ingresen datos válidos en un formulario. Aquí es donde podrían entrar en juego las expresiones regulares.
Si no recuerdas lo que son las expresiones regulares aquí tienes un artículo donde se explica una introducción a las expresiones regulares.
Veamos un ejemplo de cómo validar un campo de email usando expresiones regulares en JavaScript:
//definición de expresión regular
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
//función que valida el email
function validarCorreo(correo) {
return emailRegex.test(correo);
}
const correoValido = validarCorreo("usuario@example.com");
console.log(correoValido); // Devuelve true
En este ejemplo, la expresión regular ^[^\s@]+@[^\s@]+\.[^\s@]+$ garantiza que el correo electrónico tenga el formato correcto. Aquí hay una explicación de la expresión regular:
^: Coincide con el inicio de la cadena.[^\s@]+: Coincide con uno o más caracteres que no sean espacios en blanco ni el símbolo «@».@: Coincide con el símbolo «@».[^\s@]+: Coincide con uno o más caracteres que no sean espacios en blanco ni el símbolo «@».\.: Coincide con el símbolo «.» (nota que se escapa con\).[^\s@]+$: Coincide con uno o más caracteres que no sean espacios en blanco ni el símbolo «@» hasta el final de la cadena$.
La función test() de JavaScript comprueba si el correo electrónico proporcionado coincide con la expresión regular, devolviendo true si es así y false si no.
Un ejemplo completo de validación de formulario
En este caso el formulario es sencillo y solo tendrá usuario y contraseña:
- El usuario debe tener entre 5 y 15 caracteres
- La contraseña debe tener letras mayúsculas, minúsculas y al menos un número, y como mínimo la contraseña debe tener 5 caracteres de longitud
Código index.html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Registro de Usuario</h2>
<form id="registroForm" onsubmit="return validarFormulario()">
<div class="form-group">
<label for="usuario">Usuario:</label>
<input type="text" id="usuario" name="usuario" required>
</div>
<div class="form-group">
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Registrarse</button>
</form>
<div id="mensajeError" class="error"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error {
color: #ff0000;
margin-top: 10px;
}
JavaScript (script.js):
function validarFormulario() {
var usuarioInput = document.getElementById('usuario');
var passwordInput = document.getElementById('password');
var mensajeError = document.getElementById('mensajeError');
// Expresiones regulares
var usuarioRegex = /^[a-zA-Z0-9_-]{5,15}$/;
var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{5,}$/;
if (!usuarioRegex.test(usuarioInput.value)) {
mensajeError.innerText = "El usuario debe tener entre 5 y 15 caracteres y puede contener letras, números, guiones bajos (_) o guiones medios (-).";
return false;
}
if (!passwordRegex.test(passwordInput.value)) {
mensajeError.innerText = "La contraseña debe tener al menos 5 caracteres, una letra mayúscula, una letra minúscula y un número.";
return false;
}
// Si la validación pasa, no mostrar mensaje de error y permitir el envío del formulario
mensajeError.innerText = "";
return true;
}
Otro ejemplo de uso de expresiones regulares con Javascript
Otro escenario común es la necesidad de extraer información específica de un bloque de texto. Por ejemplo, supongamos que tienes un texto que contiene números de teléfono y quieres extraerlos. Veamos cómo podemos lograr esto utilizando expresiones regulares en JavaScript:
const texto = "Mi número de teléfono es 123-456-7890 y mi otro número es 987-654-3210.";
//expresión regular
const telefonoRegex = /\b\d{3}-\d{3}-\d{4}\b/g;
//ejecutamos expresión regular
const numerosTelefonicos = texto.match(telefonoRegex);
//mostrar resultado
console.log(numerosTelefonicos); //["123-456-7890", "987-654-3210"]
En este ejemplo, la expresión regular \b\d{3}-\d{3}-\d{4}\b coincide con los números de teléfono en el formato XXX-XXX-XXXX, donde \b denota un límite de palabra, \d coincide con un dígito y {3} especifica que se esperan tres dígitos consecutivos. El guion - se incluye literalmente entre los grupos de tres dígitos.
La bandera g al final de la expresión regular indica que la búsqueda debe ser global, lo que significa que encontrará todas las coincidencias en lugar de detenerse después de la primera.