Número de teléfono RegEx en JavaScript

Cada país tiene su propio formato de número, y antes de almacenar estos datos en la base de datos, debemos asegurarnos de que el usuario esté ingresando el formato de número correcto. En esta publicación, aprenderemos a escribir expresiones regulares para números de teléfono en JavaScript.

RegEx en JavaScript

Las expresiones regulares son como una herramienta de búsqueda que puede encontrar patrones específicos en cadenas. Un buen recurso para aprender RegEx es https://regexr.com. JavaScript también admite expresiones regulares como objeto. Estos patrones se utilizan con matchAll(), match(), replaceAll(), replace(), search(), y split(). Hay dos formas de construir la expresión regular, usar una expresión regular literal y llamar a la función constructora del objeto RegExp.

Comprendamos algunos de los patrones comunes antes de pasar al número de teléfono RegEx.

• \d: esta expresión regular coincide con cualquier número / dígito. Es similar a [0-9].
• \w: esta expresión regular coincide con cualquier código de carácter de palabra en el rango de A - Z, a - z, 0 - 9 y _.
• \s: esta expresión regular coincide con todos los caracteres de espacio en blanco, como espacios, tabulaciones, saltos de línea.
• \b: esta expresión regular coincide con cualquier posición de límite de palabra entre un carácter de palabra y un carácter que no es de palabra o una posición (principio / final de la cadena de caracteres).
• [A-Z]: esta expresión regular coincide con cualquier código de carácter dado en el rango de A - Z.
• [0-9]: esta expresión regular coincide con cualquier código de carácter dado en el rango de 0 - 9.
• (?:ABC): esta expresión regular agrupa varios tokens sin crear un grupo de captura.

Cada expresión regular contiene determinadas etiquetas que se enumeran a continuación:

• i: este indicador significa que no distingue entre mayúsculas y minúsculas, lo que significa que toda la expresión no distingue entre mayúsculas y minúsculas.
• g: Esta bandera significa una búsqueda global que mantiene el índice de la última coincidencia para que las búsquedas posteriores puedan comenzar al final de la coincidencia anterior. Sin la bandera global, las búsquedas posteriores devolverán la misma coincidencia.
• m: esta bandera significa multilínea. Cuando la bandera de varias líneas está activada, los anclajes de inicio y fin (^ y $) coinciden con el principio y el final de una línea, no con el principio y el final de toda la cadena.
• u: esta bandera significa Unicode. Los usuarios pueden usar escapes Unicode extendidos de la forma \ x {FFFFF} activando esta bandera.
• y: esta bandera significa pegajosa. La expresión solo coincide con su posición lastIndex e ignora la bandera global (g) si está configurada. Dado que cada búsqueda en RegEx es discreta, este indicador no tiene ningún efecto adicional en los resultados mostrados.
• s: esta bandera significa dotAll. Un punto (.) Coincide con cada carácter, incluida la nueva línea.

Sintaxis de RegEx en JavaScript

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

Código de ejemplo:

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

Producción: