How to Format Phone Numbers in JavaScript: A Developer’s Guide

As a JavaScript developer for over 8 years, I’ve come across countless scenarios where users need to input phone numbers in a user-friendly format.

Whether you’re building a contact form, an address book, or any application that interacts with phone numbers, JavaScript offers powerful tools to achieve this.

In this blog post, I’ll delve into the world of phone number formatting in JavaScript, providing clear explanations, practical examples, and addressing frequently asked questions.

How to Format Phone Numbers in JavaScript

There are two primary approaches to formatting phone numbers in JavaScript:

Regular Expressions

This method leverages the power of regular expressions to identify specific patterns within the phone number string. 

We can then capture these patterns and restructure them using parentheses, hyphens, and spaces to achieve the desired format.

Here’s an example of a JavaScript function using regular expressions to format a US phone number:

function formatPhoneNumber(phoneNumber) {
  // Remove non-numeric characters
  const cleanedNumber = phoneNumber.replace(/\D/g, '');

  // Regular expression to capture phone number parts
  const regex = /^(\d{3})(\d{3})(\d{4})$/;
  const match = regex.exec(cleanedNumber);

  // Check if the phone number matches the format
  if (match) {
    return `(${match[1]}) ${match[2]}-${match[3]}`;
  } else {
    return phoneNumber; // Return original number if format doesn't match
  }
}

const unformattedNumber = "5551234567";
const formattedNumber = formatPhoneNumber(unformattedNumber);
console.log(formattedNumber); // Output: (555) 123-4567

Substrings and String Concatenation

This approach involves extracting substrings of specific lengths from the phone number string and then concatenating them with parentheses, hyphens, and spaces to create the formatted version.

Here’s an example of a JavaScript function using substrings and string concatenation:

function formatPhoneNumber(phoneNumber) {
  // Remove non-numeric characters
  const cleanedNumber = phoneNumber.replace(/\D/g, '');

  // Extract substrings for area code, exchange, and subscriber number
  const areaCode = cleanedNumber.substr(0, 3);
  const exchange = cleanedNumber.substr(3, 3);
  const subscriberNumber = cleanedNumber.substr(6);

  // Return formatted phone number
  return `(${areaCode}) ${exchange}-${subscriberNumber}`;
}

const unformattedNumber = "5551234567";
const formattedNumber = formatPhoneNumber(unformattedNumber);
console.log(formattedNumber); // Output: (555) 123-4567

Choosing the Right Method

Both approaches achieve the same outcome.

Regular expressions offer a more concise and flexible solution, particularly for complex formatting requirements.

However, if you prefer a more straightforward approach, the substring and concatenation method might be a good fit.

Frequently Asked Questions (FAQs)

The Final Word

By incorporating phone number formatting into your JavaScript applications, you can significantly enhance user experience and data accuracy.