Numéro de téléphone RegEx en JavaScript

Chaque pays a son propre format de nombre, et avant de stocker ces données dans la base de données, nous devons nous assurer que l’utilisateur saisit le bon format de nombre. Dans cet article, nous allons apprendre à écrire des expressions régulières pour les numéros de téléphone en JavaScript.

RegEx en JavaScript

Les expressions régulières sont comme un outil de recherche qui peut trouver des modèles spécifiques dans les chaînes. Une bonne ressource pour apprendre RegEx est https://regexr.com. JavaScript prend également en charge les expressions régulières en tant qu’objet. Ces modèles sont utilisés avec matchAll(), match(), replaceAll(), replace(), search() et split(). Il existe deux manières de construire l’expression régulière, d’utiliser une expression régulière littérale et d’appeler la fonction constructeur de l’objet RegExp.

Comprenons certains des modèles courants avant de passer au numéro de téléphone RegEx.

• \d : cette expression régulière correspond à n’importe quel nombre/chiffre. C’est similaire à [0-9].
• \w : cette expression régulière correspond à tout code de caractère de mot donné dans la plage A - Z, A - Z, 0 - 9 et _.
• \s : cette expression régulière correspond à tous les caractères d’espacement, tels que les espaces, les tabulations, les sauts de ligne.
• \b : Cette expression régulière correspond à toute position de limite de mot entre un caractère mot et un caractère non-mot ou une position (début/fin de la chaîne de caractères).
• [A-Z] : cette expression régulière correspond à tout code de caractère donné dans la plage de A à Z.
• [0-9] : cette expression régulière correspond à tout code de caractère donné dans la plage de 0 à 9.
• (?:ABC) : Cette expression régulière regroupe plusieurs jetons sans créer de groupe de capture.

Chaque RegEx contient certaines balises répertoriées ci-dessous :

• i : ce drapeau signifie qu’il est insensible à la casse, ce qui signifie que l’expression entière n’est pas sensible à la casse.
• g : ce drapeau signifie une recherche globale qui maintient l’index de la dernière correspondance afin que les recherches suivantes puissent commencer à la fin de la correspondance précédente. Sans l’indicateur global, les recherches suivantes renverront la même correspondance.
• m : Ce drapeau signifie multiligne. Lorsque le drapeau multiligne est activé, les ancres de début et de fin (^ et $) correspondent au début et à la fin d’une ligne, et non au début et à la fin de la chaîne entière.
• u : ce drapeau signifie Unicode. Les utilisateurs peuvent utiliser des échappements Unicode étendus de la forme \ x {FFFFF} en activant ce drapeau.
• y : Ce drapeau signifie collant. L’expression ne correspond qu’à sa position lastIndex et ignore le drapeau global (g) s’il est défini. Étant donné que chaque recherche dans RegEx est discrète, cet indicateur n’a plus d’effet sur les résultats affichés.
• s : ce drapeau signifie dotAll. Un point (.) correspond à chaque caractère, y compris la nouvelle ligne.

Syntaxe de RegEx en JavaScript

const regEx = /pattern/;
const regEx = new RegExp('pattern');

Exemple de code :

<form name="form1">
  <input type='text' id="phoneNumber" name='text1'/>
  <button type="submit" name="submit" onclick="phonenumber()">Submit</button>
</form>

function phonenumber() {
  const indiaRegex = /^\+91\d{10}$/;
  const inputText = document.getElementById('phoneNumber').value;
  if (inputText.match(indiaRegex)) {
    console.log('Valid phone number');
  } else {
    console.log('Not a valid Phone Number');
  }
}

Production :