Маскирование последних 4 цифр в javascript
Здесь я использую шаблон регулярного выражения для маскировки последних 4 цифр для номера кредитной карты
$('#ccnumber').html(ccnbr); //ccnumber refers to div ID
$('#ccnumber').text(function(_,val) {
return val.replace(/\d{12}(\d{4})/, "************$1");
});
Он применим только для 16-значных номеров кредитных карт. Но мне нужно замаскировать входящие числа (может быть 10 или 11) на *
и показать последние 4 цифры. Возможно ли это в javascript/JQuery?
JSFIDDLE
Ответы
Ответ 1
Вы можете использовать:
str = str.replace(/\d(?=\d{4})/g, "*");
чтобы замаскировать все, кроме последних 4 цифр, в заданном количестве более 4 цифр.
Объяснение:
- В этом reges используется положительный lookahead
(?=\d{4})
, который означает, что после соответствия должно следовать 4 цифры.
-
\d
соответствует одной цифре с указанным выше условием просмотра и заменяет ее на *
Ответ 2
Функция замаскирует первые 12 цифр номера карты, как показано ниже: -
Input: 4444444444444444
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>
Ответ 3
Вот подход Javascript без использования RegEx:
Отметьте jsFiddle demo
var mainStr = '1234567891234567',
vis = mainStr.slice(-4),
countNum = '';
for(var i = (mainStr.length)-4; i>0; i--){
countNum += '*';
}
alert(countNum+vis);
Ответ 4
Вот вы. Но помните, что это очень, очень плохая практика.
$('#ccnumber').text(function(_,val) {
return val.replace(/(\d*?)(\d{4})/, "************$1");
});
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
Ответ 5
Если у кого-то есть место для заполнения карты в пространстве, например "4242 4242 4242 4242", вам нужно использовать другое регулярное выражение:\d {4} (? =\d {4}) и заменить на "*** *":
Полный пример:
str = str.replace(/\d{4}(?= \d{4})/g, "****");
Он заменит карту "4242 4242 4242 4242" на "**** **** **** 4242"