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
– elclanrs, Commented Jul 15, 2013 at 8:54
No matter the amount of zeros in the example, I believe that the aim of the question is quite clear... — German Latorre
– German Latorre, Commented Jul 15, 2013 at 8:58
you can use this plugin for masking igorescobar.github.io/jQuery-Mask-Plugin — Nanhe Kumar
– Nanhe Kumar, Commented Jul 15, 2013 at 8:59

Community · Accepted Answer · 2017-05-23 12:08:47Z

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

Ivan Kukushkin · Accepted Answer · 2018-08-16 09:23:36Z

9

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

answered Aug 16, 2018 at 9:23

Ivan Kukushkin

1611 silver badge2 bronze badges

Comments

matt3141 · Accepted Answer · 2013-07-15 09:02:22Z

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, 2013 at 9:02

matt3141

4,4411 gold badge22 silver badges25 bronze badges

Comments

Paul · Accepted Answer · 2020-01-07 09:56:33Z

0

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

edited Jan 7, 2020 at 9:56

answered Dec 18, 2019 at 18:59

Paul

4486 silver badges8 bronze badges

Comments

marc_s · Accepted Answer · 2025-03-09 16:20:34Z

0

Using jQuery Mask:

let var = "00000000000";
$('body').append('<input type="hidden" id="tmpformatterfield">');
var = $('#tmpformatterfield').val(var).mask('###.###.####-##').val();
$('#tmpformatterfield').remove();

Context: I'd use it inside a DataTable async construction to format incoming population data without breaking the table titles.

edited Mar 9 at 16:20

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 25, 2024 at 21:48

Anibal Duarte Oliveira

113 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Nina Scholz · Accepted Answer · 2025-03-09 16:39:25Z

0

You could repace zeroes with values fom the format string.

const
    format = (pattern, value) => pattern.replaceAll('0', (i => _ => value[i++])(0)),
    string = '1234567891',
    formatted = format('(000) 000-0000', string);

console.log(formatted);

answered Mar 9 at 16:39

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

jsonmaur · Accepted Answer · 2016-05-11 20:09:42Z

-1

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

answered May 11, 2016 at 20:09

jsonmaur

291 silver badge4 bronze badges

Comments

ramaralo · Accepted Answer · 2024-05-15 11:17:14Z

-1

you may find the https://jsuites.net/docs/javascript-mask useful it can be used on FE and nodejs as well

answered May 15, 2024 at 11:17

ramaralo

1,0312 gold badges10 silver badges15 bronze badges

Comments

lucasumberto · Accepted Answer · 2022-08-30 08:38:43Z

-2

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

edited Aug 30, 2022 at 8:38

lucasumberto

1341 silver badge9 bronze badges

answered Mar 15, 2022 at 17:59

André

1031 silver badge4 bronze badges

1 Comment

Community Over a year ago

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.

Bowdzone · Accepted Answer · 2015-12-16 07:06:02Z

-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, 2015 at 7:06

Bowdzone

3,87511 gold badges42 silver badges53 bronze badges

answered Dec 16, 2015 at 6:26

Dmitry

1291 silver badge7 bronze badges

Collectives™ on Stack Overflow

Mask javascript variable value

10 Answers 10

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related