本文通过两种方法给大家介绍了正则表达式实现字符串每4位后自动加空格效果,需要的朋友可以参考下

需求:输入框中输入银行卡号(或其他)时,每4位自动加空格(如下图)

分析

方法一:监控输入框的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位后自动加空格效果(两种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

    无相关信息
最新资讯
“扒友商用户评论” 互联网企业不能没底线

“扒友商用户评论”

通过“扒友商用户评论”来提高所谓的用户黏性,这是一些
汽车后市场新公司能否重塑汽车后市场根基?

汽车后市场新公司能否

近年来,在汽车后市场行业中,“互联网+”的风头已经退去,
中消协要求苹果就盗刷事件赔偿:应一视同仁

中消协要求苹果就盗刷

就大量苹果手机用户遭盗刷一事,中国消费者协会要求苹果
无人机头部玩家角逐农业植保 极飞、大疆孰领风骚?

无人机头部玩家角逐农

不仅是消费市场,广袤无垠的田野,已经成为了无人机头部厂
马蜂窝“数据搬运门”的背后:融资利益链是罪魁祸首

马蜂窝“数据搬运门”

估值175亿的旅游独角兽,是一座僵尸和水军构成的鬼城。
谷歌计划向安卓手机厂商收费 弥补自身损失

谷歌计划向安卓手机厂

据外媒报道,谷歌正准备向在欧洲销售的安卓设备收缴专利
最新文章
正则表达式re.sub替换不完整的问题及完整解决方案

正则表达式re.sub替换

re.sub是个正则表达式方面的函数,用来实现通过正则表达
正则表达式实现字符串每4位后自动加空格效果(两种方法)

正则表达式实现字符串

本文通过两种方法给大家介绍了正则表达式实现字符串每
正则表达式grep用法详解

正则表达式grep用法详

grep是一种文本过滤工具,接下来通过本文给大家介绍正则
正则表达式实现添加、删除、替换三种功能

正则表达式实现添加、

本文的一段实例代码实现了通过用正则表达式来对某一个
SQL 正则表达式及mybatis中使用正则表达式

SQL 正则表达式及myba

这篇文章主要介绍了SQL 正则表达式及mybatis中使用正
JavaScript 正则表达式与字符串查找方法

JavaScript 正则表达

今天小编就为大家分享一篇JavaScript 正则表达式与字