Регулярний вираз для кольорів в 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]. Або, якщо застосувати прапорець i , то запис скоротиться до [0-9a-f].

Далі ми позначимо за допомогою квантифікатора, що нам потрібно саме 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