原文 js正则格式化日期时间自动补0

背景

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

解法一

思路:

先来看看常规方案。就用这个2022-3-4日期来举例子,我们先根据-切分字符串,得到一个数组,然后分别识别34这种个位数日期,<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-42022-03-04这种简单的转换,更复杂的日期格式或者日期时间格式,比如2022-3-4 1:2:3还不能匹配到。

而且,我们这里只识别了-这一种格式,假如还有2022/3/42022.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这种简写的日期格式也没有考虑在内

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

参考

原文来自 https://lwebapp.com

更多程序员工具箱:https://lwebapp.com/zh/tools

js正则格式化日期时间自动补0的更多相关文章

  1. JS时间戳格式化日期时间

    由于mysql数据库里面存储时间存的是时间戳,取出来之后,JS要格式化一下显示.(李昌辉) 用的次数比较多,所以写了一个简单方法来转换: //时间戳转时间 function RiQi(sj) { va ...

  2. JS时间戳格式化日期时间 由于mysql数据库里面存储时间存的是时间戳,取出来之后,JS要格式化一下显示。

    //时间戳转时间 function RiQi(sj) { var now = new Date(sj*1000); var year=now.getFullYear(); var month=now. ...

  3. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  4. Java数字格式化输出时前面补0

    Java数字格式化输出时前面补0 星期日 2014年11月30日|  分类: Java     /** * 里数字转字符串前面自动补0的实现. * */ public class TestString ...

  5. 格式化日期时间字符串 Get-Date -Uformat , -format

    #将字符串格式化为时间格式 $dateTimeStr = '20141231T23:59:59' $format = 'yyyyMMddTHH:mm:ss' $formatProvider = [Gl ...

  6. IOS开发之格式化日期时间

    IOS开发之格式化日期时间(转)   在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理. 例如: //实例化一个NSDateFor ...

  7. input内强制保留小数点后两位 位数不足时自动补0

    input内强制保留小数点后两位 位数不足时自动补0 小数点后位数超出2位时进行四舍五入 需引入jquery包 1.11.2版本 1 function xiaoshu(x) 2 { 3 var f = ...

  8. T-SQL使用案例——结果数据前面自动补0

    原文:T-SQL使用案例--结果数据前面自动补0 现象: 在开发的过程中,往往需要数字和字符串互转.在转换的过程中,可能需要把1编程00001,这样的格式.实现这种样子是有非常多的方法,本文主要提供一 ...

  9. java数字转字符串前面自动补0或者其他数字

    /**  * Java里数字转字符串前面自动补0的实现.  *  * @author  xiaomo *  */  public class TestStringFormat {    public ...

  10. Smarty 获取当前日期时间和格式化日期时间

    在Smarty 中获取当前日期时间和格式化日期时间与PHP中有些不同的地方,这里就为您详细介绍: 首先是获取当前的日期时间:在PHP中我们会使用date函数来获取当前的时间,实例代码如下:date(& ...

随机推荐

  1. edghasdz

    匹配2016年10月8日19时51分50秒匹配 可以使用

  2. java之StringBuffer

    StringBuffer就是字符串缓冲区,用于存储数据的容器. 特点:长度可变,可存储不同类型的数据,最终转化成字符串使用,可以对字符串修改 功能: 添加:append(value), insert( ...

  3. spinner 下拉框控件

    spinnerMode=dropdown时,为下拉模式spinnerMode=dialog时,会在界面中间弹出Android:popupBackground=”#f0000000”,可以去除spinn ...

  4. 菜鸟初试水--JQuery基础

    此文仅作入门级文章,望大神们高抬贵手! JQuery: 它是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作. JQuery的用途: ①访问和操作DOM元素: 使用j ...

  5. android自定义控件,其三个父类构造方法有什么区别

    android自定义控件时,通常需要重写父类构造函数.这三个够找函数具体啥时调用? public View (Context context) 是在java代码创建视图的时候被调用,如果是从xml填充 ...

  6. Microsoft.Identity的IPasswordHasher的默认实现与运用

    本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址  www.cnblogs.com/tdws 相信了解了MS Identity认证体系的一定知道UserManager的作用,他是整个体 ...

  7. Zepto源码分析-ajax模块

    源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...

  8. JBOSS安装配置详细教程

    首先在http://jbossas.jboss.org/downloads/下载相关程序我下载的是 JBoss AS 6.1.0.Final 1.配置jboss环境 1.1用户变量path后面添加 ; ...

  9. LINUX服务器--所有用户登陆操作命令审计

    Linux用户操作记录我们都可以通过命令history来查看历史记录,但是如果因为某人误操作了删除了重要的数据,那么Linux history命令就基本上不会有太大的作用了.我们怎么来查看Linux用 ...

  10. 高通QCC3026蓝牙音频芯片处理器介绍

    QCC3026是一款基于超低功耗架构的入门级闪存可编程蓝牙音频SoC,专为紧凑型功能优化的Qualcomm TrueWireless耳塞而设计.QCC3026旨在为我们的客户提供有助于缩短开发时间并具 ...