javascript - 使用 JavaScript 巧妙地设置时间格式

Question

我需要帮助编写一些正则表达式，以将整数替换为文本输入字段中的时间格式字符串。

在我的表单中:我有一个文本输入字段，我应该在其中写数字。当我写一个数字时:我想要一段 JavaScript 在输入字段失去焦点时将其转换为人类友好的、可读的时间。使这个“聪明”的原因是我希望能够尽可能少地编写:并将其转换为与我的号码相对应的最合适的时间。

让我举几个例子。如果我写:

7 it would resolve to 07:00
15 it would resolve to 15:00
93 it would resolve to 09:30
1945 it would resolve to 19:45
143 it would resolve to 14:30
... And so on ...

我希望它在输入字段失去焦点后执行此替换(onblur-事件)

还有。我想为夜间时间添加 0 前缀。像这样:

015 = 00:15
 03 = 00:30
012 = 00:12 
... And so on ...

<小时/>

我开始编写 if 语句来执行此操作，但我突然停了下来，因为我意识到这需要很多 if 语句，而且不太可靠。我觉得正则表达式会更聪明，因为它可以压缩我的脚本并使加载时间更快。我掌握了正则表达式的基础知识，但我不知道如何为此目的编写一个聪明的表达式。

这是我决定放弃代码之前的情况:

var elem = document.getElementById("incidentHourStart-" + row);

if (elem.value.length === 1) {
    // Must be a whole hour (0-9)
} else if (elem.value.length === 2) {
    // Can be either two digits hour (10-23) or hour + whole minute (73: 07:30)
    if (parseInt(elem.value) >= 10 && parseInt(elem.value) <= 23) {
        // Two digits, whole hour (10-23)
    } else {
        // First digit is hour, and last one is whole minute (10, 20, 30, 40, 50)   
    }

} else if (elem.value.length === 3) {
    // First digit must be an hour value, middle digit is also hour if it is lower than 23, last digit is then always whole minutes
    if (parseInt(elem.value) >= 10 && parseInt(elem.value) <= 23) {
        // Two digits, whole hour (10-23)
    } else {
        // First digit is hour, and last one is whole minute (10, 20, 30, 40, 50)   
    }
} else if (elem.value.length === 4) {
    // First two digits must be an hour value, last digits is then fine selected minutes

}

正如你所看到的:它看起来非常难看!

<小时/>

更新:

正如评论中所述:人们发现我的规则有点令人困惑。这是我希望它遵循的规则的伪代码。如果可以以巧妙的方式将其放入正则表达式中:那就太棒了!如果没有:我将写出 if/else block ，或按照建议将正则表达式分成几部分。

If text-length is equal to 1
    Resolve as whole hour between 0-9

    Examples:
        2 = 02:00
        8 = 08:00
        5 = 05:00

If text-length is equal to 2 AND number is between 10 and 23
    Resolve as whole hour between 10-23

    Examples:
        15 = 15:00
        11 = 11:00
        22 = 22:00

If text-length is equal to 2 AND number is NOT between 10 and 23
    Resolve as whole hour and minutes incremented by 10's (10, 20, 30, 40, 50)

    Examples:
        73 = 07:30
        24 = 02:40
        95 = 09:50

If text-length is equal to 3 AND first two numbers are between 10 and 23
    Resolve two first digits as hours and last digit as minutes incremented by 10's (10, 20, 30, 40, 50)

    Examples:
        133 = 13:30
        195 = 19:50
        111 = 11:10
        162 = 16:20

If text-length is equal to 3 AND first two numbers are NOT between 10 and 23
    Resolve first digit as whole hour, and last two as minutes.

    Examples:
        225 = 02:25
        922 = 09:22
        557 = 05:57
        451 = 04:51

If text-length is equal to 1 AND first digit is equal to 0
    Resolve as mid-night

    Example:
        0 = 00:00

If text-length is equal to 2 AND first digit is equal to 0
    Resolve as mid-night + minutes incremented by 10's (10, 20, 30, 40, 50)

    Examples:
        02 = 00:20
        05 = 00:50
        03 = 00:30

If text-length is equal to 3 AND first digit is equal to 0
    Resolve as mid-night + full minutes.

    Examples:
        024 = 00:24
        011 = 00:11
        056 = 00:56

If text-length is equal to 4
    Resolve as regular minutes and hours without the colon (:)

    Examples:
        1524 = 15:24
        2211 = 22:11

Answer 1

不要让自己变得比你需要的更难。简单的说;不要在一个正则表达式中执行此操作。另外，不要忘记在使用 RegEx 之前 trim 您的输入。

首先检查零前缀的，例如:

^0(\d+)$

然后，如果不匹配，请检查正常编号并根据需要将其与捕获组分开:

^([^0]\d{1,3})$ // Can do negative lookbehind here, but I left it simple in this case

正则表达式经常被滥用来解决一种模式中的更大问题。如果情况需要，最好拆分逻辑。不要使代码过于复杂。它会破坏任何以后需要阅读它的人的大脑。