Comment écrire un numéro de téléphone portable d'une manière internationale en utilisant JavaScript?

Comment écrire un numéro de téléphone portable d'une manière internationale en utilisant JavaScript?

Travailler avec les numéros de téléphone portable est quelque chose qui est important, surtout lors de la récupération des données de la base de données et de l'affichage à l'utilisateur sur le navigateur Web. Dans de tels scénarios, le programmeur doit s'assurer que le numéro de téléphone portable est formaté dans un certain format international.

Cet article expliquera comment prendre un numéro de téléphone portable, le formater de manière internationale et le montrer à l'utilisateur. Et le format international du numéro de téléphone portable sera "E-164", qui est intitulé le format international de numérotation publique publique.

Étape 1: Créer une page HTML

Commencez par la création d'une page Web HTML pour inviter l'utilisateur et afficher le numéro formaté avec les lignes suivantes:



Entrez le numéro dans la zone d'invite


Dans les lignes ci-dessus:

  • Le en charge la propriété est définie sur le tag qui recherche le commencer() fonction dans le javascript sur le chargement complet de la page Web.
  • UN La balise est créée pour informer l'utilisateur
  • Une div avec l'identifiant "nombre" est créé pour imprimer le numéro de téléphone portable formaté

L'exécution du document HTML affichera la page Web suivante sur le navigateur:

Cette page Web ne fait rien, cela changera à l'étape suivante

Étape 2: code JavaScript pour le numéro de téléphone portable formaté en e.164

Dans le fichier javascript, ou à l'intérieur du TAG, créez un nom de fonction comme start () qui va être exécuté sur le chargement complet de la page Web:

fonction start ()
// Les lignes à venir appartiennent ici

Dans cette fonction, utilisez une boîte d'invite pour obtenir les entrées de l'utilisateur et le stocker à l'intérieur de la variable "Cumbre d'utilisateur":

var userNumber = invite ("Entrez votre numéro de cellule");

Après cela, appliquez la méthode de correspondance () sur la variable nombre d'utilisateurs avec l'aide d'un opérateur de points. Nous comparerons l'entrée de l'utilisateur à la regex pour vérifier qu'il s'agit d'un numéro de cellule correct:

Résultat var = Nombre d'utilisateur.Match (/ ^ (1 |)?(\ d 3) (\ d 3) (\ d 4) $ /);

Après cela, vérifiez le résultat variable ou plus spécifiquement la valeur à l'indice 1 pour le pays pour correspondre à la valeur «1»:

var ccode = résultat [1] ? "+1": "";

Une fois que cette entrée est vérifiée, formatez simplement la chaîne au format E-164 correct à placer sur la page Web avec les suivantes:

var formattedNumber = ccode + "(" + résultat [2] + ")" + résultat [3] + "-" + résultat [4];

Et puis la dernière étape consiste à accéder à la div avec l'ID comme "nombre", puis définir sa valeur innerhtml sur le nombrer variable:

document.getElementByid ("numéro").innerhtml = "Le nombre international est:" + FormattedNumber;

L'extrait de code JavaScript complet est comme:

fonction start ()
var userNumber = invite ("Entrez votre numéro de cellule");
Résultat var = Nombre d'utilisateur.Match (/ ^ (1 |)?(\ d 3) (\ d 3) (\ d 4) $ /);
var ccode = résultat [1] ? "+1": "";
var formattedNumber =
ccode + "(" + résultat [2] + ")" + résultat [3] + "-" + résultat [4];
document.getElementByid ("numéro").innerhtml =
"Le nombre international est:" + FormattedNumber;

Étape 3: tester la sortie

Une fois que vous avez terminé les deux premières étapes, exécutez le document HTML et, lorsque vous êtes invité, saisissez le numéro de téléphone portable correct et observez la sortie suivante:

Le numéro inséré a été converti dans le E-164 Format de nombre

Conclure

Un numéro de téléphone portable peut être facilement converti de manière internationale ou selon l'E-164 avec l'aide de JavaScript. Pour cela, prenez le numéro de téléphone portable de l'utilisateur, faites-le correspondre à un regex pour vérifier son intégrité, puis le formater en utilisant les techniques de manipulation de chaîne. Dans cet article, toutes ces étapes sont expliquées en détail étape par étape.