How to Format Phone Number in JavaScript (JavaScript Interview)

Displaying a phone number or taking a phone number as input is a widespread requirement for any website. While showing the phone number, it's a common problem to show phone numbers in a human-readable format, making it very easy to follow.

That is why it's important to learn how to format phone numbers in JavaScript with or without Country Code. Here is how you can do it in javascript

Table of Content

1. Expected Phone Number and Formatted Output
2. Format Phone Number Without Country Code
3. Format Phone Number With Country Code

# Expected Phone Number and Formatted Output

// Phone number without country code
input: 9674140087
output: (967) 414-0087

// Phone number with country code
input: 919079151237
output:  +91 (907) 915-1237

# Format Phone Number Without Country Code

Phone numbers without country codes should have a length of 10 digits. As part of the first step of formatting a phone number, all the non-numeric digits should be removed like dash (-) and check for the valid phone number length without country code. In the second step, formatting is done by using the required regex expression /^(\d{3})(\d{3})(\d{4})$/ and returned the formatted phone number.

Here is the code to format the phone number without the country code

Code:

function formatPhoneNumberWithoutCC(phoneNumber) {
	// Remove all non-digit characters
	const cleaned = phoneNumber.replace(/\D/g, '');
	const ccLength = cleaned.split('').length;

	if(ccLength > 10 || ccLength < 10){
		console.error("Invalid phone number length!!");
		return;
	}

	// Match common US phone number formats
	const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
	if (match) {
		return `(${match[1]}) ${match[2]}-${match[3]}`;
	}

	return phoneNumber; // Return original if no match
}

Tests:

Here are the tests, with 10-digit phone numbers, phone numbers with special chars and invalid phone numbers.

console.log(formatPhoneNumberWithoutCC('9674140087')); 
// (967) 414-0087

console.log(formatPhoneNumberWithoutCC('967-414-0087'));
// (967) 414-0087

console.log(formatPhoneNumberWithoutCC('invalid')); 
// Invalid phone number length!!

# Format Phone Number with Country Code

Phone numbers with country codes should have a length between 11 to 12 digits to represent 1-digit or 2-digit country codes. As part of the first step of formatting a phone number, all the non-numeric digits should be removed like dash (-) and check for the valid phone number length without country code.

In the second step, formatting is done by using the required regex expression /^(\d{1}) (\d{3})(\d{3})(\d{4})$/ for 1-digit country codes and /^(\d{2}) (\d{3})(\d{3})(\d{4})$/ for a 2-digit country code and returned the formatted phone number.

Here is the code to format the phone number with the country code

Code:

function formatPhoneNumberWithCC(phoneNumber) {
	// Remove all non-digit characters
	const cleaned = phoneNumber.replace(/\D/g, '');  
	const phoneNumberLength = cleaned.split('').length;
	let matchWithCountryCode = null;

	if(phoneNumberLength < 11 || phoneNumberLength > 12){
		console.error("Country code missing Or Invalid phone number");
		return;
	} else if(phoneNumberLength === 11) {
		// Handle 1 digit country code
		matchWithCountryCode = cleaned.match(/^(\d{1})(\d{3})(\d{3})(\d{4})$/)
	} else if(phoneNumberLength > 11 && phoneNumberLength <= 12){
		// Handle 2 digit country code
		matchWithCountryCode = cleaned.match(/^(\d{2})(\d{3})(\d{3})(\d{4})$/)
	}

	if (matchWithCountryCode) {
		return `+${matchWithCountryCode[1]} (${matchWithCountryCode[2]}) ${matchWithCountryCode[3]}-${matchWithCountryCode[4]}`;
	}

	return phoneNumber; // Return original if no match
}

Tests:

Here are the tests, with one or two-digit country codes and phone numbers without country codes.

console.log(formatPhoneNumberWithCC('19673140087')); 
//Output: +1 (967) 314-0087

console.log(formatPhoneNumberWithCC('919673140087')); 
//Output: +91 (967) 314-0087

console.log(formatPhoneNumberWithCC('9073140087')); 
//Output: Country code missing Or Invalid phone number