What building a phone number validator taught me about RegEx: FCC solution

Hi again, It's Israel, with another blazing article. 🔥🚀
This is a continuation of the series as I document my journey to getting the FreeCodeCamp certifications.
Let's dive in.

What are Regular Expressions

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects.

TBH, I've done something similar before when I started learning JavaScript, like 2 years ago. I did a form validation project following a tutorial where I validated a name, phone number, email and password using regular expressions.

So I thought, should be easy right? No. I have to give it to FreeCodeCamp, some of their projects aren't just tough, they're thorough ensuring proficiency in the skill and not just competence. That's some work they put in there.

The challenge:

I was given a task to build an app that validates US phone numbers in five different formats!
I immediately built the UI with basic styling.
Here's the code:

Do check my profile on FreeCodeCamp at: https://www.freecodecamp.org/Israel-Rotimi

In my script.js file I wrote this code:

const userInput = document.querySelector("#user-input");
const checkBtn = document.querySelector("#check-btn");
const clearBtn = document.querySelector("#clear-btn");
const resultsDiv = document.querySelector("#results-div");

// Event Listeners
checkBtn.addEventListener("click", () => {
  const input = userInput.value;
  if (input === ""){
    alert("Please provide a phone number");
  }else {
    if(validatePhone(input)){
      resultsDiv.innerHTML = `Valid US number: ${input}`;
    }else {
      resultsDiv.innerHTML = `Invalid US number: ${input}`;
    }
  }
})
clearBtn.addEventListener("click", () => {
  resultsDiv.innerHTML = "";
})

The first part defines references to the DOM elements

const userInput = document.querySelector("#user-input");
const checkBtn = document.querySelector("#check-btn");
const clearBtn = document.querySelector("#clear-btn");
const resultsDiv = document.querySelector("#results-div");

The next part has two event listeners, one performs the validation function and one clears the resultsDiv.

// Event Listeners
checkBtn.addEventListener("click", () => {
  const input = userInput.value;
  if (input === ""){
    alert("Please provide a phone number");
  }else {
    if(validatePhone(input)){
      resultsDiv.innerHTML = `Valid US number: ${input}`;
    }else {
      resultsDiv.innerHTML = `Invalid US number: ${input}`;
    }
  }
})
clearBtn.addEventListener("click", () => {
  resultsDiv.innerHTML = "";
})

Inside the validatePhone function, I define a regular expression, test the string against the regex using built-in method regExp.test and return the result.

function validatePhone(num){
  const re = /^(1\s?)?((\(\d{3}\)|\d{3})\s?-?\d{3}\s?-?\d{4})$/;
  const result = re.test(num);
  return result;
}

as simple as it looks, this part took 80% of my time!
I had to tweak and tweak till it passed all tests, And trust me, when I say they're thoroughly tested.

Let's break the regex down: /^(1\s?)?((\(\d{3}\)|\d{3})\s?-?\d{3}\s?-?\d{4})$/
^(1\s?)? This part allows for an option '1' with without white space. The caret ^ indicates that this pattern must start a string.
() is used to group things together, here we're grouping the '1' and white space characters together.
? is used to mark optional characters. In our string it is used to make 1 optional
((\(\d{3}\)|\d{3}) this part matches the first three digits with or without parentheses
| is used as literal or as in ((\(\d{3}\) | \d{3})
\d matches any digit
we use backslash to escape the bracket \( and \)
{} is a quantifier, it specifies how much it should repeat the character before it.
\s?-? matches a white space or dash optionally
$ this ensures the string ends with the characters specified before it.

And that is my solution. Please share your experience with regular Expressions in the comments