javascript - 产品 key javascript 正则表达式失控

Question

我正在制作 Windows Vista simulator ，目前正在尝试制作产品 key 激活屏幕。我正在使用 JavaScript 和正则表达式来格式化输入的文本值，以实现由破折号分隔的五组五个字符的大写集，我试图通过以下代码实现:

$('#input-product-key').on('input', function() {
  if (!!$(this).val()) { var text = $(this).val().replace('-','').toString().toUpperCase().match(/.{1,5}/g).join("-"); $(this).val(text); }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="input-product-key" maxlength="25">

但是，在将第 12 个字符添加到框中后，破折号被添加到不应该越来越多的地方，并且按退格键也会添加更多破折号。这是为什么？

Answer 1

只需将第一个 .replace('-', '') 替换为此 replace:

.replace(/-/g,'')

因为先验只会替换第一个-； g 标志将确保用后一个标志替换每个破折号。

$('#input-product-key').on('input', function() {
  if (!!$(this).val()) { var text = $(this).val().replace(/-/g,'').toString().toUpperCase().match(/.{1,5}/g).join("-"); $(this).val(text); }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="input-product-key" maxlength="29" style="width:50%">