Geek Answers Handbook

How to find out if a given string matches hexadecimal, rgb, rgba or hsl color using javascript / jquery?

I used regex for hex. /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ , but I don’t know what I need to do to search for rgb, rgba and hsl . I get input in a string. For example, the input would contain "rgb (0,0,0,0)" or "rgb (0,0,0,0,2)".

+5
source share
2 answers

There are different options here:

1. Use a dummy element

Use browser validation. Create a dummy HTML element, assign a color, and check if it is installed. This is by far the best option. This is not only easier, but also allows for direct 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 that you may consider invalid.

2. Capturing regular expression numbers and checking in code

If you capture everything that looks like a number, you can check each parameter separately with IF clauses . This will allow you to provide better user feedback.

a) #hex:

 ^(#)((?:[A-Fa-f0-9]{3}){1,2})$

The hash is also fixed 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. Confirm with a single monster regex:

This option is not recommended, mainly because it is rather difficult to read, it does not guarantee compliance with all use cases, and it will give you a headache if you try to debug it. The following regular expression checks the number of allowed parameters 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

That's it:

Using the above expressions, we can create this single-line key to check all valid 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*)[)])$

Demo

Or regular expression enthusiasts can check out this huge regular expression with 148 color names. But I would never recommend using this template. Use the first option by creating a dummy element, which is the only way to cover all browser use cases.

+8
source

I do not know about other browsers, but in chrome the color will be set only if it is valid:

 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

It will have a trap because Chrome will automatically round numbers:

 // 0, 0, 256 is not a valid color, but this says yes console.log(isValidColor('rgb(0, 0, 256)')); // true
0
source

More articles:


All Articles