JSFiddle - React, Tailwind, and code Playground

by kritzikratzi

HTML

Input: <br>
<input type="text" id="in" onkeyup="run();" value="€😛&lt;br&gt;&amp;→›%₠₪😥😱〘⸩⬛︎▼◀︎㛨"></input>
    <br>
    
Raw: 
    <span id="result-raw"></span>
    <br>
        
Escaped: 
    <span id="result-escaped"></span>
    <br>
        
Escaped (2x): 
     <span id="result-escapedx2"></span>
     <br>

CSS

input{
    width: 90%; 
}

JavaScript

// escape a string for display in html
// references: 
// String.prototype.codePointAt polyfill
//  https://raw.githubusercontent.com/mathiasbynens/String.prototype.codePointAt/master/codepointat.js
// how to convert characters to html entities
// http://stackoverflow.com/a/1354491/347508

// html overrides from https://html.spec.whatwg.org/multipage/syntax.html#table-charref-overrides
var _escape_overrides = { 0x00:'\uFFFD',0x80:'\u20AC',0x82:'\u201A',0x83:'\u0192',0x84:'\u201E',0x85:'\u2026',0x86:'\u2020',0x87:'\u2021',0x88:'\u02C6',0x89:'\u2030',0x8A:'\u0160',0x8B:'\u2039',0x8C:'\u0152',0x8E:'\u017D',0x91:'\u2018',0x92:'\u2019',0x93:'\u201C',0x94:'\u201D',0x95:'\u2022',0x96:'\u2013',0x97:'\u2014',0x98:'\u02DC',0x99:'\u2122',0x9A:'\u0161',0x9B:'\u203A',0x9C:'\u0153',0x9E:'\u017E',0x9F:'\u0178' }; 

function escapeHtml(str){
	return str.replace(/([\u0000-\uD799]|[\uD800-\uDBFF][\uDC00-\uFFFF])/g, function(c) {
		var c1 = c.charCodeAt(0);
		// ascii character, use override or escape
        if( c1 <= 0xFF ) return (c1=_escape_overrides[c1])?c1:escape(c).replace(/%(..)/g,"&#x$1;");
		// utf8/16 character
		else if( c.length == 1 ) return "&#" + c1 + ";"; 
		// surrogate pair
		else if( c.length == 2 && c1 >= 0xD800 && c1 <= 0xDBFF ) return "&#" + ((c1-0xD800)*0x400 + c.charCodeAt(1) - 0xDC00 + 0x10000) + ";"
		// no clue .. 
		else return "";
	});
}

function run(){
    var str = document.getElementById("in").value; 
    document.getElementById("result-raw").innerHTML = str;
    document.getElementById("result-escaped").innerHTML = escapeHtml(str); 
    document.getElementById("result-escapedx2").innerHTML = escapeHtml(escapeHtml(str)); 
}

window.onload = run;