Skip to content

Instantly share code, notes, and snippets.

@daxburatto
Last active February 2, 2025 10:02
Show Gist options
  • Save daxburatto/307e8365c41fd5401f9ac315676490bf to your computer and use it in GitHub Desktop.
Save daxburatto/307e8365c41fd5401f9ac315676490bf to your computer and use it in GitHub Desktop.
Validating a Hex Value with Regex

Validating a Hex Value

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/

Summary

A Regular expression, or Regex, is a method of validating a specific piece of text by use of a sequence of characters each including their own fundimental principles. Regex can be used to validate emails, hex values, URLs, and HTML. In this case we will be focusing on Hex values which are typically a # with 6 numbers or letters following it.

Table of Contents

Regex Components

In a Hex value the Regex it would look something like /^#?([a-f0-9]{6}|[a-f0-9]{3})$/. To break it down:

  1. [A-Fa-f0-9]{6} - Will search for a hex value with letters between a-f, A-F and digits from 0-9 stretching 6 character spaces (ex: abc123)
  2. [A-Fa-f0-9]{3} - Will search for a hex values with letters between a-f, A-F, and digits from 0-9 stretching only 3 character spaces (ex: a23)

Anchors

The Anchors in a regex string are the ^ and $, the ^ will represent the start of the string and the $ represents the end of the string

-^#?([a-f0-9]{6}|[a-f0-9]{3})$ everything in between the ^ and $ will be representing what the regex is looking for.

Quantifiers

The Quantifiers will be the *, ?, and {}. In this situation the ? is showing that the # will be followed by 0 or 1 characters

  • ?([a-f0-9]{6}|[a-f0-9]{3}) The quantifier is saying after the # it will be either 0 or 1 characters

OR Operator

In this regex the | is acting as the OR operator. The OR operator is there to tell the regex to look for either a {6} character hex value OR a {3} character hex value

  • [a-f0-9]{6}|[a-f0-9]{3} the | in the middle is representing that it will either be 6 characters or 3

Flags

Flags are for advanced searching with a regex, in the hex code value we can see that we have a multi-line flag by using a ^ and $ at the beginning and end of the string. This allows the expression to cross multi-lines of code without breaking it.

  • ^#?([a-f0-9]{6}|[a-f0-9]{3})$ is showing that the hex value could be wrapped onto multiple lines

Grouping and Capturing

Grouping is shown by () around the regex, this allows us to seperate the meta characters from literal characters. Grouping can also be used to isolate part of a string or data in a program.

  • ([a-f0-9]{6}|[a-f0-9]{3}) is showing only the literal values of the hex value and isn't specifying any meta search criteria.

Bracket Expressions

The bracket expression are used to show which characters will be matched with the regex. In this expression we have the brackets showing we're looking for two strings including characters a-f and 0-9:

  • [a-f0-9]

References

Author

My name is Dax Buratto and I am currently studying Full Stack Web Development at UT Austin. Check out my Github for more exciting stuff! Dax's Github

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