JSFiddle - React, Tailwind, and code Playground

by p337

HTML

<input id="value" />
<br>
<br>
<textarea id="output"></textarea>

CSS

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
#value {
    width:500px;
}
#output {
    width:500px;
    height:300px;
}

JavaScript

//hexVal
var hex = function (chr) {
    return chr.charCodeAt(0).toString(16).toUpperCase();
};

//Hex Encode (url) %3C
var hexEncode = function (str, partial) {
    if(partial)
        return uriEncode(str);
    var output = '';
    for (var i = 0; i < str.length; i++) {
        output += '%' + hex(str[i]);
    }
    return output;
};

var uriEncode = function (str) {
    return encodeURIComponent(str).replace(/[!'()*]/g, escape);
}

var htmlHexEntityEncode = function (str, partial) {
    var output = '';
    for (var i = 0; i < str.length; i++) {
        output += partial && !shouldEncode(str[i]) ? str[i] : '&#' + hex(str[i]) + ';';
    }
    return output;
};

var htmlEntityEncode = function (str, partial) {
    var output = '';
    for (var i = 0; i < str.length; i++) {
        output += partial && !shouldEncode(str[i]) ? str[i] : '&#' + str.charCodeAt(i) + ';';
    }
    return output;
};

var toFromCharCode = function(str){
	var output = 'String.fromCharCode(';
    var codes = [];
    for(var i=0; i< str.length; i++){
    	codes.push(str.charCodeAt(i));
    }
    return output + codes.join(',') + ');';
};

var shouldEncode = function (chr) {
    var cVal = chr.charCodeAt(0);
    var dangerous = [34, 38, 39, 47, 60, 62]; // ", &, ', /, <, >
    var max = 160;
    if( cVal > max || dangerous.indexOf(cVal) !== -1){
        return true;
    }
    return false;
}

//base64
var base64Encode = btoa;

$('#value').on('keyup', function () {
    $('#output').text(
    	uriEncode(
      	htmlEntityEncode(
      		$(this).val(), false
        )
      )
    );
});