Para mí, ha sido de mucha ayuda que el profesor Alberto se arriesga a cometer errores. Y eso es genial…! porque enseña como afrontar esas situaciones y darles solución. Ese conocimiento es realmente muy valioso …!
Introducción a las Expresiones Regulares
Todo lo que aprenderás sobre expresiones regulares
¿Qué son las expresiones regulares?
Aplicaciones de las expresiones regulares
Introducción al lenguaje de expresiones regulares
El lenguaje: caracteres, operadores, y construcciones
El caracter (.)
Las clases predefinidas y construidas
Los delimitadores: +, *, ?
Los contadores {1,4}
El caso de (?) como delimitador
Not (^), su uso y sus peligros
Reto: Filtrando letras en números telefónicos utilizando negaciones
Principio (^) y final de linea ($)
Uso práctico de Expresiones Regulares
Logs
Teléfonos
URLs
Mails
Localizaciones
Nombres(?) Reto
Usos avanzados en Expresiones Regulares
Búsqueda y reemplazo
Expresiones Regulares en lenguajes de programación
Uso de REGEX para descomponer querys GET
Explicación del Proyecto
Perl
PHP
Utilizando PHP en la práctica
Python
Java
Java aplicado
JavaScript
`grep` y `find` desde consola
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How are regular expressions integrated on the frontend with JavaScript?
Regular expressions, while often used in the backend for tasks such as server configuration or data processing, also play a crucial role in the frontend. In particular, JavaScript offers robust capabilities for implementing these expressions, which is vital for data validation and improving user-system interaction. This helps prevent common user errors, often described as "layer 8 errors," those that occur between the keyboard and the chair.
How do I create a simple e-mail validator?
To create an email validator on the frontend, we are going to use a simple HTML document and write JavaScript directly into it, without relying on external libraries such as jQuery. The idea is to use regular expressions to validate that an input value resembles a valid email.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS+ Regex</title> <script>
function validate(str) { // The regular expression could be simple const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+@[a-zA-Z]{2,5}$/; const inputField = document.getElementById('emailInput'); const submitButton = document.getElementById('submitButton');
if (regex.test(str)) { inputField.style.backgroundColor = 'blue'; submitButton.disabled = false; } else { inputField.style.backgroundColor = 'red'; submitButton.disabled = true; } } </script></head></head><body> <input type="text" id="emailInput" onkeyup="validate(this.value)" placeholder="Enter your email"> <button id="submitButton"disabled>Submit</button></body></html></html>What problems can be encountered when using regular expressions in JavaScript?
In JavaScript, regular expressions can break execution unexpectedly if not constructed correctly. It is crucial to remember that:
- Specific syntax: JavaScript may interpret regular expressions slightly differently than other programming languages.
- Expression errors: It is easy to get stuck in a try-and-error loop; therefore, starting with a simple expression and gradually increasing its complexity may be the best strategy.
- Cross-browser issues: The interpretation of expressions can vary between different browsers, so it is vital to test in multiple environments.
How to debug regular expressions in JavaScript?
The debugging process must be methodical:
- Break down the problem: If the regular expression does not work as expected, it may be useful to break it into smaller parts and test each part independently.
- Use of alerts/console.logs: Although it is not recommended to abuse alerts for debugging, they can be useful for testing functionality step by step.
- Case sensitivity adjustments: Some problems can be solved by adjustingcase sensitivity.
With these tools and techniques, you can achieve efficient validation in your frontend web projects without the need for additional heavy libraries. In addition, a well-founded understanding of regular expressions in JavaScript offers valuable technical skills transferable to other programming languages and working environments. Keep experimenting, learning and refining your regular expression mastery to take your frontend functionality to the next level!
Contributions 62
Questions 3
Sort by:
el problema del primer intento:
^[^@_]@[\w\.]{2,}\.[\w]{2,5}$
fue que en la parte de “[^@_]” no agrego si se podía repetir, por lo tanto solo aceptaba correos con un solo carácter antes del “@” agregando corchetes, asterisco o mas, ya aceptaría funcionaria sin problemas:
^[^@_]+@[\w\.]{2,}\.[\w]{2,5}$
^[^@_]*@[\w\.]{2,}\.[\w]{2,5}$
^[^@_]{2,}@[\w\.]{2,}\.[\w]{2,5}$
El problema del minuto 12:00 no es que javascript no permita la cota superior infinita, el problema es que beco tenía la expresión para que antes del arroba tuviera entre 5 y diez caracteres alfanuméricos y a la hora de probar lo hizo con tres. 😉
Genial, sorprendido de ver como el profesor maneja diferentes tipos de lenguajes. Waauuu
Como aclaración la cota superior infinita lo he probado y si funciona en Javascript, según puedo ver en el video, en el segundo “error” lo que pasó fue que a la primera parte del correo se le aumentó el valor de la cota inferior a 5 y el profesor probó con un correo abc@gmail.com por lo que no pasaría la expresión regular
Antes del curso al validar mis formularios me lleva bastante codigo y ahora con expresiones regulares totalmente fenomenal.
Con la expresión regular ya completa para validar todas las formas de Emails y con un diseño algo bonito…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp en JavaScript</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial;
}
input[type="text"] {
font-size: 14px;
width: 250px;
padding: 6px;
color: #598b09;
}
input[type="text"].error {
color: red;
}
.btn{
text-align: center;
background-color: #7dc800;
padding: .6em .8em .8em;
border: none;
color: white;
margin: 5px;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 -.2em rgba(0,0,0,.2);
outline: 0;
transition: .2s;
will-change: transform;
}
.btn:active{
transform: scale(.9);
}
.btn:disabled{
background-color: gray;
transform: initial;
}
</style>
<script>
function Validar(){
var Email = document.getElementById("email").value;
var btn = document.getElementById("btn");
var textbox = document.getElementById("email");
if(Email.match(/^[\w\.\-_\+]{5,30}@[\w\.\-]{3,}\.\w{2,5}$/i)){
btn.disabled = false;
console.log(Email+": Entro")
textbox.classList.remove("error")
}else{
console.log(Email+": NO entro")
textbox.classList.add("error")
}
// console.log(Email);
}
</script>
</head>
<body>
<input type="text" id="email" autocomplete="off" onkeyup="Validar();" />
<input type="button" id="btn" class="btn" value="Enviar" disabled="disabled" />
</body>
</html>
El error inicial era que solo aceptaba un caracter, le falto el “+”.
/^[^@]+@[\w.]{2,}.[\w]{2,5}$/i Así funciona
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>JS + Regex</title>
<script>
function validate(str) {
if(str.match(/^\w{2,10}@[\w.]{2,10}.\w{2,5}$/i)) {
document.getElementById(“boton”).disabled = false;
document.getElementById(“in”).style.backgroundColor = ‘blue’;
} else {
document.getElementById(“in”).style.backgroundColor = ‘red’;
}
console.log(str);
}
</script>
</head>
<body>
<input type=“text” name="email"
onkeyup=“validate(this.value)” id=“in”>
<input type=“button” value=“enviar” disabled id=“boton” onclick=“alert(‘BIEN!!!’)”>
</body>
</html>
Cuando dice “Evitar errores Capa #8”, se refiere a el modelo OSI, que tiene (1-7) y el “#8” seríamos nosotros, los usuarios, quienes cometamos el error (Mas información el el curso de redes)
Hola, quería comentar que el primer error es en la primer parte
de la expresión regular: ^ [^@_]@ … $ donde no se coloca un + o *, pidiendo solo una cosa de esa clase y nada mas.
Luego quería aclarar que JavaScript si permite la cota superior infinita(lo acabo de probar yo), el error es que cuando se prueba con cota infinita se ponen 3 caracteres antes del @ (abc@…) cuando se pedían de 5 a 10, luego cuando se pone cota superior ya se ponen 5 (abcde@…) entonces hace match.
Ver a Beco en 1.25x, es como verlo en un estado alucinógeno 😅
Habitilo o deshabilito el botón “enviar” dependiendo si el correo es válido o no.
Aquí uso los agrupadores, espero les sirva de algún modo.
let str2 = `2018-06-03,South Africa,Madagascar,0,0,COSAFA Cup,Polokwane,South Africa,FALSE`;
function validate2(str){
let regexFut = /^(20\d\d-.*),(.*),(.*),(\d+),(\d+),([\w\s]+),.*$/;
let result = str.match(regexFut);
console.log(`Fecha: ${result[1]}
${result[2]} (${result[4]} - ${result[5]}) ${result[3]}
Torneo: ${result[6]}`);
}
Es comico ver como cada instructor en platzi programa tan distinto
De verdad que un gran profesor dió el curso de Introdución a la terminal y linea de comandos! 😁👍🏼
Áhora hay un nuevo curso pero me gustó más este
function validate(str) {
if (str.match(/^[^@_]+@[\w\.]{2,}\.[\w]{2,5}$/i)) {
//* Validando un email con una expresión regular
document.getElementById("boton").disabled = false
document.getElementById("email").style.backgroundColor = "green"
} else {
document.getElementById("boton").disabled = true
document.getElementById("email").style.backgroundColor = "red"
}
console.log(str)
}
Evaluando con valores true false en una expresión regular más compleja para validar el email
function checkEmail(email) {
console.log(email);
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
var result = re.test(String(email).toLowerCase());
if (result) {
document.getElementById('boton').disabled = false;
document.getElementById('email').style.backgroundColor = 'green';
} else {
document.getElementById('boton').disabled = true;
document.getElementById('email').style.backgroundColor = 'red';
}
console.log(result);
}
Validar número de tarjeta de crédito:
^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$
Validar un código postal:
^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$
Validar dirección IP:
^(([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$
Validar número de telefóno:
^+?\d{1,3}?[- .]?(?(?:\d{2,3}))?[- .]?\d\d\d[- .]?\d\d\d\d$
Codigo de la clase!
<html>
<head>
<title>JS + Regex </title>
<script>
function validate(str){
if(str.match(/^\w{5,10}@[\w\.]{2,10}\.\w{2,5}$/i)){
document.getElementById("boton").disabled = false;
document.getElementById("in").style.backgroundColor="blue";
}else{
document.getElementById("in").style.backgroundColor="red";
}
console.log(str);
}
</script>
</head>
<body>
<input type="text" name="email" onkeyup="validate(this.value)" id="in">
<input type="button" value="enviar" disabled id="boton" onclick="alert('cool')">
</body>
</html>
Se podría utilizar el else para que no se habilite el botón cuando no se cumpla la expresión regular.
function validate(str){
if(str.match(/REGEX/)){
document.getElementById("boton").disabled = false;
console.log(str);
}**else{
document.getElementById("boton").disabled = true;
} **
}
Para utilizar las busquedas encontradas se puede devolver el valor del String.match en una variable. Al hacer console.log allí estarán
function validate(value){
let found_ = [];
if(found_ = value.match(/^([^@_]+)@([\w\.]{2,})(\.[\w]{2,3})$/i)){
console.log(found_);
}
}
La salida para el input [email protected] seria:
['[email protected]', 'nombre.mail', 'mail', '.com', index: 0, input: '[email protected]' ... ]
Así quedo el mío
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegEx</title>
</head>
<body>
<main>
<h1>
Ingresa un correo electronico
</h1>
<div>
<input type="text" id="input">
<button id="validar" onclick="Validate()">Validar</button>
</div>
</main>
<script>
input = document.getElementById("input")
function Validate() {
console.log(input.value);
if (input.value.match(/^[^@.]*@[\w]*\.[\w]{2,}/)) {
alert("listo")
} else {
alert("no")
}
}
</script>
</body>
</html>
const valid = /[a-zA-Z_\.0-9]+@[g-o-h]+[a-z]+\.+\w{3,5}/.test(correo)
test() también es bueno para hacer match con expresiones regulares donde los valores que retorna son true si hay match y false cuando no hay match
Like si encontraste el error en la expresión regular
muy bien ya se como funcionan esos malditos validadores de formularios jaja
/^[^@_]+@[\w\.]{2,}\.[\w]+$/
Es increible la forma de usar las validaciones en FrontEnd para comprobar su funcionamiento en los campos y su boton. Espero a ver las expresiones regulares en una terminal. Saludos
Buen curso de terminal con BECO, lastima que ya lo cambiaron.
Comparto mi ejercicio toma su tiempo pero son poderosas las expresiones regulares.
Me quedo una duda, ¿en Javascript también puedo hacer uso de los grupos?
jajaj error de capa 8 siempre buscar evitarlo, excelente sugerencia del profesor.
### Clases de Caracteres Predefinidas
* `\d`: Coincide con cualquier **dígito** (equivalente a `[0-9]`).
* `\D`: Coincide con cualquier carácter que **no sea un dígito**.
* `\w`: Coincide con cualquier carácter alfanumérico (letras y números, incluyendo el guion bajo).
* `\W`: Coincide con cualquier carácter que **no sea alfanumérico**.
* `\s`: Coincide con cualquier **espacio en blanco** (incluye tabulaciones y saltos de línea).
* `\S`: Coincide con cualquier carácter que **no sea un espacio en blanco**.
Hay un bug en la aplicación móvil, en la pregunta para validar emails, al darle click abre gmail y al regresar el examen ya está cerrado D:
tu error era que decia \[^@\_] esto implica un solo caracter, debias añadir un + para que implique varios caracteres.
Hola, en mi código no se la razón, pero no importa lo que ponga siempre sale Azul (lo que puse para correcto) y nunca sale rojo (lo que puse para incorrecto)
Super útil
https://regexr.com/
Este el codigo de lo que hice espero que a alguien le sirva 😁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Js Regex</title>
<style>
body {
font-family: Arial;
}
input {
font-size: 18px;
padding: 6px;
}
.btn {
cursor: pointer;
border: none;
border-radius: 10px;
padding: 6px 14px;
font-size: 18px;
color: white;
background-color: #43c579;
border-bottom: 5px solid #35b46a;
box-shadow: 3px 3px 10px 0 rgba(65, 65, 65, 0.849);
margin-left: 18px;
transition: 300ms;
}
.btn:active {
transform: scale(.8);
}
.btn:not([disabled]):hover {
transform: scale(1.1);
}
.btn[disabled] {
background-color: #c54343;
border-bottom: 5px solid #b43535;
opacity: .7;
}
</style>
</head>
<body>
<input type="text" id="email" placeholder="Your Email" onkeyup="Validate(this)" autofocus>
<input type="button" id="bt-input" value="submit" class="btn" onclick="correct()" disabled>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
function Validate(input) {
const value = input.value
const bt = input.nextElementSibling
const Match = value.match(/^([a-z]+?[\w\.]{2,})@([\w]{3,}\.[a-z]{2,5})/i)
if (Match) {
console.log(Match[1], " ", Match[2])
bt.disabled = false
input.style.outlineColor = "initial"
return;
}
bt.disabled = true
input.style.outlineColor = "#ff0000"
}
function correct() {
swal({
title: 'Congratulations!',
text: 'This is a correct Email',
icon: 'success',
button: 'Thank\'s'
})
}
</script>
</body>
</html>
psd: Tome la estructura hecha por @lewss
solo modifique un poco los estilos y le agregue mi propia función de validación.
A mi me quedó así
if(str.match(/^\w{2,10}@\w+\.[a-z]{2,3}(\.[a-z]{2})?$/))
{
document.querySelector("[name=enviar]").disabled=false
} else {
document.querySelector("[name=enviar]").disabled=true
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS + Regex</title>
</head>
<body>
<input id="emailField" type="text" name="email" onkeyup="validate(this.value)">
<input id="sendButton" type="button" value="Send" onclick="onClickSendButton()" disabled>
<script>
function validate(email) {
if (email.match(/^\w{5,10}@[\w\.]{2,10}\.\w{2,5}$/i)) {
document.getElementById('emailField').style.backgroundColor = 'green';
document.getElementById('sendButton').disabled = false;
} else {
document.getElementById('emailField').style.backgroundColor = 'red';
document.getElementById('sendButton').disabled = true;
}
}
function onClickSendButton() {
alert('Cool!');
}
</script>
</body>
</html>
Para validar el email
/^(([^<>()\[\]\\.,:\s@"]+(\.[^<>()\[\]\\.,:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
Genial
Siempre había querido aprender y entender la expresiones regulares y les tenia mucho miedo/respeto, pero son (hasta el momento) mas simples de lo que imagine y ahora las entiendo y hasta puedo crearlas xD…
Estoy intentado separar números cada 4 dígitos dentro de un input, tengo esta expresión regular
const numberRE = originalNumber.replace(/\D/g, '').replace(/(?=(\d{4})+(?!\d))/g, ' ');
Pero me pone el espacio de forma errada, ya que cuenta los 4 dijitos de atrás para adelante, un ejemplo es este:
pasa de: 12345 ó 1234567
a: 1 2345 ó 123 4567
y lo que quiero lograr es:
pasar de: 12345 ó 1234567
a: 1234 5 ó 1234 567
Alguien sabe dónde podría estar el error?
Vientos!
<script>
var nombre=‘Prueba de codgo’;
if(nombre.match(/^[^@]+@[\w.]{2,10}.[\w]{2,5}$/i)) {
alert('Pepe ');
} else {
alert(‘Sofia’);
}
</script>
yo hice mi propia expresion para javascript
<code>/^[\w\.]{5,}@\w+\.\w{3,5}(\.\w{2,5})?/i
Excellent this class
Interesante
Mi aporte
$input.addEventListener("input", function(e) {
const {
target: { value }
} = e;
if (value.match(/^[^@.]+[._]?.*@.*\.[\w]{2,5}$/i)) {
$input.style.border = "1px solid green";
$button.disabled = false;
} else {
$input.style.border = "1px solid red";
$button.disabled = true;
}
});
Qué cool el match con cambio de color.
alguien entendió lo que dice al minuto 10:50?
El profe es muy ameno! Excelente curso!
Muy buena clase instructor Alberto, se ve claramente cuando se cumple con la expresión regular al colocar el correo para notificar de inmediato al usuario.
Cool.
cool
Genial
No lo haga pero… Ensaye, Cool pero el profe Beco manejando 5 lenguajes de programacion diferentes, cuando tendre ese nivel.
bonton me suena a nombre de chocolate 🤤
En este sección del curso hubo tanta naturalidad con Beco que me encanto, nos enfatiza en aprender de los errores, no frustrarnos y buscar maneras de solucionarlo 😉
En el minuto 12:10, le faltó añadirle dos letras antes del @
Al código del profesor le agregué una sola línea para que el texto en caso sea correcto cambie a color blanco y sea legible, aquí la línea que agregué:
document.getElementById("in").style.color = 'white';
Y así se ve el código y ejecutando en el navegador:
Want to see more contributions, questions and answers from the community?