在Javascript中,如何使用正则表达式和string.replace
函数验证和修改用户时间输入,以便不会告诉用户任何内容,它会动态验证和修改输入?
例如,用户输入可以是1.12p
13:12
1,12PM
,但最终结果应始终为1:12 PM
。
有没有人有关于如何这样做的例子?
PS。我知道使用timepicker是一种更有效的方式,但在这种情况下我必须使用用户输入
答案 0 :(得分:1)
一个简单的正则表达式,您可以将其作为起点:
(\d{1,2})\s*[.,:;]\s*(\d{1,2})\s*(([Aa]|[Pp])[Mm]?)?
^ ^ ^ ^ ^ ^ ^ ^ ^
Hour group | | Minutes | | | M is optional
| Valid separators | | Case-insensitivity
| | | AM/PM group
------------------------------Allow spaces
你仍然需要验证时间是否有效(59:99可能无效),但这至少可以更容易解析javascript中的字符串。在解析之后,您可以根据需要将其打印出来。
编辑:哎呀。忘了javascript不支持命名组。只需使用编号组即可达到同样的效果。
示例强>
什么干草...这是一个完整的工作示例。何时验证(以及如何处理无效输入)由您决定:
<html>
<head>
<script>
function parseTime( timeString ){
var timePattern = /(\d{1,2})\s*[.,:;]\s*(\d{1,2})\s*(([Aa]|[Pp])[Mm]?)?/;
var timeMatch = timePattern.exec( timeString );
var INVALID = null;
if ( timeMatch !== null ){
var hour = timeMatch[1];
var minute = timeMatch[2];
var ampm = timeMatch[3];
if ( minute < 0 || minute > 59 )
return INVALID;
if ( ampm != "" ){
if ( hour < 1 || hour > 12 )
return INVALID;
ampm = ampm.substring(0,1).toUpperCase() == "A" ? "AM" : "PM";
} else {
if ( hour > 23 )
return INVALID;
ampm = ( hour < 13 ? "AM" : "PM" );
hour = hour % 12;
if ( hour == 0 ) hour = 12;
}
return hour + ":" + minute + " " + ampm;
} else {
return INVALID;
}
}
function unitTest(){
var testStrings = [
["1:30 PM", "1:30 PM"],
["1.30p", "1:30 PM"],
["1;30a", "1:30 AM"],
["59:99 PM", null],
["0,30", "12:30 AM"],
["15:00", "3:00 PM"],
["abc", null] ];
var testResults;
testResults = "<table><tr><th>Input</th><th>Expected</th><th>Actual</th></tr>";
for (var i = 0; i < testStrings.length; i++){
testResults +=
"<tr>" +
"<td>" + testStrings[i][0] + "</td>" +
"<td>" + testStrings[i][1] + "</td>" +
"<td>" + parseTime( testStrings[i][0] ) + "</td>" +
"<td>" + ( testStrings[i][1] == parseTime( testStrings[i][0] ) ?
"<span style='color:green'>Success</span>" :
"<span style='color:red'>Failure</span>" ) +
"</td>" +
"</tr>";
}
testResults += "</table>";
this.document.getElementById("results").innerHTML = testResults;
}
</script>
</head>
<body onload="unitTest();">
<div id="results">
</div>
</body>
</html>
<强>输出:强>
输入预期实际值 下午1:30 PM 1:30 PM 1:30成功
1.30p 1:30 PM 1:30 PM成功
1; 30a 1:30 AM 1:30 AM成功
59:99 PM null null成功
0,30 12:30 AM 12:30 AM成功
15:00 3:00 PM 3:00 PM成功
abc null null成功