Trovate un colore nel formato #abc o #abcdef

torna alle lezioni

Scrivete un’espressione regolare che trovi i colori nel formato #abc o #abcdef. In altre parole: # seguito da 3 o 6 cifre esadecimali.

Esempio d’uso:

          let regexp = /your regexp/g;

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

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

P.S. Dovrebbe trovare esattamente 3 o 6 cifre esadecimali. I valori con 4 cifre, come #abcd, non dovrebbero dar luogo a corrispondenza.

L’espressione regolare per cercare il codice di un colore di 3 cifre #abc è : /#[a-f0-9]{3}/i.

Possiamo aggiungere esattamente 3 ulteriori cifre esadecimali opzionali. Non abbiamo bisogno di altro. Il codice di un colore è composto da 3 o 6 cifre.

Usiamo il quantificatore {1,2} a questo scopo: avremo /#([a-f0-9]{3}){1,2}/i.

In questo caso il pattern [a-f0-9]{3} è racchiuso tra parentesi per applicare ad esso il quantificatore {1,2}.

Eccolo in azione:

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

C’è un piccolo problema adesso: il pattern #abc trovato in #abcd. Per evitarlo possiamo aggiungere \b alla fine:

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