Skip to content

Week 13 Learn & Practice - Regular Expressions

Textbook

  • No textbook reading this week.

Regular Expressions

“Regular expressions are coded patterns that can be used to search for matching patterns in strings. These expressions are commonly used to validate the data that is entered by users."

  • Ray Harris, murach's JavaScipt and DOM Scripting, 2009.

For this course, we will be using simple regular expressions to validate user input in forms. Regular expressions are commonly referred to as "regEx". Although they are often used in conjunction with JavaScript, we will be incorporating them into our HTML with the pattern attribute.

  1. In your browser, go to https://regex101.com/ This is a handy website that tests regular expressions.

  2. In the flavor panel on the left, click ECMAScript (Javascript) to switch JavaScript mode.

    Reg Ex Panel

  3. Type the letter W into the regular expression box and type the words "Hello World" into the test string box. Notice that the W in "Hello World" is highlighted in blue. This is because it is a match to our regular expression.

    • In JavaScript, regular expression begins and ends with a forward slash /. In the regular expression box, you can see that they have already been added for you.
    • IMPORTANT: Regular Expressions are case-sensitive.

    W match

The Caret ^

The caret ^ (pronounced in English as “carrot”) specifies that the pattern must be the start of the string (text).

  1. Add the ^ symbol to the beginning of your regular expression. Notice that there is no longer a match because the "W" is at the start of the string.

    Caret match

  2. Change the text in the test string box to be "World". We now have a match.

The Dollar Sign $

The dollar sign $ specifies that the pattern must be the end of the string (text).

  1. Add the $ symbol to the end of your regular expression.

  2. Change the text in the test string box back to "Hello World". Notice that there is no longer a match.

    Dollar match

    Our regular expression is looking for a string that begins with a "Hello World" and ends with a "Hello World".

  3. Change the text in the regular expression box to be ^Hello World$. We now have a match.

Matching Digits

We can look for digits in our string by using the [0-9] expression or the \d expression.

  1. Type ^[0-9]$ into the regular expression box and a number into the test string box. This matches one, and only one, digit from 0-9.

    If you want to match a certain range of numbers, change the regular expression to the appropriate range.

    • ^[1-3]$ matches numbers, 1, 2, and 3.
    • ^[4,8,0]$ matches numbers, 4, 8, and 0.
    • ^[2-5,7,0]$ matches numbers, 2, 3, 4, 5, 7, and 0.

  2. Change the regular expression to ^\d$. This also matches all numbers from 0-9.

Matching Letters

We can also match alphabetical characters.

  1. Change the regular expression to ^[a-zA-Z]$ and the test string to a letter of the alphabet. This matches all lowercase and capital letters.

    • You can restrict matching just lowercase letters with ^[a-z]$ or upper-case letters with ^[A-Z]$.
    • You can restrict matching specific letters by specifying the letters in the brackets.
    • ^[A-C]$ matches letters A, B, and C
    • ^[r-t,F,H]$ matches letters r, s, t, F, and H

Multiple Digits or Letters

You can match more than one digit or letter by using curly braces {}.

  1. Change the regular expression to ^\d{3}$ and the test string to any 3 digits. This will match 3 consecutive digits.

    • This could also be written as ^[0-9]{3}$.

  2. Change the regular expression to ^[a-zA-Z]{5}$ and the test string to any 5 letters. This will match 5 consecutive letters.

Combining Letters and Numbers

We can combine the above expressions to match a mix of letters and numbers.

  1. Change the regular expression to ^\d{2}[a-zA-Z]{5}$ and the test string to 2 and up to 5 letters. This will match 2, 3, 4, or 5 consecutive letters. Write a test string that will produce a match.
  2. Write a test string that will match the following regular expression: ^[1-4]{2}7[A-D]{5}$
  3. Write a test string that will match the following regular expression: ^[5]\d[a-zA-Z]{3}PR$

The Vertical Bar |

The vertical bar | allows the pattern to match two or more acceptable patterns.

  • ^\d{2}|[a-zA-Z]{2}$ matches 2 digits or 2 letters.
  • ^3|[5-7]{2}$ matches the number 3 or 2 numbers between and including 5-7.

The Question Mark ?

You can create an optional match by ending the expression in a question mark.

  • ^\d{5}([a-c])?$ matches 5 digits, followed by an optional a, b, or c. Notice, the optional part of the expression needs to be surrounded by parenthesis. Otherwise, the entire expression is optional.
  • 2(T)? matches the number 2 followed by an optional capital T.

The pattern Attribute

HTML5 introduced a new attribute that checks regular expressions for you. The pattern attribute can be added to a text field with the regular expression as the value.

When using the pattern attribute, you omit the beginning and ending \ of the regular expression.

  1. Download week13Demo_regEx and open the website in VS Code and your browser.
  2. Add the pattern attribute to the "First Name" field with a regular expression as its value. The regEx should check that the field only accepts 5 letters. Test and validate that this is working.
  3. By default, Chrome does not produce a helpful error message. We can edit the error with the title attribute. Add the title attribute to the "Legal First Name" field with a value of "Please enter 5 letters". Retest to see the new message.

  4. After the ‘Last Name’, add a text field to the form that receives a telephone number.

    <label for="tele" class="fixedWidth">Telephone</label>
<input type="text" name="tele" id="tele" placeholder="Your contact number">
<br><br>

  5. Create a regular expression to match the following pattern.

    • ###-###-#### (3 digits dash 3 digits dash 4 digits)

  6. Add the title attribute to give users an appropriate error message.

    Make the area code optional

    How could you alter this pattern to make the area code optional?