本文介绍如何在Web开发中实现银行卡号输入时的自动格式化功能，即每隔4位数字自动插入一个空格。文章提供了原生JavaScript和jQuery两种实现方案，重点解析了利用正则表达式\S{5}判断输入长度以及replace方法进行格式替换的核心逻辑，并探讨了光标位置修正等细节处理，适用于IE9及以上浏览器环境。
原生JavaScript实现方案
首先介绍使用原生JavaScript实现该功能的方法。
!function () {
document.getElementById('bankCard').onkeyup = function (event) {
var v = this.value;
if(/\S{5}/.test(v)){
this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
}
};
}();jQuery实现方案
接下来展示基于jQuery库的实现方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="J_BankCard"/>
<script src="http://static.ydcss.com/libs/jquery/1.11.2/jquery.js"></script>
<script>
!function () {
$('#J_BankCard').on('keyup mouseout input',function(){
var $this = $(this),
v = $this.val();
/\S{5}/.test(v) && $this.val(v.replace(/\s/g,'').replace(/(.{4})/g, "$1 "));
});
}();
</script>
</body>
</html>实现效果为：在用户输入银行卡号时，系统自动每隔4位数字插入一个空格，这是一个常见的前端交互细节。
document.getElementById('bankCardInp').onkeyup = function (event) {
var v = this.value;
console.log(/\S{5}/.test(v));
console.log(v);
if(/\S{5}/.test(v)){
this.value = v.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
}
};核心逻辑与正则表达式解析
小编前段时间自己做了个小项目，用到正则，刚好百度了一下，诧异的发现输入银行卡号每隔4位数字加一个空格 居然全部都是清一色的一坨代码，上面大家估计都能理解，当然我整体也能理解： 问题来了
核心逻辑中使用了正则表达式 /\S{5}/.test(v) 来判断是否执行格式化。许多开发者初看此代码可能会产生困惑，误以为需要5个空字符才触发，或者疑惑为何使用大写的\S。实际上，\S代表非空白字符，该正则表达式的作用是检测字符串中是否存在连续5个非空白字符。一旦检测到第5个非空白字符，即说明当前输入长度已超过4位，此时便触发格式化逻辑，将前4位数字后添加空格。这一设计巧妙地利用了正则匹配的特性，避免了复杂的长度判断。
兼容性说明与交互优化
该功能旨在实现银行卡号每4位插入空格的效果，在用户填写银行卡信息时非常实用。需要注意的是，此实现方案兼容IE9及以上版本的浏览器。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>银行卡号4位空格</title>
<script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>
</head>
<body>
<input type="text" id="kahao" />
<script>
$(function() {
$('#kahao').on('keyup', function(e) {
//只对输入数字时进行处理
if((e.which >= 48 && e.which <= 57) ||
(e.which >= 96 && e.which <= 105 )){
//获取当前光标的位置
var caret = this.selectionStart
//获取当前的value
var value = this.value
//从左边沿到坐标之间的空格数
var sp = (value.slice(0, caret).match(/\s/g) || []).length
//去掉所有空格
var nospace = value.replace(/\s/g, '')
//重新插入空格
var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
//从左边沿到原坐标之间的空格数
var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
//修正光标位置
this.selectionEnd = this.selectionStart = caret + curSp - sp
}
})
})
</script>
</body>
</html>以支付宝为例，为了兼顾兼容性和用户体验，其界面设计中采用悬浮提示框来展示分段的卡号。这种视觉呈现方式同样易于实现，且能提供更清晰的反馈。
以上介绍了利用JavaScript实现银行卡号每隔4位数字自动添加空格的完整方案，希望能为读者提供有价值的参考。如有任何疑问，欢迎留言交流，笔者将及时回复。同时感谢各位对本站的支持。