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

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

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

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

          let regexp = /ваш шаблон/g;

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

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

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

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

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

Используем для этого квантификатор {1,2}, получится /#([a-f0-9]{3}){1,2}/i.

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

В действии:

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

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

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