Разберите GUID из строки с помощью jQuery или Javascript

Question

На моем веб-сайте у меня есть текстовое поле, где пользователь вводит GUID из промокода. Я хотел бы автоматически добавлять дефисы к строке, которую пользователь вводит вручную или с помощью копирования / вставки. Это должно быть сделано через jQuery или jQuery, или, может быть, есть решение HTML5?

Я нашел решение для номера кредитной карты, которое не так уж далеко от решения Я ищу. Но, поскольку у меня нет опыта работы с RegEx, я не могу заставить его работать для GUID.

Пользователь @jmp придумал другую идею, которая в целом работает, но выглядит ... не очень хорошо. Потому что, когда вы начинаете вводить свой код, ваше значение выглядит как «123 -----». Было бы неплохо, если бы строка менялась динамически, как в примере 1 (кредитная карта)

Вот что у меня есть:

$('.creditCardText').keyup(function() {
  var foo1 = $(this).val().split("-").join(""); // remove hyphens
  if (foo1.length > 0) {
    foo1 = foo1.match(new RegExp('.{1,4}', 'g')).join("-");    
  }
  $(this).val(foo1);
});


$('.guidText').keyup(function() {
  var foo2 = $(this).val().split("-").join(""); // remove hyphens
  if (foo2.length > 0) {
    foo2 = new String().concat(foo2.substring(0,8), '-', foo2.substring(8,12), '-', foo2.substring(12,16), '-', foo2.substring(16,20), '-', foo2.substring(20,32));
  }
  $(this).val(foo2);
});

input[type="text"] {
    width: 350px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Creditcard pattern:<br />
<input type="text" class="creditCardText" placeholder="1234-5678-1111-0000" maxlength="19"/>

<br/><br/>

GUID Pattern:<br />
<input type="text" class="guidText" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" maxlength="36"/>

PS: Мне не разрешено использовать внешние плагины или скрипты

Answer 1

Вот ваша рабочая маска GUID с использованием пакета jquery inputmask.

$( () => {
  $("#cc").inputmask({"mask": "99999999-9999-9999-9999-999999999999"});
});

input {
  font-family: monospace;
}
label {
  display: block;
}
div {
  margin: 0 0 1rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<form action="">
  
  <div>
    <label for="cc">GUID</label>
    <!-- Set via HTML -->
    <input id="cc" type="text" data-inputmask="'mask': '99999999-9999-9999-9999-999999999999'" />
  </div>
  
</form>

Хорошо, вот тот, который я сделал, без каких-либо плагинов.

const el = document.getElementById("in");

el.addEventListener("keyup", e => {
  if (e.keyCode === 8 || e.keyCode === 46) return;

  const arr = e.target.value.split("");
  const digitsNum = [8, 4, 4, 4, 12];

  let count = 0;
  let index = 0;
  let ret = "";

  for (let digit of arr) {
    if(typeof digitsNum[index] === 'undefined') continue;

    count++;

    ret += digit!= "-" ? digit : "";

    if(typeof digitsNum[index] !== 'undefined')
    if (count >= digitsNum[index]) {
      count = -1;
      index++;
      ret += "-";
    }
    
  }

  e.target.value = ret;
});

<input type="text" id="in" />