JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<label>Blackletter translator</label>
<textarea></textarea>
<div class="out"></div>

CSS

body {
    margin: 1em 5%;
}
textarea,
.out {
    width: 100%;
    height: 5em;
}

JavaScript

var blackletter = function(str) {
    var out = '', l = '', i = 0, c = 0,
		others = {C: 8493, H: 8460, I: 8465, R: 8476, Z: 8488};

    for (i = 0; i < str.length; i++) {
        l = str[i];
		if (l in others) {
			c = others[l];
		} else if (l == l.toLowerCase() && l != l.toUpperCase()) {
			c = l.charCodeAt(0) + 119997;
        } else if (l == l.toUpperCase() && l != l.toLowerCase()) {
			c = l.charCodeAt(0) + 120003;
        } else {
            out += l;
			continue;
        }

		out += '&#' + c + ';';
    }
    
    return out;
};

$('textarea').keyup(function() {
    $('.out').html(blackletter($(this).val()));
});