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

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

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

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


javascript html jquery jquery-inputmask
person Alaa    schedule 23.04.2019    source источник
comment
вам придется написать небольшую функцию (либо в коде на стороне сервера, либо на стороне клиента, в зависимости от вашей архитектуры), которая принимает номер телефона в качестве входных данных, анализирует его и форматирует так, как вы хотите, а затем возвращает отформатированную строку как выход. Это не то, что вы можете сделать напрямую с настройками или атрибутами HTML или чем-то подобным.   -  person ADyson    schedule 23.04.2019
comment
@ADyson Спасибо, теперь я понимаю. Является ли серверная функция похожей на эту ссылку Вы подразумеваете под клиентским кодом JS/jQuery? У меня также есть возможность хранить данные в базе данных в форматах, а затем извлекать их в форматированном виде. Это нормально с точки зрения передовой практики?   -  person Alaa    schedule 23.04.2019
comment
Да. Хотя на стороне сервера может быть код практически на любом языке, который может интегрироваться с веб-сервером, например. PHP, NodeJS, ASP.NET, Python, Java и многие другие. Я предполагал, что вы, вероятно, уже используете определенный серверный язык в своем приложении, иначе я не уверен, как бы вы успешно реализовали какую-либо функцию входа в систему.   -  person ADyson    schedule 23.04.2019
comment
И да, клиентская сторона в контексте веб-приложения обычно означает код JavaScript, работающий в браузере (конечно, если клиент не является браузером — иногда это может быть, например, мобильное приложение, но поскольку вы пометили JavaScript и jQuery Я предполагаю, что ваш клиент - браузер)   -  person ADyson    schedule 23.04.2019
comment
@ADyson Извините, если в моем исходном вопросе не упоминаются подробности о моей реализации. Да, мое приложение основано на PHP для серверной части. Это веб-сайт с поддержкой jQuery и JS. Smarty — мой шаблонизатор. Я считаю, что в качестве лучшей практики я бы нашел решение на основе Regex с Smarty. Я буду избегать хранения чисел с форматами в базе данных.   -  person Alaa    schedule 23.04.2019
comment
Абсолютно не следует форматировать числа в базе данных - это создаст проблемы, если вам потребуется, например, поддержка разных языков, где обычно используются разные форматы для отображения таких вещей, как номера телефонов.   -  person ADyson    schedule 23.04.2019
comment
И я согласен с тем, что делать это с помощью механизма шаблонов PHP имеет большой смысл. Вы смотрели что-нибудь вроде это ?   -  person ADyson    schedule 23.04.2019

Ответы (1)


arrow_upward
-1
arrow_downward

С 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>

person davidzcode    schedule 23.04.2019
comment
Это не то, чего я хочу. Данные должны быть отформатированы при извлечении из базы данных, а не по определенному событию. Например, когда пользователь посещает страницу своего профиля, он должен увидеть свой номер телефона в правильном формате. - person Alaa; 23.04.2019
comment
Я знаю, используйте ввод только для примера, важна функция - person davidzcode; 23.04.2019