Masking number at a particular position

Question

I have a input field with a maximum length of 15 character. i want to do something like this

original number :784198012345671 should be: 784********5671

You want to do this when the user is still keying in the input or later when the value has to be displayed somewhere? — gurvinder372, Dec 05 '17 at 06:17
I don't see your effort. Also you didn't mention when you want this. — cauchy, Dec 05 '17 at 06:22
So when the user is keying in values, you want to show `784****`, not making sense. — gurvinder372, Dec 05 '17 at 06:23

score 1 · Answer 1 · answered Dec 05 '17 at 06:23

1

const original = "784198012345671",
 obfuscated = original.substr(0, 3) + "*".repeat(original.length - 7) + original.substr(-4);

You may use substr to get the number groups at the beginning and the end out of the number and then use repeat to fill the asterisks inbetween.

answered Dec 05 '17 at 06:23

Jonas Wilms

120,546
16
121
140

[Try it](http://jsbin.com/menikejuke/edit?console) – Jonas Wilms Dec 05 '17 at 06:25

Angel Politis · Accepted Answer · 2017-12-05T06:45:29.573

1

The process to achieving what you want varies depending on whether:

you want to mask the value after the it has been entered or
you want to mask the value during typing.

If you want to do this, after the value has been entered the following should do the trick.

Snippet:

var
  /* The original value. */
  n = "784198012345671",
  
  /* The masked value. */
  masked = n.slice(0, 3) + Array(8).join("*") + n.slice(-4);

/* Log the result. */
console.log(masked);

If, instead, you want to mask the input during typing, things get more complicated.

Snippet:

$(".newsocial").on("keyup", function(e) {
  /* Turn the value into an array of characters. */
  var value = this.value.split("");
  
  /* Iterate over every character. */
  value.forEach(function (char, index) {
    /* Replace the character with a placeholder when appropriate. */
    if (index >= 3 && index <= 10) value[index] = "*";
  });
  
  /* Turn the array of chars into a string & assign it to the value of the input. */ 
  this.value = value.join("");
})

<!--- HTML --->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" maxlength="15" id="input-card" class="newsocial">

edited Dec 05 '17 at 06:45

answered Dec 05 '17 at 06:26

Angel Politis

10,488
13
45
63

https://jsfiddle.net/SyedMoiz/s590ft4w/ it is showing the last 6 digits but i want it to show last 4 digits – Syed Moiz Dec 05 '17 at 06:29
Check out my edit @moiz45. – Angel Politis Dec 05 '17 at 06:37
Thank You @angel it working fine – Syed Moiz Dec 05 '17 at 06:41
I'm glad I could help you @moiz45. – Angel Politis Dec 05 '17 at 06:41
@AngelPolitis great work pal. but for a fraction of second, your code shows the number before obfuscating; dont u think it can be misused by prying eyes. This solved that issue https://stackoverflow.com/questions/45113132/partial-password-masking-on-input-field; What do u think? – Rajkumar Somasundaram Dec 05 '17 at 06:50
This is not a problem of my code per se, but made by design that way due to the `keyup` event being used @RajkumarSomasundaram. The OP used the `keyup` event, so I thought they may want it that way. Your observation is accurate, however :) – Angel Politis Dec 05 '17 at 07:00
there is a slight problem in this i am unable to submit the original value as it is replaced by ******** is there anyway to keep the original value as well – Syed Moiz Dec 05 '17 at 08:09
Of course you can't submit it, because the value is altered. This answer was written to show you how you can achieve the partial masking effect. Preserving the actual value entered is much more difficult that it sounds and requires a lot more work that usually comes in the form of a plugin. So your best bet is to use one of the numerous tested plugins out there. Trying to roll your own in production environment isn't advised, because a lot can go wrong and you'll end up with buggy code and possibly corrupt data in your database. – Angel Politis Dec 05 '17 at 08:47

score 0 · Answer 3 · edited Dec 05 '17 at 06:42

0

Replace Integer to String

Iterate the string and replace the position with *:

let number = 123455666777888;
let stringedNum = number.toString();

for(i=0;i<stringedNum.length;i++) {
  if(i>5 && i<10) { // change this line as per your need
     console.log(i)
     stringedNum = stringedNum.replace(stringedNum[i],'*');
  }
}
console.log(stringedNum)

edited Dec 05 '17 at 06:42

Angel Politis

10,488
13
45
63

answered Dec 05 '17 at 06:26

Rajkumar Somasundaram

1,183
1
9
18

1

@ the gentleman who downvoted; He wasnt clear on when to replace; thats why I took this approach; will either edit or delete. – Rajkumar Somasundaram Dec 05 '17 at 06:30
At least they should give reason. How short minded they are. – freelancer Dec 05 '17 at 06:33

score 0 · Answer 4 · answered Dec 05 '17 at 06:26

Convert your number to string and use string.prototype.substring and string.prototype.repeate to build parts:

var number = 784198012345671;
number = number.toString();
var res = number.substring(0, 3) + '*'.repeat(8) + number.substring(11, 15);
console.log(res);

Masking number at a particular position

4 Answers4