Parse GUID out of string with jQuery or Javascript

In my website I have a textbox where the user will enter a GUID from a promo code. I would like to automatically add hyphens to the string that the user enters manually or via copy/paste. This should be done via jQuery or jQuery or maybe there is a HTML5 solution as well?

I've found a solution for a creditcard number, which is not that far away from the solution I am searching for. But as I am not experienced with RegEx I cannot get it to work for a GUID.

This is what I have so far:

$('.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 = foo2.match(new RegExp('.{8}{4}{4}{4}{12}', 'g')).join("-");    
  }
  $(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"/>