Live formatting of phone numbers using regular expressions

Question

Live formatting of phone numbers using regular expressions

For my AngularJS project, I am looking to format phone numbers as they are being typed, without relying on any external library.

The desired format is: 99 99 99 99 99

var phone = tel.replace(/\D*(\d{2})\D*(\d{2})\D*(\d{2})\D*(\d{2})\D*(\d{2})\D*/, '$1 $2 $3 $4 $5');

The issue I encountered is that the regular expression only formats the number once it has been fully typed. Is there a way to make it work while the number is still being entered?

I attempted a modified version of the regular expression:

var phone = tel.replace(/\D*(\d{2})\D*(\d{0,2})?\D*(\d{0,2})?\D*(\d{0,2})?\D*(\d{0,2})?\D*/, '$1 $2 $3 $4 $5');

However, this resulted in unnecessary additional spaces being added. Any suggestions on how to improve the regex?

javascript regex angularjs

Answer 1

Answer №1

While you insist on wanting it to be "straight forward," it is important to note that artificially restricting the solution to just regex may not be the most effective approach for your problem.

Why is that? The issue lies in the fact that your problem requires the addition of new characters (spaces) conditionally to the output. This poses a challenge as the standard .replace() method is not capable of handling such conditional formatting.

A more efficient solution would involve utilizing a combination of regex and other JavaScript functions to address the conditional aspect:

// Extract only the digits from the input string
var phoneDigits = tel.replace(/\D/g, "");
// Combine the first 5 pairs of digits with spaces,
// accommodating for standalone digits if the total count is odd.
var phone = (phoneDigits.match(/\d\d?/g) || []).slice(0,5).join(" ");

(Using || [] ensures that the match does not return null when no digits are found.)

Answer 2

While you insist on wanting it to be "straight forward," it is important to note that artificially restricting the solution to just regex may not be the most effective approach for your problem.

Why is that? The issue lies in the fact that your problem requires the addition of new characters (spaces) conditionally to the output. This poses a challenge as the standard .replace() method is not capable of handling such conditional formatting.

A more efficient solution would involve utilizing a combination of regex and other JavaScript functions to address the conditional aspect:

// Extract only the digits from the input string
var phoneDigits = tel.replace(/\D/g, "");
// Combine the first 5 pairs of digits with spaces,
// accommodating for standalone digits if the total count is odd.
var phone = (phoneDigits.match(/\d\d?/g) || []).slice(0,5).join(" ");

(Using || [] ensures that the match does not return null when no digits are found.)

Answer 3

Answer №2

One way to achieve this is by utilizing a cascade style pattern.

var phone = tel.replace(/\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*)?)?)?)?)?/, '$1 $2 $3 $4 $5');

 \D* 
 (?:
      ( \d{2} )                     # (1)
      \D* 

      (?:
           ( \d{2} )                     # (2)
           \D* 

           (?:
                ( \d{2} )                     # (3)
                \D* 

                (?:
                     ( \d{2} )                     # (4)
                     \D* 

                     (?:
                          ( \d{2} )                     # (5)
                          \D* 
                     )?
                )?
           )?
      )?
 )?

Answer 4

One way to achieve this is by utilizing a cascade style pattern.

var phone = tel.replace(/\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*)?)?)?)?)?/, '$1 $2 $3 $4 $5');

 \D* 
 (?:
      ( \d{2} )                     # (1)
      \D* 

      (?:
           ( \d{2} )                     # (2)
           \D* 

           (?:
                ( \d{2} )                     # (3)
                \D* 

                (?:
                     ( \d{2} )                     # (4)
                     \D* 

                     (?:
                          ( \d{2} )                     # (5)
                          \D* 
                     )?
                )?
           )?
      )?
 )?

Live formatting of phone numbers using regular expressions

Answer №1

Answer №2

Similar questions

Issue with date and time range in SQL query when using PHP AJAX

Creating a Dynamic Tree View Component in AngularJS Using JSON Data

Parsing JSON data results in a string output

Using jQuery, you can submit a form easily

Single-way binding in ng-bind for Angular JS 1.3 or higher with a conditional ternary expression

how to show an error in a modal window when encountering an error

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Firefox experiencing trouble handling flexbox overflow

Tips on displaying a selected choice | Utilizing Material UI Autocomplete

Sending data to another page by selecting a list item

My AngularJS ng-show functionality is not functioning as expected. I have already reviewed the syntax and still encountering issues

"Adjust the placement of a personalized marker on a Google Map using google-map-react

The perfect method for creating template literals using a function

Ways to retrieve information from a JSON using Regular Expression

Third Party Embedded Video requiring SSL Certificate

Troubleshooting a GetStaticProps problem in Next.js

Encountering a 403 error when attempting to upload files from Angular to a Micron

Listener for a special event in Three.js

Why does app.post function while router.post does not seem to work?

Is there a way to accelerate the webpack bundling process when using React during development?