Mask javascript variable value

E

8

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');

Equipoise answered 15/7, 2013 at 8:51 Comment(4)

Your example doesn't make sense... the amount of zeros is different. – Mellen 15/7, 2013 at 8:54

No matter the amount of zeros in the example, I believe that the aim of the question is quite clear... – Devour 15/7, 2013 at 8:58

you can use this plugin for masking igorescobar.github.io/jQuery-Mask-Plugin – Antons 15/7, 2013 at 8:59

Seriously, why does @Mellen comment gets any upvotes? It is not constructuve at all... (Neither is mine, though, lol...) – Devour 15/7, 2013 at 9:13

D

25

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

Devour answered 15/7, 2013 at 9:2 Comment(0)

N

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

Neville answered 16/8, 2018 at 9:23 Comment(0)

P

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('-')

Pede answered 15/7, 2013 at 9:2 Comment(0)

M

0

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

Mitrewort answered 11/5, 2016 at 20:9 Comment(0)

D

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

Desuetude answered 18/12, 2019 at 18:59 Comment(0)

H

0

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

Heath answered 15/5 at 11:17 Comment(0)

E

-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

Eiser answered 15/3, 2022 at 17:59 Comment(1)

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. – Premarital 15/3, 2022 at 20:15

D

-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.

Dungdungan answered 16/12, 2015 at 6:26 Comment(0)

Recommended topics

Hot tags