JavaScript

How to Write a Cell Phone Number in an International Way Using JavaScript?

Working with cell phone numbers is something that is important, especially when fetching data from the database and showing it to the user on the web browser. In such scenarios, the programmer must make sure that the cell phone number is formatted in a certain international format.

This article will explain how to take a cell phone number, format it in an international way, and show it back to the user. And the international format for the cell phone number will be “E-164”, which is titled the International Public Telecommunication Numbering Format.

Step 1: Create an HTML page

Simple start by creating an HTML webpage to prompt the user and to show the formatted number with the following lines:

<body onload="start()">

<center>

<b>Enter Number in the Prompt box</b>

<div id="number"></div>

</center>

</body>

In the above lines:

  • The onload property is set on the <body> tag which looks for the start() function in the JavaScript on the complete loading of the webpage.
  • A <b> tag is created to notify the user
  • A div with the id “number” is created to print out the formatted cell phone number

Running the HTML document will show the following web page on the browser:

This web page doesn’t do anything, this will change in the next step

Step 2: JavaScript Code for Formatted Cell Phone Number in E.164

In the JavaScript file, or inside the <script> tag, create a function name as start() that is going to be executed upon the complete loading of the webpage:

function start() {

// Upcoming lines belong here

}

In this function, use a prompt box to get the input from the user and store it inside the variable “userNumber”:

var userNumber = prompt("Enter Your Cell Number");

After that, apply the match method() on the variable userNumber with the help of a dot operator. We will compare the input from the user against the regEx to verify that it is a correct cell number:

var result = userNumber.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);

After that, check the result variable or more specifically the value at index 1 for the country to match with the value “1”:

var cCode = result[1] ? "+1" : "";

Once, that input is verified, simply format the string in the correct E-164 format to be put on the web page with the following:

var formattedNumber = cCode + " (" + result[2] + ") " + result[3] + "-" + result[4];

And then the last step is to access the div with the id as “number”, and then set its innerHTML value to the formattedNumber variable:

document.getElementById("number").innerHTML ="The international number is: " + formattedNumber;

The complete JavaScript code snippet is as:

function start() {

var userNumber = prompt("Enter Your Cell Number");

var result = userNumber.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);

var cCode = result[1] ? "+1" : "";

var formattedNumber =

cCode + " (" + result[2] + ") " + result[3] + "-" + result[4];

document.getElementById("number").innerHTML =

"The international number is: " + formattedNumber;

}

Step 3: Testing the Output

After you are done with the first two steps, run the HTML document, and when prompted, type in the correct cell phone number and observe the following output:

The inserted number was converted in the E-164 number format

Wrap-up

A cell phone number can be easily converted in an international way or according to the E-164 with the help of JavaScript. For this, take the cell phone number from the user, match it against a regEx to verify its integrity and then format it using the string manipulation techniques. In this article, all of these steps are explained in detail step by step.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.