javascript - 如果不是 yyyy/mm/dd 格式，则删除当前输入？

Question

如果输入数据与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">

Answer 1

一旦你真正分解了你想要的逻辑，策略实际上非常简单。因此，您希望将用户输入强制转换为 YYYY/MM/DD 格式。我们可以一步一步地做到这一点:

1. 将输入值除以 / 字符。您现在得到一个数组。
2. 我们保留数组的前三个元素，它们应分别对应于 YYYY、MM 和 DD。我们将忽略后面的任何片段，因为它们不是有效日期的一部分。这可以通过在数组上使用 .slice(0,3) 来完成。
3. 解析数组的每个单独部分:
   • 在索引 0 处，您有年份片段。使用 .substring(0,4) 将其 trim 为最多 4 个字符
   • 在索引 1 或 2 处，分别有月/日片段。使用 .substring(0,2) 将其 trim 为最多 2 个字符
4. 使用 .join('/') 将结果数组重新连接起来。
5. 如果数组包含空元素，则字符串中将出现重复的 // 。只需使用正则表达式 .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">