如何使用javascript / jquery知道给定的字符串是否为hex，rgb，rgba或hsl颜色？

Question

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

Answer 1

这里有不同的选择：

1.使用虚拟元素

使用浏览器的验证。 创建一个虚拟 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]?\\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

现在全都是这样的：

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

^(?:#(?:[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个颜色名称。 但我绝不会建议使用那种模式。 请使用第一个选项，创建一个虚拟元素，这是覆盖浏览器所有用例的唯一方法。

Answer 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