Hex Value regular expression Tutorial

Regular expressions can be used to find sequences of characters within text. Hexadecimal values are used to specify colours in CSS style properties. They use the hexadecimal number system to represent bits of binary data. The following tutorial is created to explain the functionality of each part of a regular expression used to find Hexadecimal Values. A definition of each component and some examples are presented in the content.

Summary

This regex is used to match hexadecimal values within a piece of text. It uses various regex components to filter, namely; anchors, quantifiers, character classes and the OR operator. Each of these components are explain below.

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

Table of Contents

Regex Components

Anchors

^ - Caret or hat positional metacharacter

It is use to define that the hex value expression is at the start of a line.

$ - Dollar sign positional metacharacter

It is used to define that the hex value espression is at the end of a line.

When the Caret ^ and the Dollar sign $ are used together defines that the expression is located on its own line.

This apple is red
apple

If we want it to just match the word "apple" on its own line we will use the following regular expression: ^apple$

Quantifiers

? - Question mark quantifier metacharacter

It is used to define a character as optional.

To use the question mark quantifier it is placed after the character that has been designated as optional. For example we can use the ? mark to make a full stop optional.

This example.
This example

To match both example with a period and without we can use the optional quantifier like so: example.?

In our Hex Value Expression, the ? mark has been used to mark the # symbol as optional meaning it can been included or no in the hex value (/^#?).

Hex values can be used with or without # symbol depending on where they are used. Some examples are:

1. #fff
2. fff
3. #ffffff
4. ffffff

{n} - Exact count quantifier metacharacter

It is used to define an exact number of times a character should appear as defined by a character class, literal or other metacharacter.

For example, if I want to match the word "the" in the example below, I can use the following regex: \w{3}

Whats the time mister wolf?

In our Hex Value Expression, we used the count quantifier twice:

1. included in the following fragment [a-f0-9]{6}. This is used to match hex values that are six characters in length.
2. included in the following fragment [a-f0-9]{3}. This is used to match hex values that are three characters in length.

Character Classes

[a-z] - Bracket list of characters

The square brackets are used to create a list of characters that determine if the current character being inspected is considered a match.

For example, given the following text:

Peter Pipper picked a pack of pickled peppers.

If I want to select characters that are a 'p' or 'e', then I can use the following regex [ep], however if the expression is declared as [e-p] it will include all the alphabetic characters from 'e' to 'p'.

In our Hex Value Expression, we used the same character class expression twice [a-f0-9]. This is used to determinate two lists:

1. The first one is an alphabetical sequence delimited by 'a' and 'f'.
2. The second one is a numerical sequence delimited by '0' and '9'.

This list is composed of characters that are considered valid within the hexadecimal number system. Valid hexadecimal characters are the numbers zero through to nine and the letters 'a' through to 'f'.

The OR Operator

(|) - Alternation with the Pipe character

The pipe character is used to specify that a sequence of characters can match any of the expressions fragmented by it.

For example, given the following text:

The javascript application can be initialized with NPM. When it initialises it creates the database tables.

If I want to match the words "initialized" or "initialises" I can use the following expression: (initialized|initialises). If I wanted to simplify this even further I could also use: initiali(zed|ses).

In our Hex Value Expression, we used alternation with the pipe character to divide the expression into two matchable fragments ([a-f0-9]{6}|[a-f0-9]{3}), where the hexadecimal value can be composed of either {6} characters on the left section before the | is placed, or {3} characteres on the right section. The purpose of the alternation is to find hexadecimal values of different formats that can either be three characters or six characters in length. For example: a0f, aa00ff

Author

Wendy Marcela Mejia Ortiz. GitHub profile