<header>
  <h1>HEX / TEXT</h1>
  <p>Transforma código Ascii a Hexadecimal y vice-versa</p>
</header>
  <content>
    <div id="wrapper" >
      <p>&nbsp;</p>
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">TEXTO</span>
        <input type="text" class="form-control" placeholder="Cadena de texto" aria-describedby="sizing-addon1" id="txt_texto">
      </div>
      <p>&nbsp;</p>
       <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">HEXA</span>
        <input type="text" class="form-control" placeholder="Cadena codificada en Hexadecimal" aria-describedby="sizing-addon1" id="txt_hexa">
      </div>
      <p>&nbsp;</p>
      <p class="text-danger" id="msgerror"></p>
    </div>
  </content>

html, body {
    font-size: 10px;
    background: #e5ebf4;
    font-family: 'Open Sans', sans-serif !important;
}

body {margin:0;}

h1 {
  position:relative;
  margin:0px auto;
  width:auto;
  padding-bottom:0px;
  font-size:4.1rem;
  font-weight:300;
  letter-spacing: -0.15rem;
  color:#FFF
}

header {
  background:#2b303b;
  text-align:center;
  padding:10px;
}
header p {color:#96b5b4;}

#wrapper {
  width : 90%;
  margin : 0px auto;
}

$("#txt_texto").keyup ( function (){
 	 $("#txt_hexa").val( ofuscator($(this).val()) );
}) ;

$("#txt_hexa").keyup (function () {
  showAscii( $(this).val() );
});

function ofuscator ( code ){
  var cadenaRetorno = "";
  for (i=0;i<code.length;i++ ){
    cadenaRetorno += "&#" + code.charCodeAt(i).toString() + ";";
  }
  return cadenaRetorno;
} 

function showAscii( sHex ) {
  
  if ( sHex == '' )
    $("#txt_texto").val('');
    	
  
  if (/^(\&\#[0-9]+\;)+$/.test( sHex )) {
		var chunk = sHex.split(";"), cadena = '';
    myalert("");
    for (var i =0; i<chunk.length;i++){
    	try {
    		if ( chunk[i] != '' )
      		cadena += String.fromCharCode( chunk[i].substring(2) );
    		} catch (e) {}
  	}
    $("#txt_texto").val(cadena);
  } else {
    myalert("");
  }
}

function myalert ( msg ) {
  $("#msgerror").html( msg );
}