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

小开

最佳答案

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

详细说明:

^ ->比赛开始
大杂烩
从0到9的任意整数和从 A 到 F 的任意字母
前一组正好出现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

这个答案过去常常抛出假阳性，因为它使用的是 parseInt(hex, 16)，而不是 Number('0x' + hex)。
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: 创建一个边框样式设置为 none 的 div。Div 可以位于屏幕之外，也可以是页面上任何不使用边框的 div。

步骤2: 将边框颜色设置为空字符串:

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

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

e.style.borderColor=testcol;

步骤4: 检查颜色是否真的改变了。如果 testcolis 无效，则不会发生任何改变。

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 中的值或替代无效颜色的空字符串。

小开

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 树中。

小开

如果您需要一个函数来告诉您某种颜色是否有效，那么您可以让它提供一些有用的信息——该颜色的计算值——并在它不是有效颜色时返回 null。下面我尝试使用一个兼容的(Chrome54 & MSIE11)函数来获得任何格式的“ color”的 RGBA 值——可以是“ green”，或者“ # 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;
}

小开

如果你想在 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 isValidHex(testNum){
let validHex = false;
let numLength = testNum.length;
let parsedNum = parseInt(testNum, 16);
if(!isNan(parsedNum) && parsedNum.length===numLength){
validHex = true;
}
return validHex;

}

小开

我决定换个角度看问题。我的规则是: 1)任意长的十六进制字符序列，2)在序列的前面使用“0x”或“ #”，或者3)只使用十六进制数字或字符串。我想起了当时的一个大项目。Binhex 可以创建非常大的文件，这些文件可以传输到任何地方，然后返回到您转换的任何文件中。这些文件将有80个字符后跟一个返回。所以在这个函数中，我查找返回值，然后先把它们取出来。修改函数，使其同时查找“ n”和“ r”。密码如下:

////////////////////////////////////////////////////////////////////////////////
//  isHex(). Is this a hex string/value?
//  Arguments   :   0   =   Item to test
//                  1   =   V(alue) or S(tring). Default is STRING.
////////////////////////////////////////////////////////////////////////////////
function isHex()
{
var p = 0;
var re1 = /(\n|\r)+/g;
var re2 = /[\Wg-zG-Z]/;
var re3 = /v/i;
//
//  Make sure the string is really a string.
//
var s = arguments[0];
if( typeof s != "string" ){ s = s.toString(); }
//
//  Check if this is a hex VALUE
//  and NOT a hex STRING.
//
var opt = arguments[1];
if( re3.test(opt) && (s.length % 2 > 0) ){ return "false"; }
//
//  Remove any returns. BinHex files can be megabytes in length with 80
//  column information. So we have to remove all returns first.
//
s.replace( re1, "" );
//
//  IF they send us something with the universal "0x" or the HTML "#" on the
//  front of it - we have to FIRST move where we look at the string.
//
if( s.substr(0,1) == "#" ){ p = 1; }
else if( s.substr(0,2).toLowerCase() == "0x" ){ p = 2; }


if( re2.test(s.substr(p,s.length)) ){ return "false"; }


return "true";
}


alert("HELLO There!");
alert(isHex("abcdef"));
alert(isHex("0x83464"));
alert(isHex("#273847"));
alert(isHex("This is a test"));
alert(isHex(0x5346));

我有意将返回值保留为字符串，但是您所要做的就是删除双引号，然后函数将只返回 TRUE 或 FALSE。