如果输入数据与yyyy/mm/dd
格式不匹配,我想删除它!我尝试了以下但只删除字母和特殊字符...
例如。
20144 -> must remove last 4
2014// -> must remove last /
2014/01/123 -> must remove last 3
$("input").on("keyup", function() {
console.log(this.value);
this.value = this.value.replace(/[^(\d{4})\/(\d{1,2})\/(\d{1,2})]/g, '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
最佳答案
一旦你真正分解了你想要的逻辑,策略实际上非常简单。因此,您希望将用户输入强制转换为 YYYY/MM/DD
格式。我们可以一步一步地做到这一点:
- 将输入值除以
/
字符。您现在得到一个数组。 - 我们保留数组的前三个元素,它们应分别对应于
YYYY
、MM
和DD
。我们将忽略后面的任何片段,因为它们不是有效日期的一部分。这可以通过在数组上使用.slice(0,3)
来完成。 - 解析数组的每个单独部分:
- 在索引
0
处,您有年份片段。使用.substring(0,4)
将其 trim 为最多 4 个字符 - 在索引
1
或2
处,分别有月/日片段。使用.substring(0,2)
将其 trim 为最多 2 个字符
- 在索引
- 使用
.join('/')
将结果数组重新连接起来。 - 如果数组包含空元素,则字符串中将出现重复的
//
。只需使用正则表达式.replace(/\/(\/)+/, '/') 来 trim 它们
您会注意到,在我的逻辑中,我没有包含填充数字,例如
。将天数从 1
转换为 01
。当用户输入时你不能这样做,因为你永远不知道用户是想输入一位还是两位数字。如果您想要这样做,您将必须重新解析输入onblur
,因为此时您知道用户已完成输入。
请参阅下面的概念验证:
$('input').on('keyup', function() {
var valueParts = this.value.split('/');
if (!valueParts.length) {
return;
}
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Substring array (keep first 4 characters for year, and first 2 characters for month/day)
var substringCounts = [4, 2, 2];
substringCounts.forEach(function(substringCount, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].substring(0, substringCount);
});
// Join remaining elements
var parsedString = valueParts.join('/');
// Trim extraneous slashes
parsedString = parsedString.replace(/\/(\/)+/, '/');
this.value = parsedString;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
注意:如果您想填充数字,则必须在上面提到的内容之上添加以下逻辑:
// Pad numbers on blur
$('input').on('blur', function() {
var valueParts = this.value.split('/');
if (!valueParts.length) {
return;
}
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Pad lengths (year to 4 digits, month to 2 digits, day to 2 digits)
var padLengths = [4, 2, 2];
padLengths.forEach(function(padLength, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].padStart(padLength, '0');
});
// Join remaining elements
var parsedString = valueParts.join('/');
// Trim extraneous slashes
parsedString = parsedString.replace(/\/(\/)+/, '/');
this.value = parsedString;
});
考虑到这一点,如果你想将上述两个逻辑结合在一起,你可以抽象出处理“连接剩余元素”和“trim 无关斜杠”的部分。我隐藏了下面的代码片段,因为它非常冗长并且大部分包含与上面提到的相同的逻辑:
// Helper method: joins array using '/' and trims duplicated joining characters
function joinAndTrimSlashes(valueArray) {
// Join remaining elements
var parsedString = valueArray.join('/');
// Trim extraneous slashes
parsedString = parsedString.replace(/\/(\/)+/, '/');
return parsedString;
}
$('input').on('keyup', function() {
var valueParts = this.value.split('/');
if (!valueParts.length)
return;
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Substring array (keep first 4 characters for year, and first 2 characters for month/day)
var substringCounts = [4, 2, 2];
substringCounts.forEach(function(substringCount, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].substring(0, substringCount);
});
this.value = joinAndTrimSlashes(valueParts);
});
// Pad numbers on blur
$('input').on('blur', function() {
var valueParts = this.value.split('/');
if (!valueParts.length)
return;
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Pad lengths (year to 4 digits, month to 2 digits, day to 2 digits)
var padLengths = [4, 2, 2];
padLengths.forEach(function(padLength, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].padStart(padLength, '0');
});
this.value = joinAndTrimSlashes(valueParts);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
关于javascript - 如果不是 yyyy/mm/dd 格式,则删除当前输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54328656/