例如：
AA33FF = 有效的十六进制颜色
Z34FF9 = 无效的十六进制颜色（其中包含 Z）
AA33FF11 = 无效的十六进制颜色（有多余的字符）
如何检查字符串是否是有效的十六进制颜色表示？
IT技术
javascript
jquery
colors
2021-02-16 05:14:39
6个回答
/^#[0-9A-F]{6}$/i.test('#AABBCC')
详细说明：
^ ->匹配开始
# ->的哈希
[0-9A-F] ->从0到9的任意整数，并从A至F的任何字母
{6} ->前一组恰好出现6次
$ ->匹配端
i ->忽略大小写
如果您需要支持 3 个字符的十六进制代码，请使用以下命令：
/^#([0-9A-F]{3}){1,2}$/i.test('#ABC')
这里唯一的区别是
[0-9A-F]{6}
被替换为
([0-9A-F]{3}){1,2}
这意味着它不会精确匹配 6 个字符，而是精确匹配 3 个字符，但只会匹配 1 或 2 次。允许ABC和AABBCC，但不允许ABCD
组合解决方案：
var reg=/^#([0-9a-f]{3}){1,2}$/i;
console.log(reg.test('#ABC')); //true
console.log(reg.test('#AABBCC')); //true
// 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这个答案曾经抛出误报，因为Number('0x' + hex)它使用了parseInt(hex, 16). parseInt()将从字符串的开头开始解析，直到到达一个不包含在基数 ( 16)中的字符。这意味着它可以解析像“AAXXCC”这样的字符串，因为它以“AA”开头。
Number()，另一方面，只有在整个字符串与基数匹配时才会解析。现在，Number()不接受基数参数，但幸运的是，您可以为数字文字添加前缀以获取其他半径中的数字。
这里有一张表供澄清：
╭─────────────┬────────────┬────────┬───────────────────╮
│ Radix │ Characters │ Prefix │ Will output 27 │
╞═════════════╪════════════╪════════╪═══════════════════╡
│ Binary │ 0-1 │ 0b │ Number('0b11011') │
│ Octal │ 0-7 │ 0o │ Number('0o33') │
│ Decimal │ 0-9 │ - │ - │
│ Hexadecimal │ 0-9A-F │ 0x │ Number('0x1b') │
╰─────────────┴────────────┴────────┴───────────────────╯
这可能是一个复杂的问题。经过多次尝试，我想出了一个相当干净的解决方案。让浏览器为您完成工作。
第 1 步：创建一个边框样式设置为无的 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 的值或代替无效颜色的空字符串。
如果您尝试在 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})$" />
它将进行验证以匹配请求的格式。
function validColor(color){
var $div = $("<div>");
$div.css("border", "1px solid "+color);
return ($div.css("border-color")!="")
}
https://gist.github.com/dustinpoissant/22ce25c9e536bb2c5a2a363601ba261c
注意：这需要jQuery
这适用于所有颜色类型，而不仅仅是十六进制值。它也不会将不必要的元素附加到 DOM 树中。