Masking Telephone Numbers

Wappler General Need Help
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