在 JavaScript 中屏蔽最后 4 位数字

Masking last 4 digits in JavaScript

本文关键字：数字 最后 屏蔽 JavaScript      更新时间：2023-09-26

在这里，我使用正则表达式模式来屏蔽信用卡号的最后 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中可能吗？

$('#ccnumber').text(function(_, val) {
  return val.replace(/'d{12}('d{4})/, "************$1");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ccnumber">1234567891234567</div>

您可以使用：

str = str.replace(/'d(?='d{4})/g, "*");
屏蔽给定数量的超过 4 位数字

中除最后 4 位以外的所有数字。

正则表达式演示

解释：

  • 此 reges 使用正前瞻(?='d{4})这意味着匹配后应跟 4 位数字。
  • 'd 将具有上述前瞻条件的个位数匹配，并将其替换为 *

该功能将屏蔽卡号的前 12 位数字，如下所示：-

输入 ： 4444444444444444

输出 ： **** ****

**** 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>

这是一个不使用正则表达式的Javascript方法：

检查 jsFiddle 演示

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

如果有人在空格中有一个卡片占位符，比如"4242 4242 4242"，那么你必须使用其他正则表达式：''d{4}(？= ''d{4}( 并替换为 "****"：

完整示例：

str = str.replace(/'d{4}(?= 'd{4})/g, "****");
它将卡"4242 4242 4242 4242"替换为"**** **** **

** 4242">

测试示例

 var input = "1234567890";
 input = input.replace(/^('d{0,4})('d{0,3})/, '$1 $2')
 var prefix = input.substr(0, input.length - 4);
 var suffix = input.substr(-4);
 var masked = prefix.replace(/'d/g, '*');
 var a = masked + suffix;
 console.log(a)

Console Output: 
**** **7890

现在你可以简单地使用 padStart(( 或 padEnd(( 来屏蔽字符串的开头或结尾：

var str = "This is my sentence";
var strMaskedStart = str.slice(-4).padStart(str.length, '*');
var strMaskedEnd = str.substr(0, str.length - 4).padEnd(str.length, '*');
console.log(strMaskedStart); // Output: ***************ence
console.log(strMaskedEnd); // Output: This is my sent****

如果你想阅读更多关于它的信息，那么看看MDN Web Docs：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStarthttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

接受的答案仅适用于数字，但我遇到了一种情况，其中输入可以是任何字符串(信用卡号、电话号码、秘密问题等(，如果我们想实现相同的效果(即屏蔽除最后 4 个字符之外的所有字符(，那么您可以使用以下内容：

str.replace(/.(?='d{4})/g, "#")

我的要求是用#符号替换它。关键是使用 . ，它用于任何单个字符检查。接受答案的解释仍然成立，这仅适用于任何字符，而不仅仅是数字。希望它能帮助某人

你来了。但请记住，这是非常非常糟糕的做法。

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

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

这是一个纯粹的JavaScript答案。

function cardHide(input) {
  //use slice to remove first 12 elements
  let first12 = input.slice(0, 12);
  //define what char to use to replace numbers
  let char = '*'
  let repeatedChar = char.repeat(input.length -4);
  // replace numbers with repeated char
  first12 = first12.replace(first12, repeatedChar);
  //concat hidden char with last 4 digits of input
  let hiddenNumbers = first12 + input.slice(input.length-4);
  
  //return
  return hiddenNumbers;
}


let str = document.getElementById("demo").innerHTML; 
let res =str.slice(0, -4) + "****";
document.getElementById("demo").innerHTML = res;
<!DOCTYPE html>
<html>
<body>
MOBILE NO : <p id="demo">8819922301</p>
</body>
</html>

上面是删除最后 4 个字符并添加 4 星而不是它的代码。

相关文章：