回到课程
本资料仅提供以下语言版本:English。请 帮助我们 将其翻译为 简体中文 版本。

针对 HTML 颜色的正则表达式

创建一个正则表达式来搜寻格式为 #ABCDEF 的 HTML 颜色值:首个字符 # 以及接下来的六位十六进制字符。

一个例子:

let reg = /...你的正则表达式.../

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) 等。

我们需要寻找 # 字符,后跟六个十六进制字符。

一个十六进制字符可以被描述为 [0-9a-fA-F]。如果我们使用 i 标识,那么只需要 [0-9a-f]

然后我们可以用量词 {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