Insert hyphens in javascript

Question

What is the easiest way to insert hyphens in javascript?

I have a phone number eg.1234567890

while displaying in the front end, I have to display it as 123-456-7890 using javascript.

what is the simplest and the quickest way to achieve this?

Thanks

Answer 1

If you're using the ASP.NET client library they have a great String.format method that provides locale formats and all kinds of fancy stuff. The method is called as you'd expect if you're familiar with .NET:

<script type="text/javascript">
    var myPhone = String.format("{0}-{1}-{2}", firstThree, secondThree, lastFour);
</script>

If you're not using ASP.NET library, I'm sure you could get the rudimentary formatting done in your own implementation - obviously this would be sans localization and you should throw some error handling/checking in the mix:

function format(str, arr){
     for(var i = 0; i < arr.length; i++) {
         var r = new RegExp("\\{" + i + "\\}", "g");
         str = str.replace(r,arr[i]);
    }
    return str;
}
alert(format("{0}-{1}-{2}", [123,456,7890]));

Answer 2

here's my solution just in case it helps someone:

validatePhone: function (e) {

    var number = this.$el.find('#phoneNumberField').val().replace(/-/g, '');

    if(number.length > 10) {
        e.preventDefault();
    }

    if(number.length < 3) {
        number = number; // just for legibility
    } else if(number.length < 7) {
        number = number.substring(0,3) + 
        '-' + 
        number.substring(3,6)
    } else if(number.length > 6) {
        number = number.substring(0,3) + 
        '-' + 
        number.substring(3,6) + 
        '-' + 
        number.substring(6,10);
    }

    this.$el.find('#phoneNumberField').val(number);

}

Answer 3

Given this kind of input, an other way would be:

var phone = "1234567890";
phone = phone.replace(/(\d{3})(\d{3})(\d+)/, '$1-$2-$3');

Of course this does not work if your input changes.

Answer 4

Another alternative that I believe is the cleanest one: the slice string method.

formattedPhone = phone.slice(0,3) + '-' + phone.slice(3, 6) + '-' phone.slice(6)

The first parameter is the start position in the string, the second is the end position. As you can see above, no parameters it goes till the end of the string. A nice feature is that, like Python, negative positions count from the end of the string. This can make your code somewhat more robust:

formattedPhone = phone.slice(0,3) + '-' + phone.slice(3, -4) + '-' + phone.slice(-4)

Even if you got a phone with 9 or 11 digits it will look nice.

Answer 5

You could use the substr-function to achieve this, assumed that the hyphens are always inserted on the same position:

var hypString = phonestr.substr(0,3) + '-' + phonestr.substr(3, 6) + '-' + phonestr.substr(6);

Answer 6

You can create a javascript function to format the phone number. Something like this:

    function formatPhoneStr(o)
    {
        var strPhone = o.value;

        if( (strPhone != null) && (strPhone.length > 0) && (strPhone.indexOf('(') == -1))
        {
            if (strPhone.length == 10)
            {
                strPhone = '(' + strPhone.substr(0,3) + ') ' + strPhone.substr(3,3) + '-' + strPhone.substr(6,4);
            }
            else if (strPhone.length > 10)
            {
                strPhone = '(' + strPhone.substr(0,3) + ') ' + strPhone.substr(3,3) + '-' + strPhone.substr(6,4) + ' x' + strPhone.substr(10);
            }
            o.value = strPhone;
        }
    }