Tema 4 · Clases

4. Clases de Caracteres, Rangos ([a-z0-9]) y Atajos (\d, \w, \s)

Conjuntos de caracteres [...], rangos alfanuméricos, negación [^...] y clases abreviadas comunes y sus negaciones (\D, \W, \S).

3. Caracteres Literales, Metacaracteres y Escapes Dinámicos 5. Cuantificadores: Codiciosos (Greedy) vs Perezosos (Lazy)

Definición de Clases de Caracteres con Corchetes [...]

Una clase de caracteres le indica al motor de expresiones regulares: "coincide exactamente con uno de los caracteres contenidos dentro de estos corchetes".

  • [aeiou]: Coincide con cualquiera de las vocales en minúscula.
  • [0-9] o [a-z]: El guion - dentro de corchetes define un rango según la tabla ASCII / Unicode.
  • [^0-9]: El acento circunflejo ^ justo al inicio del corchete invierte la clase (negación): coincide con cualquier carácter que no sea un dígito.

Clases Abreviadas (Shorthand Character Classes)

Atajo Equivalente Estándar Significado Opuesto (Negado)
\d [0-9] Cualquier dígito numérico \D (Cualquier no-dígito, [^0-9])
\w [a-zA-Z0-9_] Carácter de palabra (alfanumérico y guion bajo) \W (Símbolos, espacios, signos, [^a-zA-Z0-9_])
\s [ \t\r\n\f] Cualquier espacio en blanco, tabulador o salto de línea \S (Cualquier carácter visible, no-espacio)

⚡ Validador de Colores Hexadecimales y Tokens Alfanuméricos

Utiliza rangos y clases de caracteres abreviadas para verificar códigos hexadecimales de CSS y limpiar identificadores de usuario.

clases-caracteres.js
Solo lectura 
// 1. Validador de Códigos de Color Hexadecimal CSS (#fff o #ffffff)
const patronHex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;

const muestrasColor = ["#ffffff", "#4F46E5", "#abc", "#12", "#zzzzzz", "#000"];

console.log("--- 1. Validación de Colores Hexadecimales ---");
muestrasColor.forEach(color => {
  const esValido = patronHex.test(color);
  console.log(`${color.padEnd(10)} => ${esValido ? "✔ Válido" : "❌ Inválido"}`);
});

// 2. Extracción y Limpieza con Clases Negadas
const inputUsuario = "  Teléfono: +57 (300) 123-4567 Ext. 89  ";

// Eliminamos todo lo que NO sea un dígito (\D)
const soloNumeros = inputUsuario.replace(/\D/g, "");
console.log("\n--- 2. Limpieza de Números de Teléfono ---");
console.log("Entrada original:   ", inputUsuario.trim());
console.log("Solo dígitos (\\D):  ", soloNumeros); // "57300123456789"

// 3. Extracción de palabras clave descartando signos de puntuación
const frase = "¡Hola, mundo! JavaScript ES2024: programación web moderna.";
const palabras = frase.match(/\w+/g);
console.log("\n--- 3. Palabras alfanuméricas con \\w+ ---");
console.log("Tokens extraídos:", palabras);
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Cuál de las siguientes expresiones coincide únicamente con una cadena que contiene exclusivamente caracteres que NO son dígitos?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Regex en JavaScript: Expresiones Regulares & RegExp y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.