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

Posted 2023-02-23

【中文标题】如何使用 javascript/jquery 知道给定字符串是 hex、rgb、rgba 还是 hsl 颜色？

【英文标题】：How can I know if a given string is hex, rgb, rgba or hsl color using javascript/jquery?

【发布时间】：2015-12-16 21:16:24

【问题描述】：

我使用正则表达式作为十六进制。 /^\#([a-fA-F0-9]6|[a-fA-F0-9]3)$/ 但我不知道我应该怎么做才能找到 rgb、rgba 和 hsl。我正在获取字符串中的输入。例如，输入将包含“rgb(0,0,0)”或“rgb(0,0,0,0.2)”。

【问题讨论】：

感谢伟大的社区。这个网站简直就是天堂。

你想知道如果它是一种颜色，还是它是什么类型的颜色格式？

@dandavis 我想验证用户输入的内容是否正确。所以我需要知道颜色格式的类型 + 如果它对该格式是合法的。我没有转换任何东西

嗨。看看以下网站：upshots.org/javascript/javascript-color-class 这是一个颜色类。使用它或查看代码，了解它们如何解析/验证颜色值。

@JoshuaK 它似乎有 var isHex = /^#?([0-9a-f]3|[0-9a-f]6)$/i ; var isHSL = /^hsla?((\d1,3?),\s*(\d1,3%),\s*(\d1,3%)(,\s *[01]?\.?\d*)?)$/; var isRGB = /^rgba?((\d1,3%?),\s*(\d1,3%?),\s*(\d1,3%?)( ,\s*[01]?\.?\d*)?)$/; 但是输入应该是什么样子？

【参考方案1】：

我不知道其他浏览器，但在 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

【讨论】：

非常好的答案，和我打算提供的差不多；这里唯一的非脆性解决方案。更进一步的是在无效范围的情况下返回有效的计算属性......

RegExp 不会告诉你某些东西是否有效，而像上面这样的系统会告诉你它确实有效。如果需要，您可以在原生颜色解析器执行格式良好的输入测试后跟进有效性/范围限制。

【参考方案2】：

这里有不同的选择：

1。使用虚拟元素

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

function CheckValidColor(color) 
    var e = document.getElementById('divValidColor');
    if (!e) 
        e = document.createElement('div');
        e.id = 'divValidColor';
    
    e.style.borderColor = '';
    e.style.borderColor = color;
    var tmpcolor = e.style.borderColor;
    if (tmpcolor.length == 0) 
        return false;
    
    return true;


// function call
var inputOK = CheckValidColor('rgb( 0, 0, 255)');

这将为浏览器接受的所有颜色返回true，即使在您认为无效的情况下也是如此。

---

2。使用正则表达式捕获数字并在代码中验证

如果您捕获任何看起来像数字的东西，您将能够使用IF clauses 单独验证每个参数。这将使您能够向用户提供更好的反馈。

a) #hex:

^(#)((?:[A-Fa-f0-9]3)1,2)$

为了与以下表达式保持一致，还捕获了哈希。 DEMO

b) rgb()、rgba()、hsl() 和 hsla()：

^(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$

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

---

3。用一个怪物正则表达式验证：

不推荐使用此选项，主要是因为它很难阅读，它不能保证匹配所有用例，如果你尝试调试它会让人头疼。以下正则表达式验证允许的参数数量和范围。

a) #hex: ^#(?:[A-Fa-f0-9]3)1,2$ DEMO

b) rgb(): ^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)])))3[)]$ DEMO

c) rgba(): ^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,)3\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$ DEMO

d) hsl(): ^hsl[(]\s*0*(?:[12]?\d1,2|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%))2\s*[)]$ DEMO

e) hsla(): ^hsla[(]\s*0*(?:[12]?\d1,2|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%))2\s*,\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$ DEMO

现在齐聚一堂：

使用上面的表达式，我们可以创建这个单行来验证所有合法的颜色值：

^(?:#(?:[A-Fa-f0-9]3)1,2|(?:rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)])))3|hsl[(]\s*0*(?:[12]?\d1,2|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%))2\s*|(?:rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,)3|hsla[(]\s*0*(?:[12]?\d1,2|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%))2\s*,)\s*0*(?:\.\d+|1(?:\.0*)?)\s*)[)])$

DEMO

或者正则表达式爱好者可以检查这个huge regex，有148个颜色名称。但我永远不会推荐使用这种模式。请使用第一个选项，创建一个虚拟元素，这是涵盖浏览器所有用例的唯一方法。

【讨论】：

您的 CheckValidColor() 可能不起作用。由于您正在检查 tmpcolor.length == 0, length.

所以？如果您尝试设置不正确的颜色，它将是一个空字符串，因此该字符串的长度将为 == 0...您能提供一个失败的示例吗？