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这种简写的日期格式也没有考虑在内

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

参考

赞 (0)

相关推荐

  • 在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

  • 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

  • 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; }

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

    目录 背景 解法一 思路: 代码: 解法二 思路: 总结 参考 背景 时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置补 0.用moment.js.dayjs第三方库的 API 也很容易做到,这里我们自己实现一下看看. 解法一 思路: 先来看看常规方案.就用这个2022-3-4日期来举例子,我们先根据-切分字符串,得到一个数组,然后分别识别3.4这种个位数日期,<10就前置补 0,否则不操

  • 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

  • js中格式化日期时间型数据函数代码

    例如: 现有一字符串为: var dt="2010-1-1 12:20:20"; 第一步:将其转换成日期时间型数据 复制代码 代码如下: var newDt=new Date(dt.replace("-","/")); 第二步:格式化数据成"yyyy-MM-dd" (1)扩展Date 复制代码 代码如下: Date.prototype.format = function(format){ var o = { "M+

  • ASP中格式化时间短日期补0变两位长日期的方法

    因为短日期不足2位,所以在网页排版的时候,影响美观,下面两个函数可以解决这个问题. 2020-2-7短日期 变 2020-02-07长日期 Function FStime(times) Dim years,months,days if len(times)=0 then exit function years=year(times) months=right("0"&month(times),2) days=right("0"&day(times),

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

  • Python格式化日期时间操作示例

    本文实例讲述了Python格式化日期时间的方法.分享给大家供大家参考,具体如下: 常用的时间函数如下 获取当前日期:time.time() 获取元组形式的时间戳:time.local(time.time()) 格式化日期的函数(基于元组的形式进行格式化): (1)time.asctime(time.local(time.time())) (2)time.strftime(format[,t]) 将格式字符串转换为时间戳: time.strptime(str,fmt='%a %b %d %H:%M

  • Java使用DateFormatter格式化日期时间的方法示例

    Java使用DateFormatter格式化日期时间的方法示例

    本文实例讲述了Java使用DateFormatter格式化日期时间的方法.分享给大家供大家参考,具体如下: Java版本:1.8开始 import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.time.ZonedDateTime; import java.time.format.DateTimeFormatter; /** * Created by Fra

  • 使用Smarty 获取当前日期时间和格式化日期时间的方法详解

    在Smarty 中获取当前日期时间和格式化日期时间与PHP中有些不同的地方,这里就为您详细介绍: 首先是获取当前的日期时间:在PHP中我们会使用date函数来获取当前的时间,实例代码如下:date("Y-m-dH:i:s");   //该结果会显示为:2010-07-27 21:19:36 的模式 但是在Smarty 模板中我们就不能使用date 了,而是应该使用 now 来获取当前的时间,实例代码如下:{$smarty.now}      //该结果会显示为:1280236776的时

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

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

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

随机推荐