What's the best way to mask a credit card in JavaScript?

Question

In Node, I need to turn a credit card into something like this before rendering the view layer: ************1234.

Without loops and ugliness is there a utility or one liner for this? The credit card can potentially look one of these ways:

1234567898765432
1234-5678-9876-5432
1234 5678 9876 5432

score 9 · Answer 1 · answered Jun 28 '15 at 06:49

9

No need for a regex:

var cc='1234-5678-9012-3456';
var masked = '************'+cc.substr(-4); // ************3456

Will work for any format provided the last four digits are contiguous.

answered Jun 28 '15 at 06:49

I almost went this route. Amex is 15 digits with 2 spaces, and it bothered me there would be one too many asterisks lol. – AlienWebguy Jun 28 '15 at 07:06
card number can be from 13 up to 19 digits long, the algorithm should take into consideration at least that – Iorweth333 Oct 12 '22 at 12:24

score 8 · Answer 2 · answered Jun 28 '15 at 06:25

Here's one way with Ramda and some RegEx:

var ensureOnlyNumbers  = R.replace(/[^0-9]+/g, '');
var maskAllButLastFour = R.replace(/[0-9](?=([0-9]{4}))/g, '*');
var hashedCardNumber   = R.compose(maskAllButLastFour, ensureOnlyNumbers);

hashedCardNumber('1234567898765432'); // ************5432

Demo : http://jsfiddle.net/7odv6kfk/

score 4 · Answer 3 · answered Mar 29 '19 at 19:20

This is for everyone who said they didn't need another way to mask a credit card. This solution will append the last 4 chars of the card number with asterisk.

var cardNumber       = '4761640026883566';
console.log(maskCard(cardNumber));

function maskCard(num) {
  return `${'*'.repeat(num.length - 4)}${cardNumber.substr(num.length - 4)}`;
}

jsfiddle example

score 2 · Answer 4 · answered Apr 20 '22 at 15:47

I use this function that is useful for me, because mask the credit card number and format it in blocks of four characters like this **** **** **** 1234, here the solution:

const maskCreditCard = (card) => {
  return card
    .replace(/.(?=.{5})/g, "*")
    .match(/.{1,4}/g)
    .join(" ");
};

score 2 · Answer 5 · answered Apr 05 '23 at 10:14

2

function hashCreditCard(number){
  const str = String(number).replace(" ","").replace("-","")
  const last = str.slice(-4)
  return last.padStart(str.length,"*")
}

console.log(hashCreditCard(5859831060602434))
console.log(hashCreditCard("5859-8310-6060-2434"))
console.log(hashCreditCard("5859 8310 6060 2434"))

answered Apr 05 '23 at 10:14

Saheb Mohammadi

406
3
5

adding an explanation would improve this answer – depperm Apr 05 '23 at 10:53

sainaen · Answer 6 · 2015-06-28T06:51:43.423

1

Here's plain JavaScript using Regex with lookahead

var cardNumbers = [
  "1234567898765432",
  "1234-5678-9876-5432",
  "1234 5678 9876 5432"
];

console.log(cardNumbers.map(maskCardNumber));
//> ["************5432", "************5432", "************5432"]

function maskCardNumber(cardNumber) {
  return cardNumber.replace(/^[\d-\s]+(?=\d{4})/, "************");
};

Unlike AllienWebguy's implementation:

doesn't require an external library
does everything in one replace() call
replaces whatever number of digits with the constant number of asterisks (it should be a bit faster, but it may not be what you want)
supports only described formats (will not work, for example, with "1B2C3D4E5F6G7H89876-5432" or "1234+5678+9876=54-32")

edited Jun 28 '15 at 06:51

answered Jun 28 '15 at 06:37

sainaen

1,498
9
18

1

Sorry, what do you mean? – sainaen Jun 29 '15 at 09:01
See here : http://stackoverflow.com/questions/944446/what-is-point-free-style-in-functional-programming – AlienWebguy Jun 29 '15 at 21:52
1

I guess so, but what's the point? I agree, using combinators can make things simpler, but I think adding whole library or implementing your own `replace()` just for this one function will have much higher cost than gain it provides. – sainaen Jul 04 '15 at 18:29
That's a pretty common first reaction to FP. It's pretty short-sighted to think only this one function would be affected/improved. To each his own. – AlienWebguy Jul 05 '15 at 19:20

score 1 · Answer 7 · answered Jun 28 '15 at 15:01

1

Remove non digits, generate an asterisk string of that length - 4, append the last 4:

var masked = Array(cc.replace(/[^\d]/g, "").length - 3).join("*") + cc.substr(cc.length - 4);

Or to include space/hyphens in the mask:

var masked = Array(cc.length - 3).join("*") + cc.substr(cc.length - 4);

answered Jun 28 '15 at 15:01

Alex K.

171,639
30
264
288

Nice! FYI `cc.substr(cc.length - 4)` can be simplified to `cc.substr(-4)` – AlienWebguy Jun 28 '15 at 23:24

What's the best way to mask a credit card in JavaScript?

7 Answers7