js正则格式化日期时间自动补0
原文 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。写之前,先来熟悉几个正则表达式的用法。
前瞻:
(?=)
,后顾:(?<=)
,简单来理解,就是
// 前瞻:
A(?=B) //查找B前面的A // 后顾:
(?<=B)A //查找B后面的A // 负前瞻:
A(?!B) //查找后面不是B的A // 负后顾:
(?<!B)A //查找前面不是B的A
我们这里可以用来识别
-
、/
、.
等字符之间的数字单词边界:
\b
- 单词指的是
\w
可以匹配的字符,即数字、大小写字母以及下划线[0-9a-zA-Z_]
- 边界 指的是占位的字符左右的间隙位置
我们这里可以用于识别
-
到日期开始或结束位置的数字,比如2022-3-4 1:2:5
中,4
后面的间隙,1
前面的间隙,5
后面的间隙,都是单词边界- 单词指的是
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'
总结
我们这里只是做了普通字符串的转换,也有些缺点
- 日期校验没有内置
- 类似
01/10/07
这种简写的日期格式也没有考虑在内
感兴趣的朋友可以发挥下,丰富下我们的转换方法。
参考
原文来自 https://lwebapp.com
更多程序员工具箱:https://lwebapp.com/zh/tools
js正则格式化日期时间自动补0的更多相关文章
- JS时间戳格式化日期时间
由于mysql数据库里面存储时间存的是时间戳,取出来之后,JS要格式化一下显示.(李昌辉) 用的次数比较多,所以写了一个简单方法来转换: //时间戳转时间 function RiQi(sj) { va ...
- JS时间戳格式化日期时间 由于mysql数据库里面存储时间存的是时间戳,取出来之后,JS要格式化一下显示。
//时间戳转时间 function RiQi(sj) { var now = new Date(sj*1000); var year=now.getFullYear(); var month=now. ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- Java数字格式化输出时前面补0
Java数字格式化输出时前面补0 星期日 2014年11月30日| 分类: Java /** * 里数字转字符串前面自动补0的实现. * */ public class TestString ...
- 格式化日期时间字符串 Get-Date -Uformat , -format
#将字符串格式化为时间格式 $dateTimeStr = '20141231T23:59:59' $format = 'yyyyMMddTHH:mm:ss' $formatProvider = [Gl ...
- IOS开发之格式化日期时间
IOS开发之格式化日期时间(转) 在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理. 例如: //实例化一个NSDateFor ...
- input内强制保留小数点后两位 位数不足时自动补0
input内强制保留小数点后两位 位数不足时自动补0 小数点后位数超出2位时进行四舍五入 需引入jquery包 1.11.2版本 1 function xiaoshu(x) 2 { 3 var f = ...
- T-SQL使用案例——结果数据前面自动补0
原文:T-SQL使用案例--结果数据前面自动补0 现象: 在开发的过程中,往往需要数字和字符串互转.在转换的过程中,可能需要把1编程00001,这样的格式.实现这种样子是有非常多的方法,本文主要提供一 ...
- java数字转字符串前面自动补0或者其他数字
/** * Java里数字转字符串前面自动补0的实现. * * @author xiaomo * */ public class TestStringFormat { public ...
随机推荐
- The Second Week lucklyzpp
The Second Week 文件通配符模式 在Linux系统中预定义的字符类 1.显示/etc目录下,以非字母开头,后面跟了一个字母以及其它任意长度任意字符的文件或目录 2.复制/etc目录下 ...
- ES6扩展——函数扩展之默认参数
1.函数的默认参数 //函数的默认参数 function add(a, b = 999){ console.log(a,b); //1 999 } add(1); 2. 函数的形参可以设置默认值,默认 ...
- eclipse 将本地插件引用(多种方法)
eclipse 将本地插件引用(多种方法) 因为工作原因需要使用eclipse,而接触的项目需要一个eclipse的插件才可以进行一些特殊的使用,但是因为年久用的人也少,我解压原先带有插件版本的ecl ...
- linux centos7 定时执行服务监控脚本
2021-08-25 1. 需求 在服务挂掉之后我们要怎么做才能保证服务在短时间内开启?可以编写脚本监控服务的状态,在服务挂掉后及时将其开启,并定时执行该脚本. 2. 脚本编写 思路:平常我们可以通过 ...
- css 边框添加三角形指向,简单粗暴,易学易懂
构建一个 div , class 随便命名 css 部分 class 名字 { position: relative; // 相对定位是重点 } class名字:before,class名字:afte ...
- springMVC学习总结(三) --springMVC重定向
根据springMVC学习总结(一) --springMVC搭建搭建项目 在com.myl.controller包下创建一个java类WebController. 在jsp子文件夹下创建一个视图文件i ...
- jvm学习笔记:虚拟机栈
虚拟机栈 Each Java Virtual Machine thread has a private Java Virtual Machine stack, created at the same ...
- Swagger-初见
目录 Swagger简介 SpringBoot集成Swagger 配置Swagger 配置扫描接口 配置Swagger开关 配置API分组 实体配置 常用注解 Swagger简介 前后端分离 前端 - ...
- Spring Boot 入门系列(二十八) JPA 的实体映射关系,一对一,一对多,多对多关系映射!
前面讲了Spring Boot 使用 JPA,实现JPA 的增.删.改.查的功能,同时也介绍了JPA的一些查询,自定义SQL查询等使用.JPA使用非常简单,功能非常强大的ORM框架,无需任何数据访问层 ...
- [初学Python]编写一个最简单判断SQL注入的检测工具
0x01 背景 15年那会,几乎可以说是渗透最火的一年,各种教程各种文章,本人也是有幸在那几年学到了一些皮毛,中间因学业问题将其荒废至今.当初最早学的便是,and 1=1 和 and 1=2 这最简单 ...