正则表达式实现字符串每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位后自动加空格效果(两种方法)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 正则删除字符串左、右或两端的空格经验总结

    我们前端在与后台人员进行数据交互时,经常会碰到这样的情况,我们经常需要获取文本框中用户输入的信息,然后通过ajax或form提交到后台.但是在用户输入信息时,我们无法保证用户输入的数据两端都没有空格.当然这些空格一般情况下是毫无意义的,因此我们有必要在将数据传输到后台之前,消除数据两端的空格.为了保证通用性,针对左.右及左右两端的空格清除,下面都进行了列举. 1.消除字符串左边的空格 复制代码 代码如下: function leftTrim(str){ return str.replace(/^

  • 去掉字符串前后所有空格的正则表达式

    去掉字符串前后所有空格的正则表达式

    正则表达式,又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. /**去掉字符串前后所有空格*/ function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } //计算标题长度 funct

  • JS不用正则验证输入的字符串是否为空(包含空格)的实现代码

    在项目中需要验证输入的字符串是否为空,包括空格,不太喜欢使用正则,所以就想到了js的indexOf函数,indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现,则该方法返回 -1. 语法:stringObject.indexOf(searchvalue,fromindex),searchvalue必需,fromindex:可选参数,在字符串中开始检索的位置.它的合法取值是 0 到 stringObject.length - 1.如省略该参数,则将从

  • javascript将字符串中的多个空格替换为一个空格的正则实例

    javascript将字符串中的多个空格缩减为一个空格代码实例: 在实际应用中可能有这样的需求,那就是将字符串中的多个空格缩减为一个空格. 下面就是一段能够实现此功能的代码实例. 代码如下: //对字符串扩展 String.prototype.ResetBlank=function(){ var regEx = /\s+/g; return this.replace(regEx, ' '); }; var str="jb51.net is a good site"; console.l

  • javascript中使用正则表达式实现删除字符串中的前后空格

    实例 复制代码 代码如下: <script> var str=" yexj00 "; str=str.replace(/^s*|s*$/g,''); alert(str); </script> 实例 模仿RTrim: 复制代码 代码如下: <script> var str="yexj00 "; str=str.replace(/s*$/g,''); alert(str); </script> 实例 代码以及测试代码如下

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

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

    需求:输入框中输入银行卡号(或其他)时,每4位自动加空格(如下图) 分析 方法一:监控输入框的keyup事件,当value值的长度为4,8,12,16时,插入空格字符串" "(vue中代码片段如下) <input type="text" v-model="bankCard" @keyup="bankCardKeyup"> bankCardKeyup (e) { let self = this // 如果是删除键,则

  • JS实现n秒后自动跳转的两种方法

    本文实例为大家分享了JS实现n秒后自动跳转的两种方法,供大家参考,具体内容如下 第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var time; time = $("#time").text(); time = parseInt(time); time--; if (time <= 0) { window.location.href = &q

  • 使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法

    搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是否为空 $("#dg").datagrid

  • python 自动刷新网页的两种方法

    python 自动刷新网页的两种方法

    1.简介 打开网页 实现定时刷新 可以看到 多次自动打开关闭网页之后,浏览的数量 从 118 自动变成了 119 2.功能实现 1) 一种方法 from time import sleep from selenium import webdriver driver= webdriver.Chrome() # 需要 下载 对应浏览器 驱动到 python 安装目录 driver.get("https://blog.csdn.net/qq_27061049/article/details/90577

  • eclipse中自动生成构造函数的两种方法

    eclipse中自动生成构造函数的两种方法

    eclipse中如何自动生成构造函数 eclipse是一个非常好的IDE,我在写java程序的时候使用eclipse感觉开发效率很高.而且有很多的快捷和简便方式供大家使用,并且能直接生成class文件(不需要javac编译).今天给大家介绍一下如何生成一个类的构造函数. 方法一: 我创建了一个类,里面有两个私有属性age和name.现在构造两个构造函数,一个不带参数,一个带参数.右键->source->Generate Constructors from Superclass,创建一个空参的构

  • Python爬虫后获取重定向url的两种方法

    下面给大家分享Python爬虫后获取重定向url的两种方法,具体内容如下所示: 方法(一) # 获得重定向url from urllib import request # https://zhidao.baidu.com/question/681501874175782812.html url = "https://www.baidu.com/link?url=IscBx0u8h9q4Uq3ihTs_PqnoNWe7slVWAd2dowQKrnqJedvthb3zrh9JqcMJu3ZqFrbW

  • ASP.NET Core中修改配置文件后自动加载新配置的方法详解

    前言 在 ASP.NET Core 默认的应用程序模板中, 配置文件的处理如下面的代码所示: config.AddJsonFile( path: "appsettings.json", optional: true, reloadOnChange: true ); config.AddJsonFile( path: $"appsettings.{env.EnvironmentName}.json", optional: true, reloadOnChange: t

  • php自动加载的两种实现方法

    php自动载方法有两种. 第一种方案用__autoload,这个函数较简单,也较弱. 但有一问题没有解决, 就是在include前判断文件是否存在的问题. 复制代码 代码如下: set_include_path('aa' . PATH_SEPARATOR . get_include_path()); function __autoload($className) { //如果加这个检测, 因为此文件不在当前目录下,它就会检测不到文件存在, //但include是能成功的 if (file_exi

  • linux尝试登录失败后锁定用户账户的两种方法

    本文主要给大家介绍了关于linux尝试登录失败后锁定用户账户的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. pam_tally2模块(方法一) 用于对系统进行失败的ssh登录尝试后锁定用户帐户.此模块保留已尝试访问的计数和过多的失败尝试. 配置 使用/etc/pam.d/system-auth或etc/pam.d/password-auth配置文件来配置的登录尝试的访问 auth required pam_tally2.so deny=3 unlock_time=600 acc

  • javaScript和jQuery自动加载简单代码实现方法

    在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法,大家可以参考一下:javaScript 页面自动加载事件详解 一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"></body> <!-- 当有一个onload --> <body onload="alert(2);alert(3);a

随机推荐