/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
Does the above look like hieroglyphics to you? What language is this written in and what does it mean!? Well I'm here to tell you that they are written in JavaScript, a programming language (fun fact: they are used in other programming languages but vary slightly in the syntax). Those funky lines of what looks to be hieroglyphics are known as Regular Expressions, aka regex as the cool kids like to say!
Even though they look intimidating and make no sense, by the end of this tutorial you will understand what /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ is and how it can be used to match a hex value.
If you need a refresher of what a hex value/color is you can read up on them here.
^ caret ⚓ -This guy goes at the beginning of the expression
$ dollar ⚓ -This guy goes at the end of the expression
/^regex-goes-in-between-both-anchors$/
Both anchors are essesntial in writting a regex, don't forget to wrap the regex in a forward slash / since it is considered a literal.
Quantifiers set a rule for how many times the character, group, or character class must be present in the string in order for a match to be found.
The quantifiers used in the Matching a Hex Value: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/:
-
?
#?in order for the hex color to match there must be 0 or 1 # present.
-
{ }
{6}means the preceding string pattern[a-f0-9]needs to match exactly 6 characters{3}means the preceding string pattern[a-f0-9]needs to match exactly 3 characters
Example of matches
It will look to find a string match if it contains lowercase characters: a,b,c,d,e,f and/or 0,1,2,3,4,5,6,7,8,9 6 or 3 times:
- #000000 (black) -6 characters
- 000 (shorthand for black) -3 characters --dont forget that it will still match it without the
# - ff0000 (red) -6 characters
- #ffa500 (orange) -6 characters
These are pretty easy to identify by the ( ) parentheses. If your regex was long and different matching rules were needed it would be best to add more than 1 construct to break it up into smaller chunks. Similar to an algebra problem: (x+1)(x+2).
In the hex value regex example there is only 1 grouping construct:
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
Just like the grouping constructs there can be more than 1 bracket [] expression. The brackets contain a set of character rules that need to be matched.
[a-f0-9] is in our regex twice but it means the exact same thing, until the quantifier of 6 or 3 kicks in. In order to find a match, it will search for a lowercase letter between a-f and any number between 0-9. One important thing to notate, is that the letters and numbers can be in any combination, order, can repeat and can contain only letters or numbers as long as they are lowercase letters between a-f and numbers between 0-9.
If you wanted to add an additional requirement, it would be best to include capital letters to be on the safe side, like so:
/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
By adding A-F it will also find a match if any of the letters are capitalized where as before, it would have excluded them from being a match and only accepted lowercase letters. People write hex values in different ways so it is good practice to include it.
- example: #FCF621 (yellow)
The pipe | means OR
For our Matching Hex value example: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ the | is in between the 2 bracket expressions, either one can be used to find a match.
To recap:
If there is a # or even if there is not one, it will then look to find a match if it is 6 characters OR 3 characters, as long as it is a lowercase letter between a-f and/or number between 0-9.
Possible matches:
- #ffffff (white)
- 555 (shorthand for grey)
- #f0f (shorthand for magenta)
- f0a7a7 (pink)
I'm currently enrolled in a full-time coding bootcamp. It's been quite a journey but I've enjoyed learning new things and hope to launch a career in this industry in the coming months!