Регулярное выражение для цвета

вернуться к уроку

Напишите регулярное выражение для поиска HTML-цвета, заданного как #ABCDEF, то есть # и содержит затем 6 шестнадцатеричных символов.

Пример использования:

          var re = /*...ваше регулярное выражение...*/

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

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

Итак, нужно написать выражение для описания цвета, который начинается с «#», за которым следуют 6 шестнадцатеричных символов.

Шестнадцатеричный символ можно описать с помощью [0-9a-fA-F]. Мы можем сократить выражение, используя не чувствительный к регистру шаблон [0-9a-f].

Для его шестикратного повторения мы будем использовать квантификатор {6}.

В итоге, получаем выражение вида /#[a-f0-9]{6}/gi.

var re = /#[a-f0-9]{6}/gi;

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

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

Проблема этого выражения в том, что оно находит цвет и в более длинных последовательностях:

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

Чтобы такого не было, можно добавить в конец \b:

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

// не цвет
alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null