JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="source" rows="20" cols="120">
    Звътик зхчврлчавияукжмь в цхтъвлмь цча ъ цчддяжитхвбдв, цчичхмь уясцч в зхвбижч зчааяхевлтик.
    Йдяжвя хтровхтикъб л гйечд цчая в ъуяачлтик ъитжатхитд цчавхчлтжвб.
    Тцивлжмь вжияхяъ ц ъчлхядяжжмд ляо-ияшжчучсвбд в вш тцивлжчя възчукрчлтжвя.
    Ълчочажчя гияжвя ияшжвгяъцвш ачцйдяжичл жт тжсувьъцчд брмця.
</textarea>
<p>
<input type="button" value="From PB" onclick="translateFromPB();">
<input type="button" value="To PB" onclick="translateToPB();">
</p>
<div id="res"></div>

CSS

ch {
            color: #449d44;
        }

JavaScript

String.prototype.replaceAt = function(index, character) {
        return this.substr(0, index) + character + this.substr(index+1);
    }



    var res = document.getElementById("res");

    function translatePB (txt, direction){

        var symbs = {'з':'п',
            'х':'р',
            'в':'и',
            'л':'в',
            'т':'а',
            'к':'ь',
            'у':'л',
            'я':'е',
            'ч':'о',
            'ъ':'с',
            'р':'з',
            'о':'б',
            'ц':'к',
            'ж':'н',
            'а':'д',
            'с':'г',
            'б':'я',
            'е':'ж',
            'д':'м',
            'н':'ф',
            'ь':'й',
            'ш':'х',
            'й':'у',
            'ё':'ц',
            'м':'ы',
            'г':'ч',
            'ю':'ш',
            'п':'ю',
            'и':'т'
        };

        var end = txt.length - 1;
        for(var i=0; i<=end; i++ )
        {
            for(var key in symbs)
            {
                var a, b;
                if(direction == 'toPB'){
                    b = key;
                    a = symbs[key];
                }else if(direction == 'fromPB'){
                    a = key;
                    b = symbs[key];
                }

                if(txt.charAt(i) == a || txt.charAt(i) == a.toUpperCase() ){

                    var repStr = '<ch>' + (txt.charAt(i) == a.toUpperCase() ? b.toUpperCase() : b) + '</ch>';
                    txt = txt.replaceAt(i, repStr);
                    i+= repStr.length - 1;
                    end = txt.length - 1;
                }
            }
        }

        return txt;
    }

    function translateFromPB(){
        var txt = document.getElementById("source").value;
        res.innerHTML = '<pre>'+translatePB(txt, 'fromPB')+'</pre>';
    }

    function translateToPB(){
        var txt = document.getElementById("source").value;
        res.innerHTML = '<pre>'+translatePB(txt, 'toPB')+'</pre>';
    }