正则表达式实现字符串每四位后自动加空格效果（两种方法)

需求：输入框中输入银行卡号（或其他)时，每四位自动加空格（如下图)

分析

方法一：监控输入框的按键事件，当价值值的长度为4,8,12,16时，插入空格字符串" "(vue中代码片段如下)

输入类型=' text ' v-model='银行卡' @ keyup='银行卡keyup '银行卡keyup(e){ let self=this//如果是删除键，则不加空格，且删去字符串末端空格if (e.keyCode===8) { self。银行卡=自我。银行卡。replace(/[\ s \ n \ t]$/g ' ')return } self。银行卡=self.bankcard.replace(/[^0-9|' ']*/g ' ')让值=self.bankcard.replace(/[^0-9]*/g ' ')if(值。长度4值。长度=8){ self。银行卡=value.slice(0，4) ' ' value.slice(4，value。length)} else if(值。长度8值。长度=12){ self。银行卡=value.slice(0，4)' '值。length)} else if(值。长度12值。长度=16){ self。银行卡=value.slice(0，4) ' ' value.slice(4，8) ' ' value.slice(8，12) ' ' value.slice(12，value。长度)if(值。长度===16){//调用识别银行卡函数} } else if (value.length 16) { self。银行卡=value.slice(0，4) ' ' value.slice(4，8) ' ' value.slice(8，12) ' ' value.slice(12，16) ' ' value.slice(16，value。长度)if(值。长度===19){//调用识别银行卡函数} else if(值。长度19){ self。银行卡=价值。切片(0，4)“”值。切片(4，8)' "值。切片(8，12)' "值。切片(12，16)值。切片(16，19) } } }，方法二：最佳实践- - - 利用正则匹配，自动设置投入框的价值值（能在任意位置添加任意字符，且会自动删除字符串末端空格)

输入类型=' text ' v-model='银行卡' @ keyup='银行卡keyup '银行卡keyup(){ let self=this self。银行卡=自我。银行卡。替换(/\ s/g ' ').replace(/[^\d]/g,'').替换(/(\d{4})(？=\d)/g，' $1 ')}总结

以上所述是小编给大家介绍的正则表达式实现字符串每四位后自动加空格效果（两种方法),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！