Curso javascript nivel medio

Las expresiones regulares (también conocidas como regex) en JavaScript son patrones que se utilizan para buscar y manipular texto de manera eficiente. Son como "plantillas" que te permiten buscar coincidencias dentro de cadenas de texto o realizar reemplazos.

Concepto clave:

Una expresión regular es básicamente una secuencia de caracteres que describe un patrón. Puedes usar ese patrón para encontrar, validar o reemplazar partes de una cadena.

¿Para qué sirven?

  • Buscar coincidencias en una cadena de texto (por ejemplo, buscar todas las veces que aparece una palabra).
  • Validar formatos (como si un correo electrónico tiene el formato correcto).
  • Reemplazar partes del texto (como cambiar ciertas palabras o caracteres).

¿Cómo se usan en JavaScript?

En JavaScript, las expresiones regulares se representan entre dos barras inclinadas / y se pueden usar con métodos como test, match, replace, split, entre otros.

Sintaxis básica:

1const regex = /patrón/;

Métodos más comunes:

  1. test(): Comprueba si una cadena coincide con la expresión regular.

    1const regex = /hola/;
    2const cadena = "hola mundo";
    3console.log(regex.test(cadena));  // true (porque "hola" está en la cadena)
    Salida de Consola!:
    true
  2. match(): Busca coincidencias en una cadena y devuelve las coincidencias encontradas.

    1const regex = /hola/;
    2const cadena = "hola hola hola";
    3console.log(cadena.match(regex));  // ["hola"] (la primera coincidencia)
    Salida de Consola!:
    [ 'hola', index: 0, input: 'hola hola hola', groups: undefined ]
  3. replace(): Reemplaza el texto que coincide con el patrón en una cadena.

    1const regex = /hola/;
    2const cadena = "hola mundo";
    3console.log(cadena.replace(regex, "adiós"));  // "adiós mundo"
    Salida de Consola!:
    adiós mundo

Caracteres especiales en expresiones regulares:

Las expresiones regulares tienen ciertos caracteres especiales que permiten crear patrones más poderosos:

  1. . (punto): Representa cualquier carácter.

    1const regex = /h.la/;
    2console.log(/hola/.test("hola")); // true
    3console.log(/h.la/.test("hila")); // true
    Salida de Consola!:
    true
    true
  2. \d: Representa cualquier número (0-9).

    1const regex = /\d/;
    2console.log(/\d/.test("2023"));  // true (porque contiene números)
    3console.log(/\d/.test("abc"));  // false (no hay números)
    Salida de Consola!:
    true
    false
  3. \w: Representa cualquier carácter alfanumérico (letras o números).

    1const regex = /\w/;
    2console.log(/\w/.test("abc123")); // true
    Salida de Consola!:
    true
  4. \s: Representa cualquier espacio en blanco.

    1const regex = /\s/;
    2console.log(/\s/.test("hola mundo")); // true (hay un espacio entre las palabras)
    Salida de Consola!:
    true
  5. +: Indica que el carácter o conjunto anterior aparece una o más veces.

    1const regex = /ho+la/;
    2console.log(/ho+la/.test("hola")); // true
    3console.log(/ho+la/.test("hooola")); // true
    Salida de Consola!:
    true
    true
  6. ** \ **: Escapa caracteres especiales para tratarlos como texto literal.

    1const regex = /\./;  // busca literalmente el punto "."
    2console.log(/\./.test("a.b.c"));  // true
    Salida de Consola!:
    true
  7. ^ y $: ^ indica el inicio de una cadena, y $ indica el final.

    • ^abc coincide con cadenas que comienzan con "abc".
    • abc$ coincide con cadenas que terminan con "abc".
    1const regexInicio = /^hola/;
    2console.log(regexInicio.test("hola mundo")); // true
    3console.log(regexInicio.test("mundo hola")); // false
    Salida de Consola!:
    true
    false
    1const regexFin = /mundo$/;
    2console.log(regexFin.test("hola mundo")); // true
    Salida de Consola!:
    true

Ejemplos comunes de uso:

  1. Validar un correo electrónico:

    1const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    2console.log(emailRegex.test("ejemplo@mail.com"));  // true
    3console.log(emailRegex.test("mail.com"));  // false
    Salida de Consola!:
    true
    false
  2. Validar un número de teléfono:

    1const telefonoRegex = /^\d{3}-\d{3}-\d{4}$/;
    2console.log(telefonoRegex.test("123-456-7890"));  // true
    3console.log(telefonoRegex.test("1234567890"));  // false
    Salida de Consola!:
    true
    false
  3. Encontrar todas las palabras en un texto:

    1const texto = "Hola mundo, como estas?";
    2const regex = /\w+/g;  // \w+ busca palabras
    3console.log(texto.match(regex));  // [ 'Hola', 'mundo', 'como', 'estas' ]
    Salida de Consola!:
    [ 'Hola', 'mundo', 'como', 'estas' ]

Resumen:

  • Las expresiones regulares son patrones que te permiten buscar, validar y manipular texto.
  • Métodos clave: test(), match(), replace().
  • Utilizan caracteres especiales (como \d, . o +) para definir patrones más complejos.
  • Son útiles para tareas comunes como la validación de formularios, el procesamiento de cadenas, y la búsqueda de texto.

Aunque al principio pueden parecer complicadas, las expresiones regulares son extremadamente poderosas una vez que las entiendes.

  • Loading...
  • Objetivo:

    Crea una función llamada obtenerHref que acepte una cadena de texto que contenga un enlace HTML y devuelva el valor del atributo href.

    Instrucciones:

    1. Usa una expresión regular para extraer el valor del atributo href de la etiqueta <a>.
    2. Devuelve el valor extraído.
    3. En caso de no encontar nada devolverá null.

    Ejemplo:

    Ir a google ===> www.google.es

    Loading...