如何检查字符串是否是有效的十六进制颜色表示？

Question

例如:

AA33FF =有效的十六进制颜色

Z34FF9 =无效的十六进制颜色(其中包含Z)

AA33FF11 =无效的十六进制颜色(有额外的字符)

Answer 1

/^#[0-9A-F]{6}$/i.test('#AABBCC')

详细说明:

^ ->匹配开始
# ->哈希
[0-9A-F] ->任何来自af的字母和0-9
{6} ->前一组恰好出现6次
$ ->匹配结束
i ->忽略情况

更先进的:

/^#([0-9A-F]{3}){1,2}$/i.test('#ABC')

Answer 2

// regular function
function isHexColor (hex) {
  return typeof hex === 'string'
      && hex.length === 6
      && !isNaN(Number('0x' + hex))
}

// or as arrow function (ES6+)
isHexColor = hex => typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex))

console.log(isHexColor('AABBCC'))   // true
console.log(isHexColor('AABBCC11')) // false
console.log(isHexColor('XXBBCC'))   // false
console.log(isHexColor('AAXXCC'))   // false

编辑:请参阅下面@SalvadorDali的评论,在某些情况下有误报.而是使用其他解决方案

Answer 3

这可能是一个复杂的问题.经过几次尝试,我想出了一个相当干净的解决方案.让the browswer为您完成工作.

步骤1:创建一个border-style设置为none的div.div可以在屏幕外定位,也可以是页面上不使用边框的任何div.

第2步:将边框颜色设置为空字符串.代码可能如下所示:

e=document.getElementbyId('mydiv');
e.style.borderColor="";

第3步:将边框颜色设置为您不确定的颜色.

e.style.borderColor=testcol;

第4步:检查颜色是否实际发生了变化.如果testcol无效,则不会发生任何更改.

col2=e.style.borderColor;
if(col2.length==0) {alert("Bad Color!");}

步骤5:通过将颜色设置回空字符串来自行清理.

e.style.borderColor="";

分区:

<div id="mydiv" style="border-style:none; position:absolute; left:-9999px; top:-9999px;"></div>

现在JavaScript函数:

function GoodColor(color)
{
   var color2="";
   var result=true;
   var e=document.getElementById('mydiv');
   e.style.borderColor="";
   e.style.borderColor=color;
   color2=e.style.borderColor;
   if (color2.length==0){result=false;}
   e.style.borderColor="";
   return result;
}

在这种情况下,函数返回问题的真/假答案,另一个选项是让它返回有效的颜色值.您的原始颜色值,borderColor中的值或空字符串代替无效颜色.

Answer 4

如果您尝试在 HTML 中使用它，请尝试直接使用此模式：

 pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"

喜欢

<input id="hex" type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" />

它将进行验证以匹配请求的格式。