如何使用javascript/jquery知道给定字符串是十六进制、rgb、rgba还是hsl颜色？

我用正则表达式来表示十六进制<代码>/^\#（[a-fA-F0-9]{6}|[a-fA-F0-9]{3}）$/但我不知道如何查找rgb、rgba和hsl。我正在获取字符串中的输入。例如，输入将包含“rgb（0,0,0）”或“rgb（0,0,0,0.2）”。

我不知道其他浏览器，但在chrome中，颜色只有在其有效时才会设置：

var isValidColor = function(color) {
  var el = document.createElement('div');
  el.style.backgroundColor = color;
  return el.style.backgroundColor ? true : false;
};

console.log(isValidColor('#ff0000')); // true
console.log(isValidColor('rgb(0, 0)')); // false

但它也会有缺陷，因为Chrome会自动对数字进行四舍五入：

// 0, 0, 256 is not a valid color, but this says yes
console.log(isValidColor('rgb(0, 0, 256)')); // true

---

这里有不同的选项：

1.使用虚拟元素 使用浏览器的验证。创建一个虚拟HTML元素，分配颜色并检查是否已设置。这是迄今为止最好的选择。这不仅更容易，而且还允许向前兼容

功能检查有效颜色（颜色）{
var e=document.getElementById（'divValidColor'）；
如果（！e）{
e=document.createElement（'div'）；
e、 id='divValidColor'；
}
e、 style.borderColor=''；
e、 style.borderColor=颜色；
var tmpcolor=e.style.borderColor；
if（tmpcolor.length==0）{
返回false；
}
返回true；
}
//函数调用
var inputOK=CheckValidColor（'rgb（0,0,255）'）；

这将返回<>代码>真/<代码>，以供浏览器接受的所有颜色，即使在您认为无效的情况下。

---

2.使用正则表达式捕获数字并在代码中验证 如果捕获任何看起来像数字的内容，则可以使用

If子句

单独验证每个参数。这将允许您向用户提供更好的反馈

a）#十六进制：

（（？：[A-Fa-f0-9]{3}{1,2}）$ 为了与下面的表达式保持一致，还捕获了散列

b）rgb（）、rgba（）、hsl（）和hsla（）：

^（rgb | hsl）（a？[（]\s*（[\d.]+\s*？）\s*，\s*（[\d.]+\s*？）\s*，\s*（[\d.]+\s*？）\s*（[\d.]+\s*）\s*（[\d.]+）\s*）]$

这将为函数和每个参数创建捕获

---

3.使用一个monster regex进行验证： 不推荐使用此选项，主要是因为它很难阅读，它不能保证匹配所有用例，如果您试图调试它，它会让您头疼。下面的正则表达式验证允许的参数数量和范围

a）#十六进制：

^#（？：[a-Fa-f0-9]{3}）{1,2}$

b）rgb（）：

^rgb[（？：\s*0*（？：\d\d）（？：\s*）（？：\s*）（？：\s*）。\d+\s*%\100（？\.0*）？\s*（？：1\d\d | 2[0-4]\d | 25[0-5+）（？：。\d？：\d*）{s*（？：，（？！！[））{3$）>

c）rgba（）：
^rgba[（？：\s*0*（？：\d\d）（？：\.\d+）（？：\s*）？\.\d+\s*%。\d+\s*%100（？：\.0*）？\s*。（？：1\d\d | 2[0-4]\d | 25[0-5]（？：.\d+）\d+）\s*，{3}\s*0*。（？：\d+）\d*）/s*）。]

d）hsl（）：
^hsl[（]\s*0*（？：[12]？\d{1,2}3（？[0-5]\d}60]）\s*（？：\s*，\s*0*（？：\d？：\.\d+\s*%\s*。\d+\s*%100（？：.0*）\s*）{2}\s*。

e）hsla（）：
^hsla[（]\s*0*（？：[12]？\d{1,2}3（？[0-5]\d}60]\s*（？：\s*，\s*0*（？：\d（？：\.\d+）\s*%\s*。\d+\s*%100（？：.0*）\s*）{2}\s*，\s*，\s*（？：\d*。\d*）\s*。\s*。\s*。\s*。\s*。\s*。\s*。\s*。\s*。\s*。]

现在大家都在一起：

使用上述表达式，我们可以创建此一行来验证所有合法颜色值：

（2）rgb，（）以下以下：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：s*0*（？：[12]？\d{1,2}3（？[0-5]\d}60））\s*（？：\s*，\s*0*（？：\d\d）（？：\.\d+）\s*。\d+\s*。\d+\s*%100（？：\.0*）\s*）{2}\s*（？：rgba[（]（？：\s*0*）（？：\s*）（？：\d+）。\d+）。\d*。\d*。\s*。\s*）。\s*。\10.0-5、（？：：：10.0 0....：0.0*）10 10........：：：10 10.0-5............1010 10 10 10.......）0*）10................[10：：：：：：：：：：：：：：：：）3}0 0 0 0 0 0 0.............................[3 3 3 3.....手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手手*（？：\.\ d+| 1（？：\.0*）？）\s*）[）]$


或者regex爱好者可以用148个颜色名称来检查这一点。但我永远不会推荐使用这种模式。请使用第一个选项，创建一个虚拟元素，这是覆盖浏览器所有用例的唯一方法。
THx对于伟大的社区来说。这个网站是一个天堂。你想知道它是一种颜色，还是什么类型的c颜色格式？@dandavis我想验证用户输入的内容是否正确。因此我需要知道颜色格式的类型+该格式是否合法。我不会转换任何内容。请查看以下网站：它是一个颜色类。使用它或查看代码，以了解它们如何解析/验证颜色值。@Jos（0-9a-9a-9a-9-9 A-9 A-9-9 A-9-9 A-f{{{6}）6}）6}）元/i；var ISSSSSSL8 8 8 8.8 8 8.8似乎它似乎它似乎有var ISSSSSSSSSS8=///hhhhhk，似乎它似乎它似乎有var ISSSSh8 8 8 8.8 8 8.8.8.8.8.8，似乎似乎有VaWak，似乎有可能有var.8.8.8，似乎有可能有var.8.8.8.8.8.8.8，似乎有可能有var，有var.8.8.8.8.8.8.8，似乎有可能有var.8.8.8.8.8.8.8.8.8，似乎有可能有可能有无无无无无无无无无任何其他其他其他其他其他其他，\s*[01]？\.？\d*）？）$/；但是输入应该是什么样的？非常好的答案，与我将要提供的答案大致相同；这里唯一的非脆性解决方案。更进一步的一步是在无效范围的情况下返回有效的计算属性…RegExp不会告诉您某件事情是否有效，而像上面这样的系统会告诉您它确实有效如果需要，您可以在本机颜色分析器执行格式良好的输入测试之后，继续使用有效性/范围限制可能不起作用。因为您正在检查tmpcolor.length==0，length.So？如果您尝试设置错误的颜色，它将是一个空字符串，因此该字符串的长度将==0…您能提供一个失败的示例吗？