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

 更新时间:2021年10月14日 14:51:36   作者:独书先生  
在javascript开发中,我们会遇到日期时间格式化的问题,下面这篇文章主要给大家介绍了关于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这种简写的日期格式也没有考虑在内

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

参考

相关文章

  • javascript检查表单数据是否改变的方法

    javascript检查表单数据是否改变的方法

    需要检查用户是否修改了一个表单中的内容,可以使用本文提供的方法,如果修改了表单的内容则返回true,没修改则返回false,有需求的朋友可以参考下
    2013-07-07
  • 使用uniapp实现发布朋友圈功能

    使用uniapp实现发布朋友圈功能

    这篇文章主要介绍了使用uniapp实现发布朋友圈功能,在文章底部给大家介绍了uniapp 微信小程序分享、分享朋友圈功能,通过页内自定义分享按钮,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • js实现鼠标悬停图片上时滚动文字说明的方法

    js实现鼠标悬停图片上时滚动文字说明的方法

    这篇文章主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下
    2015-02-02
  • 浅谈js使用in和hasOwnProperty获取对象属性的区别

    浅谈js使用in和hasOwnProperty获取对象属性的区别

    下面小编就为大家带来一篇浅谈js使用in和hasOwnProperty获取对象属性的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 通过JS解决页面刷新导致按钮OnClientClick事件消失问题

    通过JS解决页面刷新导致按钮OnClientClick事件消失问题

    这篇文章主要介绍了如何通过JS解决页面刷新导致按钮OnClientClick事件消失问题,OnClientClick 提供客户端JS执行能力,并以 return false 或 return true 来决定是否继续执行 OnClick 事件,需要的朋友可以参考下
    2024-12-12
  • js生成缩略图后上传并利用canvas重绘

    js生成缩略图后上传并利用canvas重绘

    这篇文章主要介绍了js生成缩略图后上传,利用canvas重绘,需要的朋友可以参考下
    2014-05-05
  • 两个比较有用的Javascript工具函数代码

    两个比较有用的Javascript工具函数代码

    下面我的base.js中的extend函数可以允许用json格式赋值属性甚至是函数句柄
    2010-02-02
  • 改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件

    改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件

    这篇文章主要介绍了改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 小程序自定义弹框的方法

    小程序自定义弹框的方法

    这篇文章主要为大家详细介绍了小程序自定义弹框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • TypeScript路径别名的配置指南

    TypeScript路径别名的配置指南

    TypeScript 提供了路径别名的功能,方便开发者在大型项目中更高效地引用模块,减少相对路径的冗长与复杂,本文将详细介绍如何配置路径别名,如何结合 Vite 和 Node 环境进行别名设置,帮助开发者在项目开发中更为便捷地组织代码,需要的朋友可以参考下
    2025-03-03

最新评论