返回课程

HTML 颜色正则表达式

创建一个正则表达式来搜索以 #ABCDEF 格式编写的 HTML 颜色:第一个是 #,然后是 6 个十六进制字符。

使用示例

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

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

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

P.S. 在此任务中,我们不需要其他颜色格式,例如 #123rgb(1,2,3) 等。

我们需要查找 # 后面跟着 6 个十六进制字符。

十六进制字符可以描述为 [0-9a-fA-F]。或者,如果我们使用 i 标志,则只需使用 [0-9a-f]

然后我们可以使用量词 {6} 查找其中的 6 个。

因此,我们得到正则表达式:/#[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