JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

Orig:<div id='orig'>1:๐Ÿ™‚__2:๐Œ†__3:รŸ__4:รœ__5:X__6:Y__7:ํŒ†__8:Z__9:โš ๏ธ__10:&#9888;&#65039;__11:&#9888;__12:&#128578;</div>

Copy:<div id='copy'></div>
Values:<textarea id='values'></textarea>

CSS

div {
    margin:10px;
    padding:10px;
    border:solid 1px grey;
}
textarea {
    width:calc(100% - 30px);
    height:50px;
    padding:10px;
}

JavaScript

if (!String.prototype.codePointAt) {
  String.prototype.codePointAt = function(pos) {
    pos = isNaN(pos) ? 0 : pos;
    var str = String(this),
      code = str.charCodeAt(pos),
      next = str.charCodeAt(pos + 1);
    // If a surrogate pair
    console.log(code+' ... '+next);
    if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
      return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
    }
    return code;
  };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(s) {
  var ret_val = '';
  for (var i = 0; i < s.length; i++) {
    if (s.codePointAt(i) > 127) {
      ret_val += '&#' + s.codePointAt(i) + ';';
    } else {
      ret_val += s.charAt(i);
    }
  }
  return ret_val;

}



var v = html_encode(document.getElementById('orig').innerHTML);
document.getElementById('copy').innerHTML = v;
document.getElementById('values').value = v;
console.log(v);