I have a div that I need to strip away all characters except for the last four. I'm currently using replaceWith for this, but it replaces the whole thing.

Here's what I have

<div class="field-name-field-credit-card">1111111111111111</div>

$(".field-name-field-credit-card").replaceWith("xxxx xxxx xxxx xxxx");

and my result

<div class="field-name-field-credit-card">xxxx xxxx xxxx xxxx</div>

But I would like it to be:

<div class="field-name-field-credit-card">xxxx xxxx xxxx 1111</div>

jsfiddle

I have a div that I need to strip away all characters except for the last four. I'm currently using replaceWith for this, but it replaces the whole thing.

Here's what I have

<div class="field-name-field-credit-card">1111111111111111</div>

$(".field-name-field-credit-card").replaceWith("xxxx xxxx xxxx xxxx");

and my result

<div class="field-name-field-credit-card">xxxx xxxx xxxx xxxx</div>

But I would like it to be:

<div class="field-name-field-credit-card">xxxx xxxx xxxx 1111</div>

jsfiddle

• javascript
• jquery
• replace

2 Answers 2

Well, I made a regex for you and updated your fiddle:

$( ".field-name-field-credit-card" ).text(function(_,val) {
    return val.replace(/\d{12}(\d{4})/, "xxxx xxxx xxxx $1");
});

but I have to agree with Niet - don't mask the credit card client side.

If you really do want to mask client side, this ugly line of code will do it.

What it does is replace the text of the current element with the text it currently has, run through a regex with replace. The regex looks for 12 digits, then stores the next 4, and replaces the string of 16 digits with the 'x's followed by those last 4 it saved.

Although it looks like you might be passing the CC# from the server to the client via plain text, which is not good, I can think of why masking the CC on the client side is a good idea, so here goes:

You're at work ordering a gift online for a friend or loved one, maybe because you want it to be a surprise, and this is the safest place to do that. You get to the check out screen and your boss es up behind you to ask if you got the memo about the TPS reports. Now, you've already finished entering your info and you're just about to hit submit when this happens and so there's your CC info. All of it. Just sitting there for anyone to see. It's not hidden in the source code somewhere or being passed in plain text over the network -- you're on SS-fucking-L or whatever. You don't know, you just know it's secure.

Luckily the web page coder people put in a little magic to mask your CC info when you tab out of the input. Here's what they might have done:

var maskValue = function(){
CCInput.data('value', CCInput.val());
if (CCInput.val().length > 4) {
    CCInput.val(new Array(CCInput.val().toString().length-3).join('•')+CCInput.data('value').substr(-4)); // change all but the last 4 digits to *
}

http://jsfiddle/n32jmqar/

Added an unmask function in case your dear user might wanna make sure they got everything right first. ;)