如何使用javascript / jquery知道给定的字符串是否为hex，rgb，rgba或hsl颜色？
我用hex的正则表达式。 /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/但是我不知道应该怎样做才能找到rgb，rgba和hsl。 我在字符串中获取输入。 例如，输入将包含“rgb（0,0,0）”或“rgb（0,0,0,0.2）”。
这里有不同的选择：
1.使用虚拟元素
使用浏览器的validation。 创建一个虚拟 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.使用正则表达式捕获数字并在代码中validation
如果捕获看起来像数字的任何内容，您将能够使用IF clauses单独validation每个参数。 这将允许您向用户提供更好的反馈。
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.使用一个怪物正则表达式validation：
建议不要使用此选项，主要是因为它很难阅读，不能保证匹配所有用例，如果您尝试调试它会让您头疼。 以下正则表达式validation允许的参数数量和范围。
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]?\d{1,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]?\d{1,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
现在一切都是这样的：
通过上面的表达式，我们可以创建这个单行来validation所有合法的颜色值：
^(?:#(?:[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]?\d{1,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]?\d{1,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
或者正则表达式爱好者可以查看这个巨大的正则表达式 ，有148个颜色名称。 但我永远不会建议使用这种模式。 请使用第一个选项，创建一个虚拟元素，这是覆盖浏览器所有用例的唯一方法。
我不知道其他浏览器，但在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