<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            margin-top: 5px;
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            outline: none;
        }
    </style>
</head>
<body>
    请输入银行卡号：
    <input type="text" id="cardInp" maxlength="23">

    <script>
        (function(){
            // 获取元素
            var cardInput = document.querySelector('#cardInp');

            // 当输入在输入框 输入就触发事件 input事件 这里使用input事件只要内容变化就会触发，如果使用keyup事件就不能应对粘贴过来的数据了
            cardInput.oninput = function() {
                // 当输入第5个数字的时候再加空格，前一部分正则是为了保证输入的都是数字，如果不是就会被替换成空，后边的正则使用了断言和模式单元。
                cardInput.value = cardInput.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
            }
        
        })()
    </script>   
</body>
</html>

更多推荐

正则表达式实现银行卡号