How can I format phone numbers or add a specific mask on a or none-editable HTML elements?

Question

I have a website where I allow visitors to login via their mobile phones. Their numbers are stored without formatting in the Database.

How can I format their numbers when displaying it within an HTML element? I want the user to see; for example; "You are logged in using +1-541-754-3010" instead of 15417543010.

I search here and there but all the solutions which I found for masking input fields when entering data and not when retrieving it.

you'd have to write a little function (either in server- or client-side code, depending on your architecture) which accepts the phone number as input, parses it, and formats it in the way you desire, then returns the formatted string as the output. It's not something you can do directly with settings or HTML attributes or anything like that. — ADyson, Apr 23 '19 at 11:09
@ADyson Thank you, I understand now. Is a server-side function similar to this [link](https://stackoverflow.com/questions/5872096/function-to-add-dashes-to-us-phone-number-in-php) Do you mean by a client-side code a JS/jQuery? I have the option also to store the data in the database with formats and then retrieve it formatted. Is this OK in terms of best practice? — Alaa, Apr 23 '19 at 14:36
Yes. Although server-side could be code in almost any language that might integrate with a webserver, e.g. PHP, NodeJS, ASP.NET, Python, Java and many more. I was assuming you were probably already using a specific server-side language in your application - otherwise I'm not sure how you would successfully implement any kind of login function. — ADyson, Apr 23 '19 at 14:37
And yes, "client-side" in the context of a web application usually means JavaScript code running in the browser (unless the client is not a browser, of course - it might sometimes be a mobile app, for example, but since you tagged JavaScript and jQuery I assume your client is a browser) — ADyson, Apr 23 '19 at 14:38
@ADyson Sorry if my original question doesn't mention my details about my implementation. Yes, my application is based on PHP for Server-Side. It is a website with support for jQuery and JS. Smarty is my template engine. I believe as a best practice, I would find a solution based on Regex with Smarty. I will avoid storing numbers with formats in the database. — Alaa, Apr 23 '19 at 14:48
Absolutely you should not format the numbers in the database - that would give you problems if you needed to support different locales for instance, where different formats are used conventionally for displaying things like phone numbers. — ADyson, Apr 23 '19 at 14:51
And I agree that doing this via the PHP template engine makes a lot of sense. Have you looked at anything like [this](https://www.google.com/search?safe=active&rlz=1C1GCEU_enGB821GB821&ei=Kya_XKS2F66g1fAP9IaIgAk&q=smarty+template+format+phone+number&oq=smarty+template+format+phone&gs_l=psy-ab.1.0.33i22i29i30.5153.6544..7441...0.0..0.94.896.13......0....1..gws-wiz.......0i71j0i67j0j0i22i30j0i22i10i30.jTiwc9AOdOs) ? — ADyson, Apr 23 '19 at 14:51

score -1 · Answer 1 · answered Apr 23 '19 at 11:37

With jQuery you can do a function for that

in the function first validate the size of the number, then convert it to an array then apply format to each group of numbers and pass them to an auxiliary array and return value.

$(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>

This is not what I want. Data should be formatted when retrieved from the database and not by a specific event. For example, when the user visits his profile page, he should see his phone number with the proper format. — Alaa, Apr 23 '19 at 14:40
I know, only use the input for a example, the important is the function — David, Apr 23 '19 at 14:44

How can I format phone numbers or add a specific mask on a or none-editable HTML elements?

1 Answers1

With jQuery you can do a function for that