js银行卡每四位加空格3种方法实现

js 银行卡每四位加空格3种方法实现

1.正则实现（推荐）

$('#card_number').bind('input propertychange', function(){
    if (/\S{5}/.test(n)){
        $('#card_number').val(n.replace(/\s/g, '').replace(/(.{4})/g, "$1 "));
    }
})

以上正则实现完美无误，
但由于我们的项目后台对“{}”进行了转义，
所以导致正则中的“{}”无法实现，
呵呵 ，（此处省略一千万字）。。。。。。。。。。。。。。
于是自己鼓捣出了以下方法！

2.其他方法实现

var n_value = $('#card_number').val();
$('#card_number').bind('input propertychange', function(){
    // 正则筛选掉字母与空格，只允许输入数字，且删去字符串末端空格
    var new_value = ''+$('#card_number').val();
    var del = new_value.substring(0,new_value.length-1);
    $('#card_number').val(new_value.replace(/[\s\n\t]+$/g, ''));
    var new_value = ''+$('#card_number').val();
    $('#card_number').val(new_value.replace(/[^0-9|' ']*/g, ''));
    var new_value = ''+$('#card_number').val();
    // 正则 END
    if(n_value.length<new_value.length){
        if(new_value.length===4 || new_value.length===9 || new_value.length===14 || new_value.length===19){
            $('#card_number').val($('#card_number').val()+' ');
        }else if(new_value.length===5){
            var add_5 = new_value.substring(4,6);
            add_5 = ' '+add_5;
            $('#card_number').val(del);
            $('#card_number').val($('#card_number').val()+add_5);
        }else if(new_value.length===10){
            var add_10 = new_value.substring(9,11);
            add_10 = ' '+add_10;
            $('#card_number').val(del);
            $('#card_number').val($('#card_number').val()+add_10);
        }else if(new_value.length===15){
            var add_15 = new_value.substring(14,16);
            add_15 = ' '+add_15;
            $('#card_number').val(del);
            $('#card_number').val($('#card_number').val()+add_15);
        }else if(new_value.length===20){
            var add_20 = new_value.substring(19,21);
            add_20 = ' '+add_20;
            $('#card_number').val(del);
            $('#card_number').val($('#card_number').val()+add_20);
        }
    }
    n_value = new_value;
})

至此完美解决，在4位后加空格简单一些，
主要是删除空格时，导致与添加空格冲突需要再加判断解决！

3.另一种方法：

与第二种类似，输入时稍有延迟，问题不大，dom中input绑定onkeyup执行此函数即可

function bankCardKeyup (e, a) {
    // 如果是删除键，则不加空格，且删去字符串末端空格
    var srcVal = ""+$(a).val();
    if (e.keyCode === 8) {
        $(a).val(srcVal.replace(/[\s\n\t]+$/g, ""));
        return
    }
    var srcVal = ""+$(a).val();
    $(a).val(srcVal.replace(/[^0-9|' ']*/g, ''));
    var srcVal = ""+$(a).val();
    var value = srcVal.replace(/[^0-9]*/g, '');
    if (value.length > 4 && value.length <= 8) {
        $(a).val(value.slice(0, 4) + ' ' + value.slice(4, value.length));
    }
    else if (value.length > 8 && value.length <= 12) {
        $(a).val(value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, value.length));
    }
    else if (value.length > 12 && value.length <= 16) {
        $(a).val(value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12) + ' ' + value.slice(12, value.length));
    }
    else if (value.length > 16 && value.length <= 19) {
        $(a).val(value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12)+ ' ' + value.slice(12, 16) + ' ' + value.slice(16, value.length));
    }
    else if (value.length > 19) {
        $(a).val(value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12)+ ' ' + value.slice(12, 16) + ' ' + value.slice(16, 19));
    }
}

END