4

Regex for matching any hex, rgb(a), or hsl(a) value. Assumes that you've lowerca...

 2 years ago
source link: https://gist.github.com/sethlopezme/d072b945969a3cc2cc11
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Author

sethlopezme commented on Aug 20, 2015 •

edited

Visualizations

I've created visualizations for each of the regex matches.

Full Match

Hex Match

HSL Match

HSLa Match

RGB Match

RGBa Match

The visualizations were created with Regexper and converted to PNG. They are CC BY 3.0 licensed.

Thanks for this great regular expression.
But rgba-match.js seems not match the case when alpha is 0. eg: rgba(0,0,0,0)

And, hex-match.js maybe should match 4 or 8 digits.
Because #1234、#0000ff66 is also valid color string.
/^([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})$/i

Author

sethlopezme commented on Sep 7, 2021

@percy507 Thanks for the feedback. I've updated the regexes and their diagrams.

joyHere 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 constructorstuck_out_tongue_winking_eye.

And, find a more complex version.new_moon_with_face


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK