基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
难点不是插入空格，而是修正光标的位置，这个只支持IE9＋、chrome浏览器
注意：这个使用了jquery框架
核心代码
$(function(){
$('#kahao').on('keyup',function(e){
//只对输入数字时进行处理
if((e.which>=48&&e.which<=57)||
(e.which>=96&&e.which<=105)){
//获取当前光标的位置
varcaret=this.selectionStart
//获取当前的value
varvalue=this.value
//从左边沿到坐标之间的空格数
varsp=(value.slice(0,caret).match(/\s/g)||[]).length
//去掉所有空格
varnospace=value.replace(/\s/g,'')
//重新插入空格
varcurVal=this.value=nospace.replace(/(\d{4})/g,"$1").trim()
//从左边沿到原坐标之间的空格数
varcurSp=(curVal.slice(0,caret).match(/\s/g)||[]).length
//修正光标位置
this.selectionEnd=this.selectionStart=caret+curSp-sp
}
})
})
完整代码：已经测试
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>银行卡号4位空格</title>
<scriptsrc="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>
</head>
<body>
<inputtype="text"id="kahao"/>
<script>
$(function(){
$('#kahao').on('keyup',function(e){
//只对输入数字时进行处理
if((e.which>=48&&e.which<=57)||
(e.which>=96&&e.which<=105)){
//获取当前光标的位置
varcaret=this.selectionStart
//获取当前的value
varvalue=this.value
//从左边沿到坐标之间的空格数
varsp=(value.slice(0,caret).match(/\s/g)||[]).length
//去掉所有空格
varnospace=value.replace(/\s/g,'')
//重新插入空格
varcurVal=this.value=nospace.replace(/(\d{4})/g,"$1").trim()
//从左边沿到原坐标之间的空格数
varcurSp=(curVal.slice(0,caret).match(/\s/g)||[]).length
//修正光标位置
this.selectionEnd=this.selectionStart=caret+curSp-sp
}
})
})
</script>
</body>
</html>
经过测试确实很好用，里面用到了很多的正则
\s匹配任何空白字符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。
关于正则表达式的教程可以参考这篇文章：
https://www.nhooo.com/tools/zhengze.html
https://www.nhooo.com/tools/regexsc.htm