レッスンに戻る

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

#abc または #abcdef 形式の色に一致する正規表現を作成してください。つまり、 # の後に 3 つまたは 6 つの 16 進数の桁が続きます。

使用例

let regexp = /your regexp/g;

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

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

追伸これは正確に 3 つまたは 6 つの 16 進数の桁でなければなりません。#abcd などの 4 桁の値は一致しないようにしてください。

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

正確に 3 つ以上のオプションの 16 進数の桁を追加できます。それ以上でもそれ以下でも必要ありません。色は 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

ここで 1 つ問題があります。パターンが #abcd 内に #abc を見つけました。それを回避するために、最後に \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