retour au cours

Regexp pour couleurs HTML

Créez une regexp pour trouver les couleurs HTML écrites comme #ABCDEF: d’abord # puis 6 caractères hexadécimaux.

Exemple d’utilisation:

let regexp = /...votre regexp.../

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

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

P.S. Dans cette tâche nous n’avons pas besoin des autres formats de couleur comme #123 ou rgb(1,2,3) etc.

Nous devons chercher # suivi de 6 caractères hexadécimaux.

Un caractère hexadécimal est défini comme [0-9a-fA-F]. Ou si nous utilisons le flag i, juste [0-9a-f].

Nous pouvons ensuite rechercher 6 d’entre eux en utilisant le quantificateur {6}.

Résultat, nous avons 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

Le problème est qu’elle trouve la couleur dans des séquences plus longues:

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

Pour règler ceci nous pouvons ajouter \b à la fin:

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

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