Como formatar o número de telefone em JavaScript

É necessário manter os dados seguros e alinhados, principalmente quando se trata de números de telefone. Os sites que coletam os números de telefone dos usuários geralmente enfrentam problemas de formato. Os usuários preenchem seus dados de maneira muito incerta sem manter os padrões em vista. Isso dificulta o processamento de dados para os desenvolvedores de sites. Para evitar tais situações, o JavaScript pode ser usado para formatar os números de telefone de acordo com um padrão específico.

Este blog discutirá o procedimento relacionado à formatação de um número de telefone em JavaScript.

Como formatar o número de telefone em JavaScript?

Em JavaScript, para formatar um número de telefone, usaremos os seguintes métodos:

• RegEx
• método substr()

Vamos nos aprofundar no primeiro método!

Métodos 1: usando RegEx para formatar número de telefone em JavaScript

“ RegEx ” é uma abreviação para expressão regular. É o recipiente de caracteres que introduz um padrão de pesquisa em relação a uma string e, em seguida, substitui ou remove os valores existentes de uma string por novos valores, respectivamente.

Vamos seguir em frente e dar um exemplo para entender como o uso do método RegEx pode formatar um número de telefone.

Exemplo

Neste exemplo, vamos criar uma variável “ p ” e atribua a ele um número aleatório não formatado:

Em seguida, invoque o método replace(), onde \D é para dígitos de [0-9], + é para detectar a repetição de dígitos e g é para a correspondência global. Em seguida, chame novamente o método replace() com uma sequência especial de caracteres, como (\d{1}) para definir um dígito, (\d{3}) para definir três dígitos e (\d{4}) para definir quatro dígitos. Para saber mais sobre essas operações, confira nossos outros artigo dedicado .

Além disso, $1 será o primeiro grupo e o + será alinhado logo antes dele, ($2) será o segundo grupo entre colchetes, $3-$4 será o terceiro e quarto grupo com um sinal de hífen (-):

Agora, imprima os resultados usando a linha abaixo:

Como você pode ver, formatamos o número de telefone com sucesso.

Métodos 2: usando substr() para formatar número em JavaScript

O ' substr() ” extrai a substring de um índice específico até o índice final mencionado. Este método pode ajudar a criar substrings de números com formato e sequência de caracteres adequados. Como resultado, um número formatado será gerado.

Sintaxe

Aqui o ' substr() ” irá recuperar a substring do “ começar ” indexar até o “ fim ” índice da string fornecida.

Exemplo 1

Vamos dividir o programa em três partes. Na primeira parte, consideraremos o valor “ p.substr(0, 3) ”, pois 0 é o ponto de partida e 3 é o comprimento; na segunda parte, o valor “ p.substr(3, 3) ” indica que os dígitos começarão na 4ª posição e seu comprimento será 3. A última parte tem o valor “ p.substr(6, 4) ” onde as posições dos dígitos começam em 7 e seu comprimento total é 4:

Resultado

Agora, vamos dar outro exemplo para descobrir como podemos inserir o código do país junto com nosso número usando o mesmo método.

Exemplo 2

Neste exemplo, pegaremos a string “ str ” e faça o “ +1 ” para armazenar nele:

Agora, vamos definir 1 como o ponto de partida no primeiro valor de “ p.substr(1, 3) ”. O código restante permanecerá o mesmo:

Imprima a string str recém-inicializada com a string p:

Resultado

Aprendemos o procedimento para formatar o número de telefone em JavaScript por meio de dois métodos diferentes.

Conclusão

Para formatar o número de telefone, o “ RegEx ' ou ' substr() ” pode ser utilizado. Ao definir a expressão regular, você precisa criar um padrão e, com a ajuda do método replace(), o número de telefone pode ser formatado. No método substr(), três partes podem ser criadas, e cada parte tem um ponto inicial e comprimento definidos. Este artigo abordou o método para formatar números de telefone em JavaScript.