如何检查一个string是否是一个有效的hex颜色表示?

例如:

AA33FF =有效的hex颜色

Z34FF9 =无效的hex颜色(其中有Z)

AA33FF11 =无效的hex颜色(有额外的字符)

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

详细说明:

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

和更先进的:

  var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#ac3') // for #f00 (Thanks Smamatti) 
 function isHexaColor(sNum){ return (typeof sNum === "string") && sNum.length === 6 && ! isNaN( parseInt(sNum, 16) ); } isHexaColor("AA33FF") => true isHexaColor("Z34FF9") => false isHexaColor("AA33FF11") => false 

编辑 :请参阅下面的@SalvadorDali的评论,在某些情况下有误报。 而是使用另一种解决scheme。

这可能是一个复杂的问题。 经过多次尝试,我想出了一个相当干净的解决scheme。 让browswer为你做的工作。

第1步:创build一个边框样式设置为无。 div可以定位在屏幕外,也可以是页面上任何不使用边框的div。

第2步:将边框颜色设置为空string。 代码可能看起来像这样:

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

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

 e.style.borderColor=testcol; 

第四步:检查颜色是否真的变了。 如果testcol无效,则不会发生变化。

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

第5步:通过将颜色设置回空string来清理自己。

 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的值或空string代替无效颜色。

 function validColor(color){ var $div = $("<div>"); $div.css("border", "1px solid "+color); return ($div.css("border-color")!="") } 

https://gist.github.com/dustinpoissant/22ce25c9e536bb2c5a2a363601ba261c

注意:这需要jQuery

这适用于所有颜色types不只是hex值。 它也不会为DOM添加不必要的元素,因为它使用虚拟DOM。

如果你需要一个函数来告诉你一个颜色是否有效,那么你可以让它给你一些有用的东西 – 计算出来的颜色值 – 当它不是一个有效的颜色时返回null。 这里是我的一个兼容(Chrome54和MSIE11)的function,用于获取任何格式的“颜色”的RGBA值 – 可以是“绿色”,“#FFF”或“#89abcd”或“rgb” (0,0,128)'或'rgba(0,128,255,0.5)'。

 /* getRGBA: Get the RGBA values of a color. If input is not a color, returns NULL, else returns an array of 4 values: red (0-255), green (0-255), blue (0-255), alpha (0-1) */ function getRGBA(value) { // get/create a 0 pixel element at the end of the document, to use to test properties against the client browser var e = document.getElementById('test_style_element'); if (e == null) { e = document.createElement('span'); e.id = 'test_style_element'; e.style.width = 0; e.style.height = 0; e.style.borderWidth = 0; document.body.appendChild(e); } // use the browser to get the computed value of the input e.style.borderColor = ''; e.style.borderColor = value; if (e.style.borderColor == '') return null; var computedStyle = window.getComputedStyle(e); var c if (typeof computedStyle.borderBottomColor != 'undefined') { // as always, MSIE has to make life difficult c = window.getComputedStyle(e).borderBottomColor; } else { c = window.getComputedStyle(e).borderColor; } var numbersAndCommas = c.replace(new RegExp('[^0-9.,]+','g'),''); var values = numbersAndCommas.split(','); for (var i = 0; i < values.length; i++) values[i] = Number(values[i]); if (values.length == 3) values.push(1); return values; }