レッスンに戻る
このコンテンツはまだ翻訳されていません。 翻訳に協力してください

#abc または #abcdef の形式で色を検索する

形式 #abc または #abcdef で色をマッチする正規表現を書いてください。つまり、# の後に3桁または6桁の16進数が続きます。

使用例:

let reg = /your regexp/g;

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

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

P.S. 正確に 3 または 6 桁の16進数であるべきです。#abcd のような値はマッチしません。

3桁の色 #abc を検索する正規表現は /#[a-f0-9]{3}/i です。

正確に3つの任意の16進数を指定できます。 私たちはそれ以上もそれ以下も必要ではありません。それを持っているか、持っていないかのどちらかです。

それらを追加する最も単純な方法は – 正規表現に追加することです: /#[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 #AA0ef #abc

ここで小さな問題があります: パターンは #abcd の中で #abc を見つけます。これを避けるには、末尾に \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 #AA0ef