レッスンに戻る

HTML カラーの正規表現

#ABCDEF と書かれた HTML カラーを探す正規表現を作成してください。: 最初に #、次に 6 つの16進数文字です。

使用例:

let reg = /...your regexp.../

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

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

P.S. このタスクでは #123rgb(1,2,3) のような別のフォーマットを考える必要はありません。

#、それに続く6つの16進数文字を探す必要があります。

16進数文字は [0-9a-fA-F] で表現できます。もしくは i フラグを使うと、[0-9a-f] とすることができます。

次に、量指定子 {6} を使い6文字を探すことができます。

結果、正規表現はこのようになります: /#[a-f0-9]{6}/gi.

let reg = /#[a-f0-9]{6}/gi;

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

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

この問題は、より長い一連の色を見つけることです:

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

修正するには、末尾に \b を追加します:

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

// not a color
alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null