这篇文章给大家介绍使用正则表达式怎么实现字符串每4位后自动加空格效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联于2013年开始,是专业互联网技术服务公司,拥有项目成都网站制作、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元呼图壁做网站,已为上家服务,为呼图壁各地企业和个人服务,联系电话:18982081108
方法一:监控输入框的keyup事件,当value值的长度为4,8,12,16时,插入空格字符串“ ”(vue中代码片段如下)
<input type="text" v-model="bankCard" @keyup="bankCardKeyup"> bankCardKeyup (e) { let self = this // 如果是删除键,则不加空格,且删去字符串末端空格 if (e.keyCode === 8) { self.bankCard = self.bankCard.replace(/[\s\n\t]+$/g, "") return } self.bankCard = self.bankCard.replace(/[^0-9|' ']*/g, '') let value = self.bankCard.replace(/[^0-9]*/g, '') if (value.length > 4 && value.length <= 8) { self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, value.length) } else if (value.length > 8 && value.length <= 12) { self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, value.length) } else if (value.length > 12 && value.length <= 16) { self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12) + ' ' + value.slice(12, value.length) if (value.length === 16) { // 调用识别银行卡函数 } } else if (value.length > 16) { self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12)+ ' ' + value.slice(12, 16) + ' ' + value.slice(16, value.length) if (value.length === 19) { // 调用识别银行卡函数 } else if (value.length > 19) { self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12)+ ' ' + value.slice(12, 16) + ' ' + value.slice(16, 19) } } },
方法二:最佳实践 - - - 利用正则匹配,自动设置input框的value值(能在任意位置添加任意字符,且会自动删除字符串末端空格)
<input type="text" v-model="bankCard" @keyup="bankCardKeyup"> bankCardKeyup () { let self = this self.bankCard = self.bankCard.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ') }
关于使用正则表达式怎么实现字符串每4位后自动加空格效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站栏目:使用正则表达式怎么实现字符串每4位后自动加空格效果
地址分享:https://www.cdcxhl.com/article46/pipheg.html
成都网站建设公司_创新互联,为您提供、营销型网站建设、网站排名、定制网站、用户体验、虚拟主机
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联