zoukankan      html  css  js  c++  java
  • JS日期格式化--使用正则

    //采用正则格式化日期
    function dateFormat(fmt, date) {
        let ret;
        let opt = {
            "Y+": date.getFullYear().toString(),        //
            "m+": (date.getMonth() + 1).toString(),     //
            "d+": date.getDate().toString(),            //
            "H+": date.getHours().toString(),           //
            "M+": date.getMinutes().toString(),         //
            "S+": date.getSeconds().toString()          //
            // 有其他格式化字符需求可以继续添加,必须转化成字符串
        };
        for (let k in opt) {

          let reg = new RegExp("(" + k + ")");
          ret = reg.exec(fmt);
          console.log(reg);
          console.log(ret);

          if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
        return fmt;
    }

    这个原理是先构建一个对象,保存正则需要的表达式的内容,如Y+,m+等等,Y表示的是年份,所以对应的value是年份,以此类推其他月、天等。

    然后利用for in循环遍历对象,利用key生成正则对象,比如 opt对象的 “S+”这个属性的key,构造出的正则表达式/(S+)/,如下图:

    之后使用exec方法去匹配传的格式字符串,exec()方法匹配成功,返回一个数组对象,如下图:

    返回结果:数组元素、index和input两个属性

    数组元素:第0个是正则表达式匹配到的所有的字符串;第1个元素是正则表达式第1个子表达式匹配到的字符串(如果有);第2个元素是正则表达式第2个子表达式匹配到的字符串(如果有),之后的依此类推......,如下:

    因此在上面格式化时间时,遍历生成正则表达式,匹配,通过replace方法使用date获取的值替换fmt字符串内匹配到的内容,即依次匹配到fmt内表示年份、月份、天等的字符串,使用对应的年、月、日去替换。

    exec()方法匹配不成功返回null。

    采用test方法时,匹配成功返回的是true,失败返回false。

    RegExp 

    无论采用哪种方式都可以使用RegExp对象,

     如果成功RegExp.$1返回匹配到的字符串,比如/(m+)/匹配到mm。$0 $2都会返回"",空字符串。

     padStart

    padStart(len,str) :该方法用于补全字符串

    len:补全长度

    str:补充的字符串,使用这个字符串补充。

    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))

    解释:

    fmt: yyyy-mm-dd HH:MM:SS

    ret:每一次匹配的结果,比如匹配到mm,ret[1] = mm,ret[1].length = 2,表示日期格式月份的长度应该是2,此时

    (ret[1].length == 1) ?不成立,执行
    opt[k].padStart(ret[1].length, "0")),
    opt[k]是月份值,如果月份长度不是月份格式长度,表示此时月份小于10,要对月份数据用 0 进行补全,否则不用补全。
  • 相关阅读:
    集合类--容器
    《学习之道》第十一章理解
    文件操作引出流(一)Stream和File.Create(path)
    整理文件操作(五)
    整理文件操作(四)Image.FromFile(path)
    整理文件操作(三)File.Exists(path)和new FileInfo(path).Exists
    整理文件操作(二)File和FileInfo
    整理文件操作(一)逻辑流程
    《学习之道》第十一章先理解再去记忆
    《学习之道》第十一章再次强调激发感官
  • 原文地址:https://www.cnblogs.com/hzozj/p/11770126.html
Copyright © 2011-2022 走看看