Expression régulière pour reformater un numéro de téléphone américain en Javascript

Question

Je cherche à reformater (remplacer, pas valider - il y a de nombreuses références pour la validation) un numéro de téléphone pour l'afficher en Javascript. Voici un exemple de données :

• 123 4567890
• (123) 456-7890
• (123)456-7890
• 123 456 7890
• 123.456.7890
• (vide/nul)
• 1234567890

Existe-t-il un moyen simple d'utiliser une expression régulière pour ce faire ? Je cherche la meilleure façon de le faire. Existe-t-il une meilleure méthode ?

Je souhaite reformater le numéro comme suit : (123) 456-7890

Answer 1

Penser à l'envers

Ne prendre que les derniers chiffres (jusqu'à 10) en ignorant le premier "1".

function formatUSNumber(entry = '') {
  const match = entry
    .replace(/\D+/g, '').replace(/^1/, '')
    .match(/([^\d]*\d[^\d]*){1,10}$/)[0]
  const part1 = match.length > 2 ? `(${match.substring(0,3)})` : match
  const part2 = match.length > 3 ? ` ${match.substring(3, 6)}` : ''
  const part3 = match.length > 6 ? `-${match.substring(6, 10)}` : ''    
  return `${part1}${part2}${part3}`
}

exemple d'entrée / sortie au fur et à mesure de la saisie

formatUSNumber('+1333')
// (333)

formatUSNumber('333')
// (333)

formatUSNumber('333444')
// (333) 444

formatUSNumber('3334445555')
// (333) 444-5555

Answer 2

Basé sur la réponse de David Baucum - voici une version qui tente d'améliorer l'auto-remplacement "au fur et à mesure que vous tapez" par exemple dans un gestionnaire d'événement React onChange :

function formatPhoneNumber(phoneNumber) {
  const cleanNum = phoneNumber.toString().replace(/\D/g, '');
  const match = cleanNum.match(/^(\d{3})(\d{0,3})(\d{0,4})$/);
  if (match) {
    return '(' + match[1] + ') ' + (match[2] ? match[2] + "-" : "") + match[3];
  }
  return cleanNum;
}

//...

onChange={e => setPhoneNum(formatPhoneNumber(e.target.value))}

Il insérera (###) dès qu'il y aura 3 chiffres et continuera à suivre le RegEx jusqu'à ce qu'il ressemble à ceci (###) ###-####

Answer 3

2021

libphonenumber-js

Exemple

import parsePhoneNumber from 'libphonenumber-js'

const phoneNumber = parsePhoneNumber('+12133734253')

phoneNumber.formatInternational() === '+1 213 373 4253'
phoneNumber.formatNational() === '(213) 373-4253'
phoneNumber.getURI() === 'tel:+12133734253'

Answer 4

J'ai prolongé Réponse de David Baucum pour inclure la prise en charge des extensions d'une longueur maximale de 4 chiffres. Elle inclut également les parenthèses demandées dans la question initiale. Cette mise en forme fonctionnera au fur et à mesure que vous taperez dans le champ.

phone = phone.replace(/\D/g, '');
const match = phone.match(/^(\d{1,3})(\d{0,3})(\d{0,4})(\d{0,4})$/);
if (match) {
    phone = `(${match[1]}${match[2] ? ') ' : ''}${match[2]}${match[3] ? '-' : ''}${match[3]}${match[4] ? ' x' : ''}${match[4]}`;
}
return phone;

Answer 5

Presque tous ces systèmes posent des problèmes lorsque l'utilisateur tente d'effectuer un retour arrière sur les délimiteurs, en particulier à partir du milieu de la chaîne.

Voici une solution jquery qui gère cela, et qui s'assure également que le curseur reste au bon endroit pendant que vous éditez :

//format text input as phone number (nnn) nnn-nnnn
$('.myPhoneField').on('input', function (e){
    var $phoneField = e.target;
    var cursorPosition = $phoneField.selectionStart;
    var numericString = $phoneField.value.replace(/\D/g, '').substring(0, 10);

    // let user backspace over the '-'
    if (cursorPosition === 9 && numericString.length > 6) return;

    // let user backspace over the ') '
    if (cursorPosition === 5 && numericString.length > 3) return;
    if (cursorPosition === 4 && numericString.length > 3) return;

    var match = numericString.match(/^(\d{1,3})(\d{0,3})(\d{0,4})$/);
    if (match) {
        var newVal = '(' + match[1];
        newVal += match[2] ? ') ' + match[2] : '';
        newVal += match[3] ? '-' + match[3] : '';

        // to help us put the cursor back in the right place
        var delta = newVal.length - Math.min($phoneField.value.length, 14);      
        $phoneField.value = newVal;
        $phoneField.selectionEnd = cursorPosition + delta;
    } else {
        $phoneField.value = '';        
    }
})