每隔四个字符添加一个空格的正则怎么写?

作者 BiYuqi 日期 2017-03-11
每隔四个字符添加一个空格的正则怎么写?

最近有懒惰不少,好久没写博客了,今天在一群里看到有小伙伴问怎用正则规律的添加空格,花了几分钟写了下,做下记录

需求

这样的效果在填写银行卡的时候十分常见,这也是非常人性化的举措,动笔写吧,起初我想用js实现,可想想各种字符串,各种循环,我决定还是得正则靠谱.

实现

试了下,一个正则我还搞不定,水平有限就用俩吧:
分析:

  • 首先肯定是得把4n个字符找出来
  • 其次把剩余的字符找出来
//取前4n个字符
var reg = /(\w{4})/g;
//拿到最后剩余的字符
var reg2 = /(?:\w{4})+(\w+)/g;

封装

接下来我们这这些代码组织一下,封装一个通用的方法,进而只需要传字符,可自动输出想要的字符:

function getSpace(s){
    //过滤了空格的存在
    //实际中根据需求是否必须去掉空格
    s = s.replace(/\s*/g,'');
    if(s.length === 0){
        return '';
    }
    if(s.length < 4 && s.length !== 0){
        return s;
    }
    var m,n,res = '';
    var reg = /(\w{4})/g;
    var reg2 = /(?:\w{4})+(\w+)/;
    while(m = reg.exec(s)){
        //循环加空格
        res += m[1] +' ';
    }
    //做下判断是否是4的整数倍
    if(s.length%4 == 0){
        //整数倍会多一个空格 去除
        return res.replace(/\s$/,'');
    }else{
        //否则用俩正则
        var n = reg2.exec(s);
        return (res+n[1]);
    }
}
//Demo
var str = '1234567890';
console.log(getSpace(str));
//1234 5678 90

实战

下面是支付宝的绑定银行卡界面:
监听oninput事件,进行实时的提示用户输入的卡号

咱们模拟下:

//html
<input type="text" id="get">
<div class="show"></div>

//js
var box = document.querySelector('#get');
var show = document.querySelector('.show');
box.oninput = function(){
    show.innerHTML =getSpace(box.value);
}
//ok大功告成 自己测试去吧

通用模块封装

/*
*@param s 即将被转化的字符  String
*@param num 字符的间隔    Number
*@param type 字符的类型  String
*/
function getSpace(s,num,type){
    //过滤了空格的存在
    //实际中根据需求是否必须去掉空格
    s = s.replace(/\s*/g,'');
    if(s.length === 0){
        return '';
    }
    if(s.length < num && s.length !== 0){
        return s;
    }
    var m,n,res = '';
    var reg = new RegExp('(\\w{'+num+'})','g');
    var reg2 = new RegExp('(?:\\w{'+num+'})+(\\w+)','g');
    var reg3 = new RegExp(''+type+'$');
    while(m = reg.exec(s)){
        res += m[1] + type;
    }
    if(s.length%num == 0){
        return res.replace(reg3,'');
    }else{
        var n = reg2.exec(s);
        return (res+n[1]);
    }
}
//用法
var st = '1234567890';
getSpace(st,3,',');
//123,456,789,0
getSpace(st,4,'.');
//1234.5678.90
getSpace(st,2,'$');
//12$34$56$78$90

//诸位发挥想象力吧...........
//想怎么用就怎么用....

说明

本文所写的函数,适用于数字字母下划线,没有做只允许数字的判断,如果需要只需在函数开始对s进行判断,return 即可;如有问题,请评论区留言