Masking the last 4 digits in javascript

Question

Here I use a regular expression pattern to mask the last 4 digits for a credit card number

$('#ccnumber').html(ccnbr); //ccnumber refers to div ID $('#ccnumber').text(function(_,val) { return val.replace(/\d{12}(\d{4})/, "************$1"); }); 

It applies only to 16-digit credit card numbers. But I need to mask the incoming numbers (maybe 10 or 11) by * and show the last 4 digits. Is this possible in javascript / jQuery?

JSFIDDLE

Answer 1

You can use:

 str = str.replace(/\d(?=\d{4})/g, "*"); 

to mask everything except the last 4 digits, in a given amount of more than 4 digits.

RegEx Demo

Explanation:

• This reges uses a positive lookahead (?=\d{4}) , which means that 4 digits should follow after matching.
• \d matches one digit with the above viewing condition and replaces it with *

Answer 2

The function will mask the first 12 digits of the card number as shown below: -

Input: 444444444444444444

Output: **** **** **** 4444

 function formatCardNumber(event, element) { if (isNaN(event.key) && !isAllowedKey(event)) { event.preventDefault(); } else { if (event.keyCode != 8) { if(element.value.length > 14) { var position = element.selectionStart; element.value = element.value.replace(/\W/gi, '').replace(/^(.{4})(.{4})(.{4})(.*)$/, "$1 $2 $3 $4"); if(element.value.length != 19) { element.setSelectionRange(position, position); } } else { element.value = element.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 '); } } } } function isAllowedKey(event) { var allowed = false; if (event.keyCode === 8 || event.keyCode === 9 || event.keyCode === 37 || event.keyCode === 39) { allowed = true; } return allowed; } function limit(event, element, max_chars) { if(isTextSelected(element)){ // max_chars += 1; } if (element.value.length >= max_chars && !isAllowedKey(event)) { event.preventDefault(); } } function showCardValue() { document.getElementById("cardNo").value = document.getElementById("cardNoSafe").value; } function isTextSelected(input) { var startPosition = input.selectionStart; var endPosition = input.selectionEnd; var selObj = document.getSelection(); var selectedText = selObj.toString(); if (selectedText.length != 0) { input.focus(); input.setSelectionRange(startPosition, endPosition); return true; } else if (input.value.substring(startPosition, endPosition).length != 0) { input.focus(); input.setSelectionRange(startPosition, endPosition); return true; } return false; } function hideCardValue(val) { document.getElementById("cardNoSafe").value = val; var len = val.length; if (len >= 14) { const regex = /\d{4}(?= \d{1})/g; const substr = "****"; document.getElementById("cardNo").value = val.replace(regex, substr); } } 

 <div class="form-group"> <input name="AccountNo" id="cardNo" placeholder="Card Number" title="Card Number" class="form-control" onfocus="showCardValue()" onblur="hideCardValue(this.value)" onkeypress="formatCardNumber(event, this); limit(event, this, 19) " onpaste="return false" oncut="return false" tabindex="2" autocomplete="nope" type="text"> <span class="placeholder-text" style="display: none;">Please enter Card Number</span> <input name="cardNoSafe" id="cardNoSafe" value="" style="display:none;"> </div> 

Answer 3

Here is a Javascript approach without using RegEx:

Check jsFiddle demo

 var mainStr = '1234567891234567', vis = mainStr.slice(-4), countNum = ''; for(var i = (mainStr.length)-4; i>0; i--){ countNum += '*'; } alert(countNum+vis); 

Answer 4

There you are. But remember that this is a very, very bad practice.

 $('#ccnumber').text(function(_,val) { return val.replace(/(\d*?)(\d{4})/, "************$1"); }); 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Answer 5

If someone has a place to fill the map in space, for example, "4242 4242 4242 4242", you need to use another regular expression: \ d {4} (? = \ D {4}) and replace it with "*** * ":

Full example:

 str = str.replace(/\d{4}(?= \d{4})/g, "****"); 

It will replace the card "4242 4242 4242 4242" with "**** **** **** 4242"

Test example