How to format a phone number with .replace() function in Javascript

Question

I am working on a regular expression for Canadian phone number in javascript and / or in jQuery. I'm having some trouble into the formating after I have passed my main regular expression.

Mainly, I need to format a phone number in this way when the user leave the input field :

1. 111-222-3333
2. 111-222-3333 #44444 (up to 5 digits)
3. 1-222-333-4444
4. 1-222-333-4444 #55555 (up to 5 digits)

As you can see above, I want to be able to format a normal phone number and a toll free number at the same time.

The code

In my HTML, I have done a simple input field.

<input id="assure_telephone" placeholder="Phone number" name="assure_telephone" maxlength="25" type="text" />

For my jQuery, I picked up the code found in my large file and simplified it a little bit. We need to focus on my regular expressions.

$('#assure_telephone').bind('change', function(){
    // Delete all caracters and specials caraters except numbers
    telephone_user = $('#assure_telephone').val().replace(/[^0-9]/g, '');

    // Format the new phone number
    telephone_user_regex = telephone_user.replace(/(\d{3})(\d{3})(\d{4})(\d{0,5})/, "$1-$2-$3 #$4");

    $('#assure_telephone').val(telephone_user_regex);
});

The logic behind my code

As you can see, I'm starting by removing all special caracters to only keep numbers and then after I apply a formating with the .replace() Javscript function.

Link to my actual demo : http://jsfiddle.net/y201gcdg/6/

As you can see, it is pretty obvious that a toll free won't work as my formating is really made for normal phone number and not toll free.

My question is : Is there any way to work arround with the length of my telephone_user_regex variable to detect if it is a toll free or no OR is there any way to acheive it with a better regular expression?

Alternatively, I founded this on Stackoverflow that might be helping : https://code.google.com/p/libphonenumber/ (Source: Phone number format in Javascript)

Other ressource : http://www.w3schools.com/jsref/jsref_replace.asp

EDIT#1 - Deleted it after an answer that was not usefull.

EDIT#2 - Possible answer : Count the caracters Source : A comprehensive regex for phone number validation

I could start with my first replace() function and then count the number of caracter, if it exceed X number, then apply a formating, else do an other one.

---

EDIT#3 - As I did not wanted to make an answer for my own question, I will post my workarround here.

var typephone = type;

// We take out all caracters except 0 to 9
var telephone_user = $('#'+typephone).val().replace(/[^0-9]/g, '');

// Now I can make switch case to detect the kind of phone number I need to format
switch(telephone_user.length) {
           case 0 :
           case 1 :
           case 2 :
           case 3 :
           case 4 :
           case 5 :
           case 6 :
           case 7 :
           case 8 :
           case 9 :
                console.log('Your phone number is too small');
                break;
           case 10 : 
                console.log('This is a phone number 111-222-3333');
                break;
 }

In this way, I am able to detect the length and I could be able to know if it is a toll-free or a normal phone number. I might have trouble when it will come to the point the customer wrote something like this : 111-222-3333 #44444. After the special caracter removal, I won't be able to know if it was an extension.

Answer 1

Here's my suggestion:

1. Don't replace # (i.e. do replace(/[^0-9#]/g, '')), because otherwise you couldn't detect if the 11th character is the country code or an extension.
2. You can then use the position of the # to determine the length of the actual number (without extension), i.e., telephone_user.search("#")
3. You can then conditionally format the phone number based on #2, e.g. if it's the 12th digit, format telephone_user with the country code. Also, with the switch-case, I would just do the 3-4 valid cases, and default on everything else.