使用 jQuery 或 Javascript 从字符串中解析出 GUID

Question

在我的网站上，我有一个文本框，用户可以在其中输入来自促销代码的 GUID。我想自动将连字符添加到用户手动或通过 copy/paste 输入的字符串中。这应该通过 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

这是使用 jquery inputmask 包的工作 GUID 掩码。

$( () => {
  $("#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" />

使用 jQuery 或 Javascript 从字符串中解析出 GUID

Parse GUID out of string with jQuery or Javascript

javascript

jquery

guid