Mask javascript variable value

Question

I want to mask my javascript variable value.Basically i am getting phone number fields value in variable and after getting it i want to mask it in some other format.

I have tried the jquery Mask plugin but its mask the control's string format.But i want to mask the string into the variable.

Ex:

Let i have a phone string "0000000000" and i am storing it in a variable :-

var number ="0000000000"

and after that i want to mask it in other formats.Like-

1) number = number.mask('000-0000'); 2) number = number.mask('(000) 000-0000');

Your example doesn't make sense... the amount of zeros is different. — elclanrs, Jul 15 '13 at 08:54
No matter the amount of zeros in the example, I believe that the aim of the question is quite clear... — German Latorre, Jul 15 '13 at 08:58
you can use this plugin for masking http://igorescobar.github.io/jQuery-Mask-Plugin/ — Nanhe Kumar, Jul 15 '13 at 08:59
Seriously, why does @elclanrs comment gets any upvotes? It is not constructuve at all... (Neither is mine, though, lol...) — German Latorre, Jul 15 '13 at 09:13

score 25 · Accepted Answer · edited May 23 '17 at 12:08

There is a similar question (Javascript phone mask for text field with regex).

You can do it using regular expressions (see the code working at http://jsfiddle.net/BBeWN/45/):

var value = '1234567';
var formatted = value.replace(/^(\d{3})(\d{4}).*/, '$1-$2');

Notice that each part of the regular expression that is wrapped within parenthesis, (\d{3}) and (\d{4}) in the example above, can then be referenced to build the formatted text string using $1 and $2 respectively.

If you have N parts of the regular expression wrapped within parenthesis, you would be able to reference them to build a formatted text string with $1, $2, ..., $N respectively.

So, for the other format you mention ((000) 000-0000), the code would be like this:

var formatted = value.replace(/^(\d{3})(\d{3})(\d{4}).*/, '($1) $2-$3');

You can find a great JavaScript regular expressions reference at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

score 9 · Answer 2 · answered Aug 16 '18 at 09:23

There is a javascript library that provides a solution for this problem:

https://github.com/the-darc/string-mask

And you don't need to create a new regular expression every time you change your mask(Format).

You can use it just like that:

var formatter = new StringMask("(000) 000-0000", { reverse: true });
var result = formatter.apply('123456789'); // (012) 345-6789

or

var formatter = new StringMask('#.##0,00', { reverse: true });
var result = formatter.apply('123456789'); // 1.234.567,89

score 1 · Answer 3 · answered Jul 15 '13 at 09:02

1

Here is a "mask" you may apply to a string of phone number digits of length 7 or 10 with an optional "+" to render it with dashes.

number.match(/^\+?([0-9]{3}){1,2}([0-9]{4})$/) || []).join('-')

answered Jul 15 '13 at 09:02

matt3141

4,303
1
19
24

score 0 · Answer 4 · answered May 11 '16 at 20:09

0

You can use my package https://github.com/jsonmaur/coverup, which can return the masked string as a variable.

answered May 11 '16 at 20:09

jsonmaur

29
1
4

Paul H. · Answer 5 · 2020-01-07T09:56:33.680

Using jsuites plugin you can do that

A) HTML

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<input data-mask='+44 0000 000 000'>

</html>

B) JAVASCRIPT

To get the parse a string into a variable

<script>
var test = jSuites.mask.run('123456789', '(000) 000-0000');
console.log(test);
</script>

Source: https://bossanova.uk/jsuites/javascript-mask

score -2 · Answer 6 · edited Aug 30 '22 at 08:38

Start Jquery

$(document).ready(function(){
   $('.phone_us').mask('(000) 000-0000');
}

html for mask

<input id="seachPeople" type="text" placeholder="Pesquisar" class="phone_us">

Getting masked string

// your string
var phoneApi ='0000000000'     
var phone  = ('.phone_us').masked(phoneApi);
consoe.log(phone)
//exit -> (000) 000-0000

<input id="seachPeople" type="text" placeholder="Pesquisar" class="phone_us">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

<script>
$('.phone_us').mask('(000) 000-0000');
// your string that comes from somewhere could be from an API
const numberPhone = '1111111111';
const maskPgoneStriong = $('.phone_us').masked(numberPhone);
console.log(maskPgoneStriong);
alert(maskPgoneStriong)

</script>

look: http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#getting-a-masked-value-programmatically

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 15 '22 at 20:15

score -6 · Answer 7 · edited Dec 16 '15 at 07:06

-6

I believe what you are looking for you can find on the apple.com support page. Try to schedule a call and check out their phone input field. It adjusts presentation based on the number of digits you are entering. Looking at the source, (seems like its somewhere here) this one has the keyup event for the field and looks like they are parsing on keyup.

edited Dec 16 '15 at 07:06

Bowdzone

3,827
11
39
52

answered Dec 16 '15 at 06:26

Dmitry

99
6

Mask javascript variable value

7 Answers7

Linked