如何知道给定的字符串是使用javascript / jquery的十六进制，rgb，rgba或hsl颜色？ [英] How can I know if a given string is hex, rgb, rgba or hsl color using javascript/jquery?
问题描述
我用正则表达式来表示十六进制。 / ^ \＃（[a-fA-F0-9] {6} | [a-fA-F0-9] {3}）$ / 但我没有知道我应该如何寻找rgb，rgba和hsl。我在字符串中获取输入。例如，输入将包含rgb（0,0,0）或rgb（0,0,0,0.2）。
这里有不同的选项：
1。使用虚拟元素
使用浏览器的验证。创建一个 dummy HTML元素，分配颜色并检查它是否已设置。这是迄今为止最好的选择。它不仅更容易，而且还允许向前兼容。
函数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;
}
返回true;
}
//函数调用
var inputOK = CheckValidColor（'rgb（0，0，255）'）;
对于所有可接受的颜色，这将返回 true 通过浏览器，即使在您可能认为无效的情况下。
2。使用正则表达式捕获数字并在代码中验证
如果您捕获了 的任何内容，您将能够单独验证每个参数与 IF子句。这可以让你提供更好的反馈给用户。
a）#hex：
^（＃）（（？：[A-Fa-f0-9] {3}）{1,2}）$
为了与下面的表达式保持一致，还会捕获哈希。 DEMO
rgb（），rgba（），hsl（）和hsla（）： $ b
^（RGB | HSL）（？A）[（] \s *（+ \s *％）\s *，\s *（[\d。] + [\d。]？ ？\s *％）\s *，\s *（+ \s *％）\s *（[\d]：？[\d]，\s *（ +）\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]）（?: \.\\ \ s *（？：，（？！[）]）|（？= [）]）））{3} [）] $ DEMO
c）rgba（） strong> ^^ 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
$ b 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 现在所有：
上面的表达式中，我们可以创建这一行来验证所有合法的颜色值：
$ b
^ （：＃（：[A-发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个颜色名称。但我绝不会推荐使用这种模式。请使用第一个选项，创建一个虚拟元素，这是覆盖浏览器所有用例的唯一方法。
I used regex for the hex. /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ but I dont know what I should for do for finding rgb, rgba and hsl. I am getting the input in string. For example, the input will contain "rgb(0,0,0)"or "rgb(0,0,0,0.2)".
There are different options here:
1. Use a dummy element
Use the browser's validation. Create a dummy HTML element, assign the color and check if it's set. This is by far the best option. It's not only easier, but it will also allow forward compatibility.
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)');
This will return true for all colors accepted by the browser, even in cases you may consider invalid.
2. Capture the numbers with regex and validate in code
If you capture anything that looks like a number, you will be able to validate each parameter individually with IF clauses. This will allow you to provide better feedback to the user.
a) #hex:
^(#)((?:[A-Fa-f0-9]{3}){1,2})$
The hash is also captured for consistency with the following expression. DEMO
b) rgb(), rgba(), hsl() and hsla():
^(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$
This will create captures for the function and each parameter. DEMO
3. Validate with one monster regex:
This option is not recommended, mainly because it's quite difficult to read, it won't guarantee to match all use cases, and it will give you a headache if you try to debug it. The following regex validates the number of parameters allowed and ranges.
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
All toghether now:
With the above expressions, we can create this one-liner to validate all legal color values:
^(?:#(?:[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*)[)])$
Or the regex enthusiasts can check this huge regex, with 148 color names. But I would never recommend using that pattern. Please use the first option, creating a dummy element, which is the only way to cover all use cases for the browser.
这篇关于如何知道给定的字符串是使用javascript / jquery的十六进制，rgb，rgba或hsl颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
