Ce

contenteditable

HTML

<div id="banner" contenteditable="true">Hello World</div>
<pre id="out"></pre>

CSS

#out {
  height: 200px;
  overflow: auto;
  background: #eee;
}

JavaScript

// find elements
var banner = $("#banner")
var out = $("#out")

// handle click and add class
banner.on("change input", function(){
  var conent = banner[0].textContent;
  var charCodes = [];
  
  for ( var i = 5; i > 0; i-- ) {
  	const c = conent.charCodeAt( conent.length - i );
    if ( c === 32 ) {
    	charCodes.push( '(space)' );
    } else if ( c === 160 ) {
    	charCodes.push( '(nbsp)' );
    } else {
    	charCodes.push( conent.charAt( conent.length - i ) )
    }
  }
  
  charCodes = charCodes.join( ', ' );

  out[0].textContent = charCodes + '\n' + out[0].textContent;
})