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

Найти цвет в формате #abc или #abcdef

Напишите регулярное выражение, которое соответствует цветам в формате #abc или #abcdef. То есть: # и за ним 3 или 6 шестнадцатеричных цифр.

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

let reg = /ваш регэксп/g;

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

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

P.S. Это должно быть ровно 3 или 6 шестнадцатеричных цифр. При этом значения типа #abcd не должны совпадать в результат.

Регулярное выражение для поиска номера цвета из трёх символов #abc: /#[a-f0-9]{3}/i.

Мы можем задать ещё ровно 3 дополнительных шестнадцатеричных цифры. Нам не нужно больше или меньше – в цвете либо 3, либо 6 цифр.

Простейший способ добавить их – добавить в регулярное выражение: /#[a-f0-9]{3}([a-f0-9]{3})?/i

Мы можем сделать это более интересным способом: /#([a-f0-9]{3}){1,2}/i.

Регулярное выражение [a-f0-9]{3} заключено в скобки для корректного применения к нему квантификатора {1,2}.

В действии:

let reg = /#([a-f0-9]{3}){1,2}/gi;

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

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

Здесь есть небольшая проблема: шаблон находит #abc в #abcd. Чтобы предотвратить это, мы можем добавить \b в конец:

let reg = /#([a-f0-9]{3}){1,2}\b/gi;

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

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