The originalJs regular formatting date and time automatically fill 0

background

The need for time and date formatting is common, and there are many toolclass conversion methods, such as the need to convert the date format 2022-3-4 to 2022-03-04, which automatically prefixes 0 for the single digit month or day. It’s also easy to use the moment. Js, dayjs third-party library API, so let’s implement it ourselves.

Method a

Ideas:

Let’s look at the general scenario. Let’s use the date 2022-3-4 as an example. We first get an array based on the – split string, and then identify 3 and 4 single-digit dates respectively.

Code:

function formatDate(str) {
  // Split according to the - symbol
  return str
    .split("-")
    .map((item) = > {
      // +item converts the item string to a number
      // Complete the prefix 0 when less than 10
      if (+item < 10) {
        return "0" + +item;
      }

      // Do not add 0 when greater than 10
      return item;
    })
    .join("-"); // Finally regroup back
}

/ / test
formatDate("2022-03-4"); / / output '2022-03-04'
Copy the code

The above scheme only matches the simple conversion of 2022-3-4 to 2022-03-04. More complex date format or date-time format, such as 2022-3-4 1:2:3, cannot be matched. Also, we only recognize this format, what if there are 2022/4/4, 2022.3.4?

Method 2

Ideas:

Taking a look at regular expressions, regular expressions not only simplify code, but also make it easier to accommodate more situations.

The idea is to look backwards to identify the digits in the middle of the date link symbol, and then determine if the digits need to be filled in with zeros. Before writing, familiarize yourself with a few regular expressions.

  1. Foresight: (? =), (? < =),

    The simple way to think about it is that

    / / perspective:A(? =B)// find A in front of B

/ / to look:(? <=B)A// find A after B

// Negative outlook:A(? ! B)// find A that does not follow B

//(? <! B)A// Find A that is not preceded by B
Copy the code

    Here we can identify the digits between -, /, dot, etc

  2. Word boundary: \b

    • The word refers to\wCharacters that can be matched, namely digits, uppercase letters, and underscores[0-9a-zA-Z_]
    • Boundaries are the Spaces between placeholder characters

    We can use here to identify the numbers to the beginning or end of the date, such as 2022-3-4 1:2:5, the gap after 4, the gap before 1, the gap after 5, are all word boundaries

  3. The replace method replaces the matching string: $&.

    $& = 0$& = 0$& = 0$& = 0$&

Code:

// Use $& matching
function formatDate(str) {
  /* replace The first argument is re (? < = \ / | - | \ | : | \ \ d {1} b) use is long, find/or - or. Or: or a word boundary or a number after T \d{1}(? = \ / | - | \ | : | \ b) with foresight, find/or - or. Replace The string matched by the second argument "0$&" is prefixed with 0 */
  return str.replace(/ (? <=\/|-|\.|:|\b|T)\d{1}(? =\/|-|\.|:|\b|T)/g."0 $&");
}

// Match with $1
function formatDate(str) {
  Replace the second argument is a function. The first input argument is the first argument to be matched, and the function can handle the complement 0 */
  return str.replace(
    / (? <=\/|-|\.|:|\b|T)\d{1}(? =\/|-|\.|:|\b|T)/g.function ($1) {
      return "0" + $1; }); }/ / test
formatDate("The 2022-3-4 syntactic sugar for 1:2:3"); // Output '2022-03-04 01:02:03'
formatDate("2022/3/4"); / / output '2022/03/04'
formatDate("2022.3.4"); / / output '2022.03.04'
formatDate("2020/8/9T1:2:3"); / / output '2020/08/09 T01:02:03'
Copy the code

conclusion

We’re just doing normal string conversions here, and there are some drawbacks

  1. Date checking is not built in
  2. similar01/10/07The date format of this shorthand is also not taken into account

Interested friends can play, enrich our conversion method.

reference

  • Js re – lookup and non – capture grouping
  • Regular expression boundary
  • String.prototype.replace()
  • assertions

From the originallwebapp.com

More programmer toolkits:lwebapp.com/zh/tools