JSFiddle - React, Tailwind, and code Playground

by Radiocity

HTML

<input type="text" id="in">
<input type="text" id="out">

JavaScript

String.prototype.translit = (function(){
    var L = {
        'А':'A', 'а':'a',
        'Б':'B', 'б':'b',
        'В':'V', 'в':'v',
        'Г':'G', 'г':'g',
        'Д':'D', 'д':'d',
        'Е':'E', 'е':'e',
        'Ё':'Yo', 'ё':'yo',
        'Ж':'Zh', 'ж':'zh',
        'З':'Z', 'з':'z',
        'И':'I', 'и':'i',
        'Й':'Y', 'й':'y',
        'К':'K', 'к':'k',
        'Л':'L', 'л':'l',
        'М':'M', 'м':'m',
        'Н':'N', 'н':'n',
        'О':'O', 'о':'o',
        'П':'P', 'п':'p',
        'Р':'R', 'р':'r',
        'С':'S', 'с':'s',
        'Т':'T', 'т':'t',
        'У':'U', 'у':'u',
        'Ф':'F', 'ф':'f',
        'Х':'Kh', 'х':'kh',
        'Ц':'Ts', 'ц':'ts',
        'Ч':'Ch', 'ч':'ch',
        'Ш':'Sh', 'ш':'sh',
        'Щ':'Sch', 'щ':'sch',
        'Ъ':'"', 'ъ':'"',
        'Ы':'Y', 'ы':'y',
        'Ь':"'", 'ь':"'",
        'Э':'E', 'э':'e',
        'Ю':'Yu', 'ю':'yu',
        'Я':'Ya', 'я':'ya'
    };
    var r = '';
    var k;
    for (k in L) r += k;
    r = new RegExp('[' + r + ']', 'g');
    k = function(a){
        return a in L ? L[a] : '';
    };
    return function(){
        return this.replace(r, k);
    };
})();
 
document.getElementById("in").onkeyup = function(){
    document.getElementById("out").value = this.value.translit();
};