How to format phone number using jQuery

Question

Phone numbers are currently displayed, for example 2124771000 . However, I need the number to be formatted in a more readable form, for example: 212-477-1000 . Here is my current HTML :

 <p class="phone">2124771000</p> 

Answer 1

Simple: http://jsfiddle.net/Xxk3F/3/

 $('.phone').text(function(i, text) { return text.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3'); }); 

Or: http://jsfiddle.net/Xxk3F/1/

 $('.phone').text(function(i, text) { return text.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '$1-$2-$3'); }); 

Note. A method of type .text () cannot be used for input elements. Use the .val () method for the text of the input field.

Answer 2

 var phone = '2124771000', formatted = phone.substr(0, 3) + '-' + phone.substr(3, 3) + '-' + phone.substr(6,4) 

Answer 3

Remember to make sure that you are working with pure integers.

 var separator = '-'; $( ".phone" ).text( function( i, DATA ) { DATA .replace( /[^\d]/g, '' ) .replace( /(\d{3})(\d{3})(\d{4})/, '$1' + separator + '$2' + separator + '$3' ); return DATA; }); 

Answer 4

Use the library to process your phone number. Google's Libphonenumber is your best bet.

 // Require `PhoneNumberFormat`. var PNF = require('google-libphonenumber').PhoneNumberFormat; // Get an instance of `PhoneNumberUtil`. var phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance(); // Parse number with country code. var phoneNumber = phoneUtil.parse('202-456-1414', 'US'); // Print number in the international format. console.log(phoneUtil.format(phoneNumber, PNF.INTERNATIONAL)); // => [phone] 

I recommend using this package with seegno.

Answer 5

try something like this.

 jQuery.validator.addMethod("phoneValidate", function(number, element) { number = number.replace(/\s+/g, ""); return this.optional(element) || number.length > 9 && number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); }, "Please specify a valid phone number"); $("#myform").validate({ rules: { field: { required: true, phoneValidate: true } } }); 

Answer 6

Here is a combination of some of these answers. This can be used for input fields. Contains phone numbers 7 and 10 digits long.

 // Used to format phone number function phoneFormatter() { $('.phone').on('input', function() { var number = $(this).val().replace(/[^\d]/g, '') if (number.length == 7) { number = number.replace(/(\d{3})(\d{4})/, "$1-$2"); } else if (number.length == 10) { number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3"); } $(this).val(number) }); } 

Real-time example: JSFiddle

I know that this does not directly answer the question, but when I was looking for the answers, this was one of the first pages I found. So, this answer is for those who are looking for something similar to what they were looking for.

Answer 7

Consider libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ), which is a smaller version of the full and famous libphonenumber.

Quick and dirty example:

 $(".phone-format").keyup(function() { // Don't reformat backspace/delete so correcting mistakes is easier if (event.keyCode != 46 && event.keyCode != 8) { var val_old = $(this).val(); var newString = new libphonenumber.asYouType('US').input(val_old); $(this).focus().val('').val(newString); } }); 

(If you use regular expression to avoid loading the library, avoid formatting in backspace / delete, this will make it easier to correct typos.)

Answer 8

I provided a jsfiddle link to format US phone numbers (XXX) XXX-XXX

  $('.class-name').on('keypress', function(e) { var key = e.charCode || e.keyCode || 0; var phone = $(this); if (phone.val().length === 0) { phone.val(phone.val() + '('); } // Auto-format- do not expose the mask as the user begins to type if (key !== 8 && key !== 9) { if (phone.val().length === 4) { phone.val(phone.val() + ')'); } if (phone.val().length === 5) { phone.val(phone.val() + ' '); } if (phone.val().length === 9) { phone.val(phone.val() + '-'); } if (phone.val().length >= 14) { phone.val(phone.val().slice(0, 13)); } } // Allow numeric (and tab, backspace, delete) keys only return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }) .on('focus', function() { phone = $(this); if (phone.val().length === 0) { phone.val('('); } else { var val = phone.val(); phone.val('').val(val); // Ensure cursor remains at the end } }) .on('blur', function() { $phone = $(this); if ($phone.val() === '(') { $phone.val(''); } }); 

Real-time example: JSFiddle

Answer 9

I found this question while searching along the way to automatically format phone numbers through the jQuery plugin. The accepted answer was not ideal for my needs, and a lot has happened in 6 years since its initial publication. In the end, I found a solution and document it here for posterity.

problem

I would like my html phone number input field to automatically format (mask) the value that the user enters.

Decision

Check out Cleave.js . This is a very powerful / flexible and easy way to solve this problem and many other data masking problems.

Formatting a phone number is as simple as:

 var cleave = new Cleave('.input-element', { phone: true, phoneRegionCode: 'US' }); 

Answer 10

Input data :

 4546644645 

The code:

 PhoneNumber = Input.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, "($1)$2-$3"); 

Exit:

 [phone] 

Answer 11

Alternative solution:

 function numberWithSpaces(value, pattern) { var i = 0, phone = value.toString(); return pattern.replace(/#/g, _ => phone[i++]); } console.log(numberWithSpaces('2124771000', '###-###-####')); 

Answer 12

Maybe this will help

 var countryCode = +91; var phone=1234567890; phone=phone.split('').reverse().join('');//0987654321 var formatPhone=phone.substring(0,4)+'-';//0987- phone=phone.replace(phone.substring(0,4),'');//654321 while(phone.length>0){ formatPhone=formatPhone+phone.substring(0,3)+'-'; phone=phone.replace(phone.substring(0,3),''); } formatPhone=countryCode+formatPhone.split('').reverse().join(''); 

you will receive + 91-123-456-7890