在 JavaScript 中屏蔽最后 4 位数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27545202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Masking last 4 digits in JavaScript
提问by UI_Dev
Here I am using regex pattern to mask last 4 digits for Credit Card number.
在这里，我使用正则表达式来屏蔽信用卡号的最后 4 位数字。
$("#ccnumber").html(ccnbr); //ccnumber refers to div ID
$("#ccnumber").text(function(_, val) {
return val.replace(/\d{12}(\d{4})/, "************");
});
It is applicable for only 16 digit credit card numbers. But, I need to mask the incoming numbers (may be 10 or 11) by *and show the last 4 digits.
它仅适用于 16 位信用卡号码。但是，我需要屏蔽传入的数字（可能是 10 或 11）*并显示最后 4 位数字。
Is it possible in javascript/jQuery?
在 javascript/jQuery 中可能吗？
$('#ccnumber').text(function(_, val) {
return val.replace(/\d{12}(\d{4})/, "************");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ccnumber">1234567891234567</div>回答by anubhava
You can use:
您可以使用：
str = str.replace(/\d(?=\d{4})/g, "*");
to mask all but last 4 digits in a given number of more than 4 digits.
在超过 4 位的给定数量中屏蔽除最后 4 位之外的所有数字。
RegEx Demo
正则表达式演示
Explanation:
解释：
- This reges uses a positive lookahead
(?=\d{4})which means match should be followed by 4 digits. \dmatches a single digit with above lookahead condition and replaces that by*
- 此reges使用正向前瞻
(?=\d{4})，这意味着匹配应后跟4位数字。 \d匹配具有上述先行条件的单个数字并将其替换为*
回答by Rajnish
The Function will mask first 12 digits of card number as displayed below :-
该功能将屏蔽卡号的前 12 位数字，如下所示：-
Input : 4444444444444444
Output : **** **** **** 4444
输入：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})(.*)$/, " ");
if(element.value.length != 19) {
element.setSelectionRange(position, position);
}
}
else {
element.value = element.value.replace(/\W/gi, '').replace(/(.{4})/g, ' ');
}
}
}
}
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>回答by henser
Here is a Javascript approach without the use of RegEx:
这是一种不使用 RegEx 的 Javascript 方法：
Check jsFiddle demo
var mainStr = '1234567891234567',
vis = mainStr.slice(-4),
countNum = '';
for(var i = (mainStr.length)-4; i>0; i--){
countNum += '*';
}
alert(countNum+vis);
回答by Konstantin Victorov
If somebody has a card placeholder through space, like "4242 4242 4242 4242", then you have to use other regular expression: \d{4}(?= \d{4}) and replace on "****":
如果有人通过空格有一个卡片占位符，例如“4242 4242 4242 4242”，那么您必须使用其他正则表达式：\d{4}(?= \d{4}) 并替换为“****”：
Full example:
完整示例：
str = str.replace(/\d{4}(?= \d{4})/g, "****");
It will replace card "4242 4242 4242 4242" as "**** **** **** 4242"
它会将卡“4242 4242 4242 4242”替换为“**** **** **** 4242”
Test example
测试示例
回答by A. Rama
Here you are. But remember this is very, verybad practice.
这个给你。但请记住，这是非常非常糟糕的做法。
$('#ccnumber').text(function(_,val) {
return val.replace(/(\d*?)(\d{4})/, "************");
});
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
