js正则格式化日期时间自动补0的两种解法 将2022-3-4这种日期格式转化为2022-03-04
https://www.jb51.net/article/225324.htm
背景
时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置补 0。用moment.js、dayjs第三方库的 API 也很容易做到,这里我们自己实现一下看看。
解法一
思路:
先来看看常规方案。就用这个2022-3-4日期来举例子,我们先根据-切分字符串,得到一个数组,然后分别识别3、4这种个位数日期,<10就前置补 0,否则不操作。
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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、前瞻:(?=),后顾:(?<=),
简单来理解,就是
1 2 3 4 5 6 7 8 9 10 11 | // 前瞻: 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。
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // 使用$&匹配 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' |
总结
我们这里只是做了普通字符串的转换,也有些缺点
- 日期校验没有内置
- 类似01/10/07这种简写的日期格式也没有考虑在内
感兴趣的朋友可以发挥下,丰富下我们的转换方法。