How to change characters from inserted in a textarea with those from a dictionary?

Question

I've been trying to change some letters of the text captured in the html textarea but no success, I tried to do it with conditionals but found it very messy and repetitive, now I'm trying to use a directory from where I pull the letters I want to change . For this I used as an example what I found in this question: How to change certain characters to other characters in a textarea in html using javascript using

I changed the object to a dictionary, but I probably have no idea how to accommodate the change to the other parts of the code.

I have this in js and html file

function removeDiacritics(str) {
  return str.replace(/[^\u0000-\u007E]/g, function(a) {
    return diacriticsMap[a] || a;
  });
}

function replaceText() {
  var str = document.getElementById('my-area').value;

  document.getElementById('my-area').value = removeDiacritics(str);
}

var defaultDiacriticsRemovalMap = {
  "e": "enter",
  "a": "ai",
  "i": "imes",
  "o": "ober",
  "u": "ufat"
};

var diacriticsMap = {};
for (var i = 0; i < defaultDiacriticsRemovalMap.length; i++) {
  var letters = defaultDiacriticsRemovalMap[i].letters;
}

<textarea id="my-area">čćđšž, Čhuck</textarea>

<button onclick="replaceText();">Replace text</button>

As a side note, have almost zero experience in web developmet, I am doing the thing by my self. Thanks!

EDIT 1. As @Mohammed Swillam sugested I changed my code, so I ended up with the next:

/* REMOVE */

var defaultDiacriticsRemovalMap  = {
    "a": "ai",
    "e": "enter",
    "i": "imes",
    "o": "ober",
    "u": "ufat"
};

  

function removeDiacritics(str) {
    for (let char in defaultDiacriticsRemovalMap ) {
        str = str.replace(new RegExp(char, 'g'), defaultDiacriticsRemovalMap [char]);
    }
    return str;
}

function replaceText() {
    var str = document.getElementById('original-text').value;
    document.getElementById('result-text').value = removeDiacritics(str);
}

/* RETURN */
function returnDiacritics(str) {
    for (let char in defaultDiacriticsReturnMap) {
        str = str.replace(new RegExp(char, 'g'), defaultDiacriticsReturnMap[char]);
    }
    return str;
}

var defaultDiacriticsReturnMap = {
    "ai": "a",
    "enter": "e",
    "imes": "i",
    "ober": "o",
    "ober": "o"
};

function returnText() {
    var str = document.getElementById('original-text').value;
    document.getElementById('result-text').value = returnDiacritics(str);
}

/* COPY TEXT */
function copyText() {
    var copyText = document.getElementById("result-text");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
    alert("Copied the text: " + copyText.value);
}

<textarea id="original-text"></textarea>
<button onclick="replaceText()">Encrypt text</button>
<button onclick="returnText()">Decrypt text</button>
<textarea id="result-text"></textarea>
<button onclick="copyText()">Copy text</button>

So now I can return the text to its original state. But now I have a new problem. I put "aeiou" as input to test it, but when the text is replaced, the result text, changes the "i" in the "ai" value for "imes", so the result comes as "aimesenterimesoberufat", as you can see in the next image...

Buuuut... when I reverse the changes now does something similar to the above.

I really don't get what is happening here. Thanks for all your help!

Answer 1

I think you can loop through the properties of the defaultDiacriticsRemovalMap object and use the String.prototype.replace() method to replace each character with its corresponding replacement.

You can use a regular expression to match each character, and use the String.prototype.replace() try this example

function removeDiacritics(str) {
  for (let char in defaultDiacriticsRemovalMap) {
    str = str.replace(new RegExp(char, 'g'), defaultDiacriticsRemovalMap[char]);
  }
  return str;
}

function replaceText() {
  var str = document.getElementById('my-area').value;
  document.getElementById('my-area').value = removeDiacritics(str);
}

var defaultDiacriticsRemovalMap = {
    "e" : "enter",
    "a": "ai",
    "i": "imes",
    "o": "ober",
    "u": "ufat"
    };

 <textarea id="my-area">čćđšž, Čhuck</textarea>      
<button onclick="replaceText();">Replace text</button>