javascript - 我如何使用 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)”。

Answer 1

这里有不同的选项:

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

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

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