Как я могу отформатировать телефонные номера или добавить определенную маску для <span>или не редактируемых элементов HTML?

Question

У меня есть веб-сайт, на котором я разрешаю посетителям входить через свои мобильные телефоны. Их номера хранятся без форматирования в базе данных.

Как мне отформатировать их числа при отображении в HTML-элементе? Я хочу, чтобы пользователь видел; например; «Вы вошли, используя + 1-541-754-3010» вместо 15417543010.

Я ищу здесь и там, но все решения, которые я нашел для маскировки полей ввода при вводе данных, а не при их получении.

Answer 1

С помощью jQuery вы можете сделать функцию для этого

, в функции сначала проверить размер числа, затем преобразовать его в массив , затем применить формат к каждой группе чисел и передать их во вспомогательный массив и вернуть значение.

$(function(){
  $('input').keyup(function(){
    phoneFormat($(this).val())
  })
})

function phoneFormat(number){
  if(number.length == 11){
    var array = number.split('');
    var auxArray = []
    auxArray[0] = '+'+array[0]
    auxArray[1] = '-'+array[1]+array[2]+array[3]
    auxArray[2] = '-'+array[4]+array[5]+array[6]
    auxArray[3] = '-'+array[7]+array[8]+array[9]+array[10]
    number = auxArray.join("")
    $('span').text(number);
  }else{
    $('span').text("")
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input maxlength="11" type="text">
</div>
You are logged in using: <span></span>