JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

The following 'source' uses the following html:<ul>
&amp;euro; A B C D &amp;#x1F600; &amp;#xD83D; &amp;#x41;
</ul>
<hr>

Source:
<div id="source" contentEditable="true">&euro; A B C D &#x1F600; &#xD83D; &#x41;</div>
<hr>

Trace:
<pre id="trace"></pre>

CSS

#source {
  background-color: #ebffd7;
  width: 90vw;
  margin: 10px;
}

#trace {
  background-color: #fdffb5;
  width: 90vw;
  margin: 10px;
}

.block {
  margin: 10px;
  border: solid 1px black;
  padding: 4px;
  display: inline-block;
  width: 190px;
}

JavaScript

var _last = '';


function getEncoding(html) {
  return html.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    return '&#x' + i.charCodeAt(0).toString(16) + ';';
  });
}


function tracer() {
  var html = document.getElementById('source').innerHTML;
  if (html == _last) return;
  _last = html;

  var encoding = getEncoding(html);
  var hex = "";
  var n = 1,
    c, p, i;
  for (p = 0; p < html.length; p++) {
    c = html.substr(p, 1);
    i = c.charCodeAt(0);

    if (c.charCodeAt(0).toString(16) == 20) hex += '<i>space</i> ';
    else hex += '<ul><span class="block">' +
      'char' + (n++) +
      ') ' + c +
      '(' + c.charCodeAt(0) +
      '/#x' + c.charCodeAt(0).toString(16) +
      ')</span> ';
  }

  console.log('encoding = ' + encoding);
  document.getElementById('trace').innerHTML = encoding + '<HR>' + hex;
}

setInterval(tracer, 1000);