Filter Phone Number in Angular

AngularLogo I have been meaning to store filters I find useful and write a little blog post about each one just so I have access to them and maybe someone else will find them handy. This filter is for displaying phone numbers in the following format: 1(xxx) xxx-xxxx

When users are inputting their information you can get all kinds of junk and formats. Instead of forcing the users to a rigid validation format, I just strip out all the non-numeric values and store the raw numbers. Then on the client side code I use this filter to display the phone number in a nice format.

    App.filter('phoneNumber', function () {
        return function (number) {
            if (!number) { return ''; }
            number = String(number);
            number = number.replace(/[^0-9]*/g, '');
            var formattedNumber = number;

            var c = (number[0] == '1') ? '1' : '';
            number = number[0] == '1' ? number.slice(1) : number;

            var area = number.substring(0, 3);
            var front = number.substring(3, 6);
            var end = number.substring(6, 10);

            if (front) {
                formattedNumber = (c + "(" + area + ") " + front);
            }
            if (end) {
                formattedNumber += ("-" + end);
            }
            return formattedNumber;
        };
    });



//using the code would look something like the following
   <div>{{User.PhoneNumber|phoneNumber}}</div>

App.filter('phoneNumber', function () {

return function (number) {

if (!number) { return ''; }

number = String(number);

number = number.replace(/[^0-9]*/g, '');

var formattedNumber = number;

var c = (number[0] == '1') ? '1' : '';

number = number[0] == '1' ? number.slice(1) : number;

var area = number.substring(0, 3);

var front = number.substring(3, 6);

var end = number.substring(6, 10);

if (front) {

formattedNumber = (c + "(" + area + ") " + front);

}

if (end) {

formattedNumber += ("-" + end);

}

return formattedNumber;

};

});

//using the code would look something like the following

<div>{{User.PhoneNumber|phoneNumber}}</div>