JavaScript正则校验十六进制颜色值匹配异常问题求助

问题原因 #

• JavaScript的RegExp.test()方法的匹配逻辑是只要目标字符串中存在任意符合正则规则的子串，就会返回true，不需要整个字符串完全匹配。
• 你当前编写的正则[A-F0-9]{3,6}没有添加字符串起始锚点^和结束锚点$，所以只会校验字符串中是否包含连续3~6位符合十六进制规则的字符，不会校验整个字符串的格式。你的测试用例abcxyz开头的abc刚好符合3位十六进制字符的规则，因此返回了不符合预期的true。

正确写法 #

如果要校验整个字符串是否为合法的十六进制颜色值，正则需要增加起止锚点，同时可以按需支持可选的开头#字符，示例如下：

let value = 'abcxyz';
// 若要求颜色值必须带#前缀，去掉#后的?即可
let rex = /^#?[A-F0-9]{3,6}$/i;
let result = rex.test(value);
console.log(`value: '${value}' is a hexidecimal color: ${result}`);
// 输出：value: 'abcxyz' is a hexidecimal color: false

内容的提问来源于stack exchange，提问作者Dev