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

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

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

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

          let regexp = /...ваше выражение.../

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

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

P.S. В рамках этого задания не нужно искать цвета, записанные в иных форматах типа #123 или rgb(1,2,3).

Нам нужно найти символ #, за которым следуют 6 шестнадцатеричных символов.

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

Затем мы можем добавить квантификатор {6}, так как нам нужно 6 таких символов.

В результате наше регулярное выражение получилось таким: /#[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

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

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

Чтобы исправить это, мы можем добавить в конец нашего регулярного выражения \b:

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

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