如何使用javascript/jquery判断给定的字符串是十六进制、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)"。

- TEni Dign

---

你想知道它是不是颜色，还是想知道它是哪种类型的颜色格式？ - dandavis

@dandavis 我想要验证用户输入的内容是否正确。因此，我需要知道颜色格式的类型以及该格式是否合法。我不会进行任何转换。 - TEni Dign

@JoshuaK.isRGB.test("rgba(10,25,1,11)")不起作用。它返回true。 - TEni Dign

啊哇，isHSL也不能用。它失败了... - TEni Dign

确保它返回true。rgb和rgba是相同的。rgb（0,0,0）= rgba（0,0,0,1）。您可以通过设置alpha = 1来将所有rgb显示为rgba。hsl也是一样的。 - Joshua K

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语句单独验证每个参数。这将使您能够为用户提供更好的反馈。

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*(?:,\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*)[)])$

演示

或者正则表达式爱好者可以查看这个巨大的正则表达式，包含148种颜色名称。但我不建议使用那个模式。请使用第一种选项，创建一个虚拟元素，这是浏览器覆盖所有用例的唯一方式。

- Mariano

---

你的 CheckValidColor() 可能不起作用。因为你正在检查 tmpcolor.length == 0，长度。 - TEni Dign

那么？如果您尝试设置一个错误的颜色，它将是一个空字符串，因此该字符串的长度将等于0...您能提供一个失败的示例吗？ - Mariano

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

- Andreas Louv

---

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

正则表达式不能告诉你某个东西是否有效，而上述系统可以告诉你它确实有效。如果需要，在本地颜色解析器执行格式良好的输入测试后，您可以跟进有效性/范围限制。 - dandavis

Answer 3

一个用于验证十六进制、RGB和HSL格式颜色的函数：

    function isValidColor(colorString) {

    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
    const rgbRegex = /^rgb(a)?\(\s*((25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*(,\s*\d+(\.\d+)?)?\)$/i;
    const hslRegex = /^hsla?\(\s*((360|3[0-5]\d|[12]\d{2}|[1-9]\d|\d)\s*,\s*){2}(360|3[0-5]\d|[12]\d{2}|[1-9]\d|\d)\s*(,\s*\d+(\.\d+)?)?\)$/i;

    if (hexRegex.test(colorString)) {
        return true; // Valid hex color
    } else if (rgbRegex.test(colorString)) {
        const values = colorString.match(/\d+(\.\d+)?/g); // Extract numeric values
        const isValid = values.every(value => value >= 0 && value <= 255); // Check if values are within range
        return isValid && (values.length === 3 || values.length === 4); // Valid RGB or RGBA color
    } else if (hslRegex.test(colorString)) {
        const values = colorString.match(/\d+(\.\d+)?/g); // Extract numeric values
        const isValid = values.every(value => value >= 0 && value <= 100); // Check if values are within range
        return isValid && (values.length === 3 || values.length === 4); // Valid HSL or HSLA color
    }

        return false; // Invalid color format
    }

    // Sample usage:
    console.log(isValidColor('#ff0000')); // true
    console.log(isValidColor('rgb(255, 0, 0)')); // true
    console.log(isValidColor('rgba(0, 0, 0, 0.5)')); // true
    console.log(isValidColor('hsl(120, 100%, 50%)')); // true
    console.log(isValidColor('invalidcolor')); // false

- Mohammad Sadegh Babaei