Question

我正在尝试格式化字段，以便将在input中输入的整数预先格式化为特定格式。

当前，我具有随附的JQuery，它可以将输入的字符串格式化为xx.xx.xx.xx，如何强制将格式设置为x.xx.xx.xxx，并限制8个整数？

$('.versionNum').keyup(function() {
  var foo = $(this).val().split(".").join(""); // remove periods
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,2}', 'g')).join(".");
  }
  $(this).val(foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="versionNum" />

Answer 1

我不认为使用正则表达式构造输出是最易读的选择-这会有点复杂且难以阅读。取而代之的是，一旦有了数字字符串，则需要slice每个部分，然后按布尔值过滤（以删除空字符串）并按点连接：

$('.versionNum').keyup(function() {
  const nums = $(this).val().replace(/\D/g, '');
  const n0 = nums[0];
  const n1 = nums.slice(1, 3);
  const n2 = nums.slice(3, 5);
  const n3 = nums.slice(5, 8);
  $(this).val(
    [n0, n1, n2, n3].filter(Boolean).join('.')
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="versionNum" />

正则表达式版本：

$('.versionNum').keyup(function() {
  const numStr = $(this).val().replace(/\D/g, '');
  const [, ...arr] = numStr.match(/(\d?)(\d{0,2})(\d{0,2})(\d{0,3})/);
  $(this).val(
    arr.filter(Boolean).join('.')
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="versionNum" />

用句点格式化输入字段

1 个答案: