快捷導(dǎo)航

js正則格式化日期時(shí)間自動(dòng)補(bǔ)0的兩種解法

更新時(shí)間：2021年10月14日 14:51:36 作者：獨(dú)書先生

在javascript開發(fā)中,我們會(huì)遇到日期時(shí)間格式化的問題,下面這篇文章主要給大家介紹了關(guān)于js正則格式化日期時(shí)間自動(dòng)補(bǔ)0的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景

時(shí)間日期格式化的需求很常見，也有很多工具類轉(zhuǎn)換方法，比如需要將2022-3-4這種日期格式轉(zhuǎn)化為2022-03-04，也就是實(shí)現(xiàn)個(gè)位數(shù)月份或天數(shù)日期自動(dòng)前置補(bǔ) 0。用moment.js、dayjs第三方庫的 API 也很容易做到，這里我們自己實(shí)現(xiàn)一下看看。

解法一

思路：

先來看看常規(guī)方案。就用這個(gè)2022-3-4日期來舉例子，我們先根據(jù)-切分字符串，得到一個(gè)數(shù)組，然后分別識(shí)別3、4這種個(gè)位數(shù)日期，<10就前置補(bǔ) 0，否則不操作。

代碼：

function formatDate(str) {
  // 根據(jù) - 符號(hào)拆分
  return str
    .split("-")
    .map((item) => {
      // +item 將item字符串轉(zhuǎn)換為數(shù)字
      // 小于10的時(shí)候就補(bǔ)全一個(gè)前綴0
      if (+item < 10) {
        return "0" + +item;
      }

      // 大于10的時(shí)候不用補(bǔ)0
      return item;
    })
    .join("-"); // 最后重組回來
}

// 測(cè)試
formatDate("2022-03-4"); // 輸出 '2022-03-04'

上面這個(gè)方案，只適配了2022-3-4轉(zhuǎn)2022-03-04這種簡(jiǎn)單的轉(zhuǎn)換，更復(fù)雜的日期格式或者日期時(shí)間格式，比如2022-3-4 1:2:3還不能匹配到。而且，我們這里只識(shí)別了-這一種格式，假如還有2022/3/4、2022.3.4這種寫法呢？

解法二

思路：

再來看看用正則表達(dá)式，用正則表達(dá)式不僅可以簡(jiǎn)化代碼，還能更容易的兼容更多情況。

我們的核心思路是用前瞻后顧來識(shí)別日期連接符號(hào)中間的數(shù)字，然后判斷數(shù)字是否需要補(bǔ)全 0。寫之前，先來熟悉幾個(gè)正則表達(dá)式的用法。

1、前瞻：(?=)，后顧：(?<=)，

簡(jiǎn)單來理解，就是

// 前瞻：
A(?=B)   //查找B前面的A

// 后顧：
(?<=B)A   //查找B后面的A

// 負(fù)前瞻：
A(?!B)   //查找后面不是B的A

// 負(fù)后顧：
(?<!B)A   //查找前面不是B的A

我們這里可以用來識(shí)別-、/、.等字符之間的數(shù)字

2、單詞邊界：\b

單詞指的是\w可以匹配的字符，即數(shù)字、大小寫字母以及下劃線 [0-9a-zA-Z_]
邊界指的是占位的字符左右的間隙位置

我們這里可以用于識(shí)別-到日期開始或結(jié)束位置的數(shù)字，比如2022-3-4 1:2:5中，4后面的間隙，1前面的間隙，5后面的間隙，都是單詞邊界

3、replace方法替換匹配的字符串：$&。

匹配到個(gè)位數(shù)數(shù)字之后，還要補(bǔ) 0，$&就是代表匹配到的數(shù)字，用0$&就可以實(shí)現(xiàn)補(bǔ) 0。

代碼：

// 使用$&匹配
function formatDate(str) {
  /*  
        replace第一個(gè)參數(shù)正則

        (?<=\/|-|\.|:|\b)\d{1}  用的是后顧，查找 / 或者 - 或者 . 或者 : 或者 單詞邊界 或者 T 后面的一個(gè)數(shù)字

        \d{1}(?=\/|-|\.|:|\b)   用的是前瞻，查找 / 或者 - 或者 . 或者 : 或者 單詞邊界  或者 T 前面的一個(gè)數(shù)字

        replace 第二個(gè)參數(shù)"0$&" 匹配到的字符串前置補(bǔ)0

    */
  return str.replace(/(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g, "0$&");
}

// 使用$1匹配
function formatDate(str) {
  /*
        replace第一個(gè)參數(shù)正則和上面的一樣
        
        replace 第二個(gè)參數(shù)是一個(gè)函數(shù)，第一個(gè)入?yún)⒕褪瞧ヅ涞降牡谝粋€(gè)參數(shù)，可以在函數(shù)內(nèi)處理補(bǔ)0
    */
  return str.replace(
    /(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g,
    function ($1) {
      return "0" + $1;
    }
  );
}

// 測(cè)試
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'