web-dev-qa-db-fra.com

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

Je suis en train d'afficher des numéros de téléphone comme 2124771000. Cependant, j'ai besoin que le numéro soit formaté sous une forme plus lisible par l'homme, par exemple: 212-477-1000. Voici ma HTML actuelle:

<p class="phone">2124771000</p>
javascriptjquery
86
Xtian

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 des éléments en entrée. Pour le texte du champ de saisie, utilisez la méthode .val ().

207
andlrc
var phone = '2124771000',
    formatted = phone.substr(0, 3) + '-' + phone.substr(3, 3) + '-' + phone.substr(6,4)
52
Marc B

N'oubliez pas de vous assurer que vous travaillez 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;
});
12
Trenton Bost

Voici une combinaison de certaines de ces réponses. Ceci 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 live: 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. Donc, cette réponse est pour quiconque cherche quelque chose de similaire à ce que je cherchais.

6
Cruz Nunez

Utilisez une bibliothèque pour gérer le numéro de téléphone. Libphonenumber by 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 de seegno.

4
aloisdg

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
    }
  }
});
3
Anuj Patel

J'ai fourni le lien jsfiddle pour vous permettre de formater des numéros de téléphone américains en (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 live: JSFiddle

2
Kapilrc

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

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 expression rationnelle pour éviter le téléchargement d'une bibliothèque, éviter le reformatage sur retour arrière/supprimer facilitera la correction des fautes de frappe.)

2
Adam Lane

Une solution alternative:

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

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

1
Yi-Ting Liu

Contribution: 

4546644645

Code: 

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

OutPut: 

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

Sortie :-( 123) 657-8963

0
nirali

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 il s'est passé beaucoup de choses au cours des 6 années écoulées depuis son affichage initial. J'ai finalement trouvé la solution et je la documente ici pour la postérité.

Problème

Je souhaite que mon champ de saisie html de numéro de téléphone formate automatiquement (masque) la valeur saisie par l'utilisateur.

Solution

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

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

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