Comment formater un numéro de téléphone avec jQuery

J'affiche actuellement des numéros de téléphone comme 2124771000. Cependant, je dois le nombre à formater sous une forme plus lisible par l' homme, par exemple: 212-477-1000. Voici mon courant HTML:

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

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

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

Ou: 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');
});

Remarque: La méthode .text () ne peut pas être utilisée sur les éléments d'entrée. Pour le texte du champ de saisie, utilisez la méthode .val ().

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

N'oubliez pas de vous assurer que vous travaillez uniquement avec des nombres entiers.

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;
});

Voici une combinaison de certaines de ces réponses. Cela peut être utilisé pour les champs de saisie. Traite les numéros de téléphone composés de 7 et 10 chiffres.

// 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)
  });
}

Exemple en direct: JSFiddle

Je sais que cela ne répond pas directement à la question, mais lorsque je cherchais des réponses, c'était l'une des premières pages que j'ai trouvées. Cette réponse s'adresse donc à tous ceux qui recherchent quelque chose de similaire à ce que je recherchais.

Utilisez une bibliothèque pour gérer le numéro de téléphone. Libphonenumber de Google est votre meilleur pari.

// 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));
// => +1 202-456-1414

Je recommande d'utiliser ce package par seegno.

J'ai fourni le lien jsfiddle pour que vous puissiez formater les numéros de téléphone américains au format (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('');
  }
});

Exemple en direct: JSFiddle

essayez quelque chose comme ça ...

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
    }
  }
});

Considérez libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ) qui est une version plus petite du célèbre libphonenumber complet.

Exemple rapide et sale:

$(".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);
}
});

(Si vous utilisez une regex pour éviter un téléchargement de bibliothèque, éviter le reformatage sur retour arrière / suppression facilitera la correction des fautes de frappe.)

Une solution alternative:

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

console.log(numberWithSpaces('2124771000', '###-###-####'));

J'ai trouvé cette question en cherchant sur Google un moyen de formater automatiquement les numéros de téléphone via un plugin jQuery. La réponse acceptée n'était pas idéale pour mes besoins et beaucoup de choses se sont passées au cours des 6 années écoulées depuis sa publication initiale. J'ai finalement trouvé la solution et je la documente ici pour la postérité.

Problème

Je voudrais que le champ de saisie HTML de mon numéro de téléphone formate automatiquement (masque) la valeur au fur et à mesure que l'utilisateur tape.

Solution

Découvrez Cleave.js . C'est un moyen très puissant / flexible et simple de résoudre ce problème et de nombreux autres problèmes de masquage des données.

Formater un numéro de téléphone est aussi simple que:

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

Contribution:

4546644645

Code:

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

Production:

(454)664-4645

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

Sortie :-( 123) 657-8963

peut-être que cela aidera

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('');

vous obtiendrez le + 91-123-456-7890