以 #abc 或 #abcdef 格式尋找顏色 - 現代 JavaScript 教學

撰寫一個正規表示法，用於比對格式為 #abc 或 #abcdef 的顏色。也就是說：# 後面接 3 或 6 個十六進位數字。

使用範例

          let regexp = /your regexp/g;

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

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

P.S. 這應該是剛好 3 或 6 個十六進位數字。例如 #abcd 等有 4 個數字的值不應比對成功。

用於搜尋 3 位數顏色 #abc 的正規表示法：/#[a-f0-9]{3}/i。

我們可以再加入剛好多 3 個可選的十六進位數字。我們不需要更多或更少。顏色的數字不是 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

這裡有一個小問題：在 #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