Encuentra el color en el formato #abc o #abcdef

regresar a la lección

Escriba una expresión regular que haga coincidir los colores en el formato #abc o #abcdef. Esto es: # seguido por 3 o 6 dígitos hexadecimales.

Ejemplo del uso:

          let regexp = /your regexp/g;

let str = "color: #3f3; background-color: #AA00ef; and: #abcd";

alert( str.match(regexp) ); // #3f3 #AA00ef

P.D. Esto debe ser exactamente 3 o 6 dígitos hexadecimales. Valores con 4 dígitos, tales como #abcd, no deben coincidir.

Una expresión regular para buscar colores de 3 dígitos #abc: /#[a-f0-9]{3}/i.

Podemos agregar exactamente 3 dígitos hexadecimales opcionales más. No necesitamos más ni menos. El color tiene 3 o 6 dígitos.

Utilicemos el cuantificador {1,2} para esto: llegaremos a /#([a-f0-9]{3}){1,2}/i.

Aquí el patrón [a-f0-9]{3} está rodeado en paréntesis para aplicar el cuantificador {1,2}.

En acción:

let regexp = /#([a-f0-9]{3}){1,2}/gi;

let str = "color: #3f3; background-color: #AA00ef; and: #abcd";

alert( str.match(regexp) ); // #3f3 #AA00ef #abc

Hay un pequeño problema aquí: el patrón encontrado #abc en #abcd. Para prevenir esto podemos agregar \b al final:

let regexp = /#([a-f0-9]{3}){1,2}\b/gi;

let str = "color: #3f3; background-color: #AA00ef; and: #abcd";

alert( str.match(regexp) ); // #3f3 #AA00ef