Skip to content

Instantly share code, notes, and snippets.

@NetOpWibby

NetOpWibby/full-match.js

Forked from sethlopezme/full-match.js
Created June 25, 2023 02:34
Show Gist options
  • Save NetOpWibby/7565b1f5b0e003460bcab3a379910629 to your computer and use it in GitHub Desktop.
Save NetOpWibby/7565b1f5b0e003460bcab3a379910629 to your computer and use it in GitHub Desktop.
Download ZIP
Regex for matching any hex, rgb(a), or hsl(a) value. Assumes that you've lowercased the string and removed spaces.
Raw
full-match.js
/^(#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})|rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/
Raw
hex-match.js
/^#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})$/
Raw
hsl-match.js
/^hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)$/
Raw
hsla-match.js
/^hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\)$/
Raw
rgb-match.js
/^rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)$/
Raw
rgba-match.js
/^rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|0?\.\d|1(\.0)?)\)$/
@NetOpWibby
Copy link
Author

https://gist.github.com/sethlopezme/d072b945969a3cc2cc11?permalink_comment_id=3890172#gistcomment-3890172

😂Here i am again.

some points
    rgb atom maybe should support decimal ((0|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)(\.\d+)?|255)
    hsl and hsla: merge 35\d|3[0-4]\d to 3[0-5]\d
    hsla alpha match rules should same to rgba
    hsl and hsla: support decimal (((0|3[0-5]\d|[12]\d\d|0?\d?\d)(\.\d+)?)|360) ((0|100|0?\d{1,2})(\.\d+)?)%

For simplify code, it is a good idea to use RegExp constructor😜.

And, find a more complex version.🌚

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment