Transliteration

by nikita_turing

HTML

<div id="div_lit">
    <p>Texteingabe</p>
    <textarea id="inp_txt" onkeyup="/*oJS.strNormalize(this)*/" style="height:10em;width:100%" id="in">л</textarea>
    <p>Ausgabe:</p>
    <textarea style="height:10em;width:100%" id="out"></textarea>
</div>
<div id="rules">
    <rule>
        <from>&#x0430;</from>
        <to>&#x0061;</to>
    </rule>
    <rule>
        <from>&#x0410;</from>
        <to>&#x0041;</to>
    </rule>
    <rule>
        <from>&#x0431;</from>
        <to>&#x0062;</to>
    </rule>
    <rule>
        <from>&#x0411;</from>
        <to>&#x0042;</to>
    </rule>
    <rule>
        <from>&#x0432;</from>
        <to>&#x0076;</to>
    </rule>
    <rule>
        <from>&#x0412;</from>
        <to>&#x0056;</to>
    </rule>
    <rule>
        <from>&#x0433;</from>
        <to>&#x0067;</to>
    </rule>
    <rule>
        <from>&#x0413;</from>
        <to>&#x0047;</to>
    </rule>
    <rule>
        <from>&#x0434;</from>
        <to>&#x0064;</to>
    </rule>
    <rule>
        <from>&#x0414;</from>
        <to>&#x0044;</to>
    </rule>
    <rule>
        <from>&#x0435;</from>
        <to>&#x0065;</to>
    </rule>
    <rule>
        <from>&#x0415;</from>
        <to>&#x0045;</to>
    </rule>
    <rule>
        <from>&#x0451;</from>
        <to>&#x00EB;</to>
    </rule>
    <rule>
        <from>&#x0401;</from>
        <to>&#x00CB;</to>
    </rule>
    <rule>
        <from>&#x0436;</from>
        <to>&#x017E;</to>
    </rule>
    <rule>
        <from>&#x0416;</from>
        <to>&#x017D;</to>
    </rule>
    <rule>
        <from>&#x0437;</from>
        <to>&#x007A;</to>
    </rule>
    <rule>
        <from>&#x0417;</from>
        <to>&#x005A;</to>
    </rule>
    <rule>
        <from>&#x0438;</from>
        <to>&#x0069;</to>
    </rule>
    <rule>
        <from>&#x0418;</from>
        <to>&#x0049;</to>
    </rule>
    <rule>
        <from>&#x0456;</from>
        <to>&#x0069;</to>
    </rule>
    <rule>
        <from>&#x0406;</from>
        <to>&#x0049;</to>
   ...

CSS

textarea {
    background: lightblue;
    border: none;
    border-radius: 10px;
}
p {
    font-size: 2em;
}
#div_lit {
    margin: 5% 10%;
}
rule {
    display:none
}

JavaScript

/* Javascript functions */

function xchar(achar) {
    var codeHex = achar.charCodeAt(0).toString(16).toUpperCase();
    while (codeHex.length < 4) {
        codeHex = "0" + codeHex;
    }

    return "&#x" + codeHex + ";";
}

function entityForSymbolInContainer(selector) {
    var code = $(selector).text().charCodeAt(0);
    var codeHex = code.toString(16).toUpperCase();
    while (codeHex.length < 4) {
        codeHex = "0" + codeHex;
    }

    return "&#x" + codeHex + ";";
}

function new_char(achar) {

    var found = $('#rules').children('rule').has('from').find(":contains(" + achar + ")").siblings("to");
    console.log($('#rules').children('rule').has('from').find(":contains(" + achar + ")").parent().html() + '--->' + $('#rules').children('rule').has('from').find(":contains(" + achar + ")").siblings("to").text());
    if (found.length > 0) {
        /* console.log("found '"+achar+"("+xchar(achar)+"/"+ $('#rules').find((":contains(" + achar + ")")).text()+")"+"' in tabelle as'"+entityForSymbolInContainer(found)+"'"); */
        return found.text()
    } else {
        return achar
    }

}


$('#inp_txt').keyup(function (event) {

    var inhalt = $('#inp_txt').val();
    var output = '';

    for (var i = 0; i < inhalt.length; i++) {
        var s_char = inhalt.charAt(i);
        output += new_char(s_char);

    }
    $('#out').val(output);

}).keydown(function (event) {
    if (event.which == 13) {
        event.preventDefault();
    }
});


       

/*
function JSfunc() {
   
    this.strTranslit = function (el) {
        new_el = document.getElementById('out');
        A = new Array();
        A["Ё"] = "YO";
        A["Й"] = "I";
        A["Ц"] = "TS";
        A["У"] = "U";
        A["К"] = "K";
        A["Е"] = "E";
        A["Н"] = "N";
        A["Г"] = "G";
        A["Ш"] = "SH";
        A["Щ"] = "SCH";
        A["З"] = "Z";
        A["Х"] = "H";
        A["Ъ"] = "'";
        A["ё"] = "yo";
        A["й"] = "i";
        A["ц"] = "ts";
       ...