zpět k lekci

Regulární výraz pro HTML barvy

Vytvořte regulární výraz, který najde HTML barvy zapsané ve tvaru #ABCDEF: nejprve # a pak 6 hexadecimálních znaků.

Příklad použití:

let rv = /...váš RV.../

let řetězec = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 #12345678";

alert( řetězec.match(rv) )  // #121212,#AA00ef

P.S. V této úloze se nemusíte zabývat jinými formáty barev, např. #123 nebo rgb(1,2,3) atd.

Potřebujeme najít # následované 6 hexadecimálními znaky.

Hexadecimální znak můžeme popsat jako [0-9a-fA-F]. Nebo když použijeme příznak i, stačí nám [0-9a-f].

Pak jich můžeme najít 6 pomocí kvantifikátoru {6}.

Výsledkem bude regulární výraz /#[a-f0-9]{6}/gi.

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

let řetězec = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"

alert( řetězec.match(rv) );  // #121212,#AA00ef

Problém je, že nalezne barvu i v delších posloupnostech:

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

Abychom to opravili, můžeme na konec přidat \b:

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

// toto není barva
alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null