Masking Telephone Numbers

Wappler General How To
#1

I am curious if we can mask phone numbers in Wappler like it can be with php?

Example:

$data = ‘+11234567890’;
if( preg_match( ‘/^+\d(\d{3})(\d{3})(\d{4})$/’, $data, $matches ) )
{
$result = $matches[1] . ‘-’ .$matches[2] . ‘-’ . $matches[3];
return $result;
}

#2

From the code it seems like some simple formatting, if I’m correct the number +11234567890 becomes 123-456-7890.

It is not directly possible with the UI in Wappler, but you can use the replace formatter with a regexp. '+11234567890'.replace(/^\+\d(\d{3})(\d{3})(\d{4})$/, '$1-$2-$3'). The UI won’t let you enter a regexp, it will enter it as string and you need to edit it directly in codeview.

1 Like
#3

Thanks Patrick!

I’ll use your suggestion and let you know the outcome. I appreciate your help very much!

#4

Is is possible to use {{mobile}} in combination with the .replace(/^+\d(\d{3})(\d{3})(\d{4})$/, ‘$1-$2-$3’)?

If so, how? I’ve tried various ways, and so far I have failed to get the correct syntax.

Here’s the current code: < a dmx-bind:href=“tel:{{mobile_phone}}” title=“Click to call”>{{mobile_phone}}< /a >

#5

I have a similar problem and am not sure where to do the “replace”. All of my phone numbers are listed in the database like: 1234567890. I would like for the output to be: 123-456-7890

What is the best way to accomplish this in Wappler?

I’m displaying this data in a table, here is part of the code:

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="get_all_people_details.data.query1" id="tableRepeat2"> <tr> <td dmx-text="{{people_lname}}, {{people_fname}}"></td> <td dmx-text="people_phone"></td> <td dmx-text="people_email"></td> </tr> </tbody>

#6

Hello @samrich
Isn’t Patrick’s solution working for you as well?

<td dmx-text="people_phone.replace(/(\d{3})(\d{3})(\d{4})$/, '$1-$2-$3')"></td>
#7

No it does not work. The phone number just displays as if you didn’t even do the replace.

Thoughts?

#8

Is the value a number or a string? The replace formatter only works on strings, try people_phone.toString().replace(/(\d{3})(\d{3})(\d{4})$/, '$1-$2-$3')

#9

Well, some change. Now instead of the number the following is displayed:

[object Object]

And yes, [object Object] is what is displayed.

Getting closer maybe?

#10

@samrich what is the exact value returned by this binding, when no formatter is applied to it?

#11

The value is stored in the database as text. When no formatter is applied the value that is displayed, is for example: 2225551212

The data is being displayed in a Responsive Table using the Bootstrap 4 Table generator.

#12

Can you provide a link to your page, where we can check this?

#13

Odd, I got it to work. Not sure what I did other than rebooting my laptop. Patrick’s solution worked.

Thanks everyone for help.

1 Like