char encoding experiment

by Laurens Maneschijn

HTML

<textarea id="ta1" placeholder="type here"></textarea>
<textarea id="ta2" readonly></textarea>
<textarea id="ta3" readonly></textarea>
examples:
<span>
  <button>0</button>
  <button>1</button>
  <button>2</button>
</span>

<div id="t"></div>

SCSS

textarea {
  box-sizing: border-box;
  width:100%;
  height:100px;
}
table.console_table {
  border-collapse:collapse;
  td,th {
    border: 1px solid #888;
  }
}

JavaScript

function fix(s,n){
  return ('0000'+s).substr(-n);
}
function getStrUnicodes(str){
  var a = [];
  for (var i=0 ; i < str.length ; i++) {
    a.push( '\\u' + fix((str.charCodeAt(i)).toString(16),4) );
  }
  return a;
}
function getStrHTMLcodes(str){
  var a = [];
  for (var i=0 ; i < str.length ; i++) {
    a.push( '&#' + (str.charCodeAt(i)) + ';' );
  }
  return a;
}

function charmap(str){
  var arr = [];
  for (var i=0 ; i < str.length ; i++) {
  	arr.push( {
      s:str[i],
      c:str[i].charCodeAt(0),
      u:getStrUnicodes(str[i]).join(''),
      h:getStrHTMLcodes(str[i]).join(''),
    } );
  }
  return arr;
}

function charmap_1(str){
  var strunicodes = getStrUnicodes(str);
  var strhtmlcodes = getStrHTMLcodes(str);
  var arr = [];
  for (var i=0 ; i < str.length ; i++) {
  	arr.push( {
      s:str[i],
      c:str.charCodeAt(i),
      u:strunicodes[i],
      h:strhtmlcodes[i],
    } );
  }
  return arr;
}

//  var s = '\u2713'; // ? (euro)
//  console.log( s ); // ?
//  console.log( getStrUnicodes(s) ); // ["\u2713"]
//  console.log( getStrHTMLcodes(s) ); // ["&#10003;"]

// example string:
var examples = [];
examples[0] = '';
examples[1] = '\u20ac\u000a\u2713\u000a\u20ac\u2713\u000a\u201c\u0071\u201d';
examples[2] = '\u000a\u004f\u0345\u0347\u0339\u033a\u019d\u0334\u0233\u0333\u0020\u0054\u0048\u0318\u0045\u0344\u0309\u0356\u0020\u0360\u0050\u032f\u034d\u032d\u004f\u031a\u200b\u004e\u0310\u0059\u0321\u0020\u0048\u0368\u034a\u033d\u0305\u033e\u030e\u0321\u0338\u032a\u032f\u0045\u033e\u035b\u036a\u0344\u0300\u0301\u0327\u0358\u032c\u0329\u0020\u0367\u033e\u036c\u0327\u0336\u0328\u0331\u0339\u032d\u032f\u0043\u036d\u030f\u0365\u036e\u035f\u0337\u0319\u0332\u031d\u0356\u004f\u036e\u034f\u032e\u032a\u031d\u034d\u004d\u034a\u0312\u031a\u036a\u0369\u036c\u031a\u035c\u0332\u0316\u0045\u0311\u0369\u034c\u035d\u0334\u031f\u031f\u0359\u031e\u000a';
$('button').click( function(){
	  $('#ta1').val(examples[ $(this).index() ] ).change();
});

function...