js正则格式化日期时间自动补0的两种解法

目录
  • 背景
  • 解法一
    • 思路:
    • 代码:
  • 解法二
    • 思路:
  • 总结
  • 参考

背景

时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置补 0。用moment.js、dayjs第三方库的 API 也很容易做到,这里我们自己实现一下看看。

解法一

思路:

先来看看常规方案。就用这个2022-3-4日期来举例子,我们先根据-切分字符串,得到一个数组,然后分别识别3、4这种个位数日期,<10就前置补 0,否则不操作。

代码:

function formatDate(str) {
  // 根据 - 符号拆分
  return str
    .split("-")
    .map((item) => {
      // +item 将item字符串转换为数字
      // 小于10的时候就补全一个前缀0
      if (+item < 10) {
        return "0" + +item;
      }

      // 大于10的时候不用补0
      return item;
    })
    .join("-"); // 最后重组回来
}

// 测试
formatDate("2022-03-4"); // 输出 '2022-03-04'

上面这个方案,只适配了2022-3-4转2022-03-04这种简单的转换,更复杂的日期格式或者日期时间格式,比如2022-3-4 1:2:3还不能匹配到。 而且,我们这里只识别了-这一种格式,假如还有2022/3/4、2022.3.4这种写法呢?

解法二

思路:

再来看看用正则表达式,用正则表达式不仅可以简化代码,还能更容易的兼容更多情况。

我们的核心思路是用前瞻后顾来识别日期连接符号中间的数字,然后判断数字是否需要补全 0。写之前,先来熟悉几个正则表达式的用法。

1、前瞻:(?=),后顾:(?<=),

简单来理解,就是

// 前瞻:
A(?=B)   //查找B前面的A

// 后顾:
(?<=B)A   //查找B后面的A

// 负前瞻:
A(?!B)   //查找后面不是B的A

// 负后顾:
(?<!B)A   //查找前面不是B的A

我们这里可以用来识别-、/、.等字符之间的数字

2、单词边界:\b

  • 单词指的是\w可以匹配的字符,即数字、大小写字母以及下划线 [0-9a-zA-Z_]
  • 边界 指的是占位的字符左右的间隙位置

我们这里可以用于识别-到日期开始或结束位置的数字,比如2022-3-4 1:2:5中,4后面的间隙,1前面的间隙,5后面的间隙,都是单词边界

3、replace方法替换匹配的字符串:$&。

匹配到个位数数字之后,还要补 0,$&就是代表匹配到的数字,用0$&就可以实现补 0。

代码:

// 使用$&匹配
function formatDate(str) {
  /*
        replace第一个参数正则

        (?<=\/|-|\.|:|\b)\d{1}  用的是后顾,查找 / 或者 - 或者 . 或者 : 或者 单词边界 或者 T 后面的一个数字

        \d{1}(?=\/|-|\.|:|\b)   用的是前瞻,查找 / 或者 - 或者 . 或者 : 或者 单词边界  或者 T 前面的一个数字

        replace 第二个参数"0$&" 匹配到的字符串前置补0

    */
  return str.replace(/(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g, "0$&");
}

// 使用$1匹配
function formatDate(str) {
  /*
        replace第一个参数正则和上面的一样

        replace 第二个参数是一个函数,第一个入参就是匹配到的第一个参数,可以在函数内处理补0
    */
  return str.replace(
    /(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g,
    function ($1) {
      return "0" + $1;
    }
  );
}

// 测试
formatDate("2022-3-4 1:2:3"); // 输出 '2022-03-04 01:02:03'
formatDate("2022/3/4"); // 输出 '2022/03/04'
formatDate("2022.3.4"); // 输出 '2022.03.04'
formatDate("2020/8/9T1:2:3"); // 输出 '2020/08/09T01:02:03'

总结

我们这里只是做了普通字符串的转换,也有些缺点

  1. 日期校验没有内置
  2. 类似01/10/07这种简写的日期格式也没有考虑在内

感兴趣的朋友可以发挥下,丰富下我们的转换方法。

参考

时间: 2021-10-13

javascript添加前置0(补零)的几种方法

前言 众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串. 假如生成一个是一共是4位的有前置0的数据,通常我们能想到的方法是这样子的: function addPreZero(num){ if(num<10){ return '000'+num; }else if(num<100){ return '00'+num; }else if(num<1000){ return '0'+num; }else{ return num; }

JavaScript实现数字前补“0”的五种方法示例

本文实例讲述了JavaScript实现数字前补"0"的五种方法.分享给大家供大家参考,具体如下: 众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

在js中做数字字符串补0(js补零)

通常遇到的一个问题是日期的"1976-02-03 HH:mm:ss"这种格式 ,我的比较简单的处理方法是这样: function formatDate(d) { var D=['00','01','02','03','04','05','06','07','08','09'] with (d || new Date) return [ [getFullYear(), D[getMonth()+1]||getMonth()+1, D[getDate()]||getDate()].join

js中Number数字数值运算后值不对的解决方法

问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这

在JS中解析HTML字符串示例代码

在js中直接添加html语句,js会将html字符串解析成相应的HTML语句,并在前端进行显示. 复制代码 代码如下: <span style="font-size:14px;">var el = document.createElement( 'div' ); el.innerHTML = "<html><head><title>titleTest</title></head><body>&

JS中对象与字符串的互相转换详解

在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON.parse方法在遇到不可解析的字符串时,会抛出SyntaxError异常. 即:JSON.parse(text, reviver),This method parses a JSON text to produce an object or array. t can throw a SyntaxE

JS中判断某个字符串是否包含另一个字符串的五种方法

String对象的方法 方法一: indexOf()   (推荐) var str = "123" console.log(str.indexOf("2") != -1); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg

js中把JSON字符串转换成JSON对象最好的方法

在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析.   第一种解析方式:使用eval函数来解析,并且使用jQuery的each方法来遍历 用jQuery解析JSON数据的方法,作为jQuery异步请求的传输对象,jQuery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里

js中判断数字\字母\中文的正则表达式 (实例)

/* 判断指定的内容是否为空,若为空则弹出 警告框 */ function isEmpty(theValue, strMsg){ if(theValue==""){ alert(strMsg+"不能为空!"); return true; } return false; } /* 中文判断函数,允许生僻字用英文"*"代替 返回true表示是符合条件,返回false表示不符合 */ function isChinese(str){ var badCh

js中数组结合字符串实现查找(屏蔽广告判断url等)

1.广告屏蔽 有时候我们的广告页面都是统一的用js控制的,有些页面不想显示部分广告,那么我们只需要文章的id即可,纯字符串查找简单有效,我们也在用 var ad_softlist = ',,133015,155868,146429,'; if("undefined" != typeof softid){ //判断文章id是否存在,不存在就不执行,一般页面中会定义好var softid=45465; if(softid!=null && ad_softlist.index

node.js中格式化数字增加千位符的几种方法

每三位以逗号分隔的处理方式 正则方式: 复制代码 代码如下: "15000000".split("").reverse().join("").replace(/(\d{3})/g, "$1,").split("").reverse().join(""); "115000000".split("").reverse().join("&quo

js中如何把字符串转化为对象、数组示例代码

例如 复制代码 代码如下: var test='{ colkey: "col", colsinfo: "NameList" }' 很明显是一个对象,但如何把文本转为对象呢.使用eval();注意一定要加括号,否则会转换失败 把文本转化为对象 复制代码 代码如下: var test='{ colkey: "col", colsinfo: "NameList" }' var obj2=eval("("+test