js 銀行卡每四位加空格3種方法實(shí)現(xiàn)

1.正則實(shí)現(xiàn)（推薦）

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

以上正則實(shí)現(xiàn)完美無(wú)誤，
但由于我們的項(xiàng)目后臺(tái)對(duì)“{}”進(jìn)行了轉(zhuǎn)義，
所以導(dǎo)致正則中的“{}”無(wú)法實(shí)現(xiàn)，
呵呵 ，（此處省略一千萬(wàn)字）。。。。。。。。。。。。。。
于是自己鼓搗出了以下方法！

2.其他方法實(shí)現(xiàn)

var n_value = $('#card_number').val();
$('#card_number').bind('input propertychange', function(){
    // 正則篩選掉字母與空格，只允許輸入數(shù)字，且刪去字符串末端空格
    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位后加空格簡(jiǎn)單一些，
主要是刪除空格時(shí)，導(dǎo)致與添加空格沖突需要再加判斷解決！

3.另一種方法：

與第二種類似，輸入時(shí)稍有延遲，問(wèn)題不大，dom中input綁定onkeyup執(zhí)行此函數(shù)即可

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