レッスンに戻る

HTMLカラーの正規表現

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

使用例

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

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

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

PS このタスクでは#123rgb(1,2,3)などの他のカラー形式は必要ありません。

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

16進数文字として表現できるのは[0-9a-fA-F]です。また、iフラグを使用する場合は[0-9a-f]のみです。

次に、量指定子{6}を使用して6つの16進数文字を探すことができます。

結果として、以下の正規表現が得られます。/#[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を追加できます。

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

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