JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="inputText"></textarea>
<button id="doIt">do it</button>

<h3>result</h3>
<code id="output"></code>

CSS

code {
    display:block;
    padding: 4px;
    background-color: #EFEFEF;
    
}

JavaScript

$('#doIt').click(function () {
    // you can call "encodeAndWrap" on any string
    var encodedStr = encodeAndWrap($('#inputText').val(), 'sup');
    
    // this is strictly for demonstration
    $('#output').html(
            encodedStr.replace(/&/gim, '&amp;')
                .replace(/</gim, '&lt;')
                .replace(/>/gim, '&gt;')
    );
});


var encodeAndWrap = function (str, tag) {
     return str.replace(/[\u00A0-\u99999<>\&]/gim, function(i) {
         return (tag ? '<'+tag+'>' :'')+'&#'+i.charCodeAt(0)+';'+(tag ? '</'+tag+'>' : '');
    });
};