regresar a la lección

Regexp para colores HTML

Escribe una regexp para encontrar colores HTML escritos como #ABCDEF: primero # y luego 6 caracteres hexadecimales.

Un ejemplo de uso:

let regexp = /...tu regexp.../

let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 #12345678";

alert( str.match(regexp) )  // #121212,#AA00ef

P.D. En esta tarea no necesitamos otro formato de color como #123 o rgb(1,2,3), etc.

Necesitamos buscar # seguido de 6 caracteres hexadecimales.

Un carácter hexadecimal se puede describir como [0-9a-fA-F]. O si usamos la bandera i, entonces simplemente [0-9a-f].

Entonces podemos buscar 6 de ellos usando el cuantificador {6}.

Como resultado, tenemos la regexp: /#[a-f0-9]{6}/gi.

let regexp = /#[a-f0-9]{6}/gi;

let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"

alert( str.match(regexp) );  // #121212,#AA00ef

El problema es que también encuentra el color en secuencias más largas:

alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #123456

Para corregir eso, agregamos \b al final:

// color
alert( "#123456".match( /#[a-f0-9]{6}\b/gi ) ); // #123456

// sin color
alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null