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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 55
Preguntas 3
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}$
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 …!
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.
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 @ ([email protected]…) cuando se pedían de 5 a 10, luego cuando se pone cota superior ya se ponen 5 ([email protected]…) entonces hace match.
<!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>
El error inicial era que solo aceptaba un caracter, le falto el “+”.
/^[^@][email protected][\w.]{2,}.[\w]{2,5}$/i Así funciona
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>
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]}`);
}
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?
Super útil
https://regexr.com/
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]' ... ]
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;
} **
}
Ver a Beco en 1.25x, es como verlo en un estado alucinógeno 😅
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>
Buen curso de terminal con BECO, lastima que ya lo cambiaron.
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$
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
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.
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 = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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);
}
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
}
const valid = /[a-zA-Z_\.0-9][email protected][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
/^[^@_][email protected][\w\.]{2,}\.[\w]+$/
<!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…
function validate(str) {
if (str.match(/^[^@_][email protected][\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)
}
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!
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
<script>
var nombre=‘Prueba de codgo’;
if(nombre.match(/^[^@][email protected][\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
muy bien ya se como funcionan esos malditos validadores de formularios jaja
Like si encontraste el error en la expresión regular
Es comico ver como cada instructor en platzi programa tan distinto
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:
Habitilo o deshabilito el botón “enviar” dependiendo si el correo es válido o no.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.