Skip to content
Related Articles

Related Articles

Improve Article

How to format a phone number in Human-Readable using JavaScript ?

  • Last Updated : 11 Oct, 2019
Geek Week

Give a phone number and the task is to format a phone number in such a way that it becomes easy to understand for humans. There are two approaches to format the numbers which are discussed below:

Approach 1:

  • A RegExp is used to replace the original phone number by human-readable phone number.
  • The RegExp is searching for the 3 digits and saving it in a variable($1 for first 3 digits, $2 for second 3 digits and so on.)
  • At the end, It is just concatenating them with ‘-‘ among them.

Example: This example implements the above approach.




<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to format a phone number in
        Human-Readable using JavaScript?
    </title>
      
    <script src=
    </script>
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1
      
    <p id = "GFG_UP" style
        "font-size: 15px; font-weight: bold;"
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p>
      
    <script>  
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var phoneNo = '4445556678';
          
        up.innerHTML = "Click on the button to format "
            + "the phone number.<br>Phone No: " + phoneNo; 
          
        function GFG_Fun() {
            down.innerHTML = 
                phoneNo.replace(/(\d{3})(\d{3})(\d{4})/,
                                '$1-$2-$3');
        
    </script>  
</body>  
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:



  • This example is using the substr() method to format a phone number in Human-Readable format.
  • It is taking a substrings of length 3 and putting ‘-‘ among them. Remaining string elements using the same method.

Example 2: This example implements the above approach.




<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to format a phone number in
        Human-Readable using JavaScript?
    </title>
      
    <script src=
    </script>
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1
      
    <p id = "GFG_UP" style
        "font-size: 15px; font-weight: bold;"
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p>
      
    <script>  
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var phoneNo = '4445556678';
          
        up.innerHTML = "Click on the button to format "
            + "the phone number.<br>Phone No: " + phoneNo; 
          
        function GFG_Fun() {
            down.innerHTML = 
                down.innerHTML = phoneNo.substr(0, 3)
                         + '-' + phoneNo.substr(3, 3)
                         + '-' + phoneNo.substr(6, 4);
        
    </script>  
</body>  
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :