stringToUUID

by vanowm

HTML

<div>
  <div>
    <textarea id="text" oninput="convert()"></textarea>
    <input type="button" onclick="convert()" value="UPDATE">
    <input type="button" onclick="_clear()" value="CLEAR">
  </div>

  <div class="log even">
    <input id="ws" type="checkbox" oninput="ws(this)" title="Show whitespaces"/>
    <div id="log"></div>
  </div>
</div>

CSS

html
{
  height: 90%;
  padding: 0.5em;
}
body,
body > div
{
  height: 100%;
  margin: 0;
}
body > div > div
{
  display: flex;
}
textarea
{
  width: 25em;
  height: 1.5em;
}
#uuid
{
  resize: none;
}
.log
{
  display: flex;
  height: 90%;
  border: 1px solid black;
  overflow: auto;
  padding: 0.1em;
}
.log > div
{
  width: 100%;
  word-break: none;
}
.log > div > div > span
{
  margin: 0;
  min-height: 1.5em;
  font-family: monospace;
  white-space: pre;
  display: inline-block;
  vertical-align: top;
}
.log > div > div > span:nth-child(3)
{
  position: relative;
  left: 2.25em;
}
.log > div > div > span:nth-child(3)::before
{
  margin: 0 0.5em 0 -1.75em;
  content: "->";
  color: grey;
}

.log.even > div > div:nth-child(even),
.log:not(.even) > div > div:nth-child(odd)
{
  background-color: rgb(250, 250, 250);
}
#ws
{
  position: absolute;
  right: 0.6em;
  top: 3em;
}
#ws:not(:checked) + #log .ws > span:nth-child(1)
{
  display: none;
}
.ws > span:nth-child(1),
.wr
{
  background-color: lightgray;
  color: white;
  font-style: italic;
  margin: 0 0.1em;
  padding: 0 0.1em 0 0.1em;
  font-size: 0.7em;
  vertical-align: middle;
}
.h,
#ws:checked + #log .ws > span:nth-child(2)
{
  font-size: 0;
}
.ws > span:nth-child(1),
.wr,
.nus
{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

JavaScript

function stringToUUID (str) 
{
  if (str === undefined || !str.length)
    str = "" + Math.random() * new Date().getTime() + Math.random();

  let c = 0,
      r = "";
  
	const max = 0xfffffffffffff;
  const hi = 0x80000000;
  const lo = 0x7FFFFFFF;
  const and = (a, b) => (~~(a / hi) & ~~(b / hi)) * hi + ((a & lo) & (b & lo));
  for (let i = 0; i < str.length; i++)
  {
    c = c + (str.charCodeAt(i) * (i + 1) - 1);
    if (c > max)
    	c = and(c, max);
  }

	str = str.substr(str.length / 2) + c.toString(16) + str.substr(0, str.length / 2);
  for(let i = 0, p = c + str.length; i < 32; i++)
  {
    if (i == 8 || i == 12 || i == 16 || i == 20)
    	r += "-";

    c = p = (str[(i ** i + p + 1) % str.length]).charCodeAt(0) + p + i;
		if (i == 12)
    	c = (c % 5) + 1; //1-5
    else if (i == 16)
    	c = (c % 4) + 8; //8-B
    else
    	c %= 16; //0-F

    r += c.toString(16);
  }
  return r;
}

var log = document.getElementById("log"),
    text = document.getElementById("text"),
    uuid = "",
    prevTEXT = "";

function _clear()
{
  prevTEXT = text.value = log.innerHTML = "";
  convert(true);
}
function convert()
{
	if (text.value !== "" && text.value == prevTEXT)
  	return;

	log.parentNode.classList.toggle("even", !log.parentNode.classList.contains("even"));
	let div = document.createElement("div"),
  		pUUID = document.createElement("span"),
  		pTEXT = pUUID.cloneNode(false),
      pSPACE = pUUID.cloneNode(false),
      _text = text.value,
      ws = {
      	" ": "SP",
        "\n": "LF",
        "\r": "CR",
        "\t": "TAB",
        "\f": "FF"
      },
      wst = {
      	" ": "SPACE",
        "\n": "LINE FEED",
        "\r": "CARRIAGE RETURN",
        "\t": "TAB",
        "\f": "FORM FEED"
      }
	pSPACE.className = "h";
  pSPACE.textContent = " "
  pTEXT.innerHTML = _text.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");

	uuid =...