javascript - 如何将插入文本区域的字符更改为字典中的字符？

Question

我一直在尝试更改在 html textarea 中捕获的文本的一些字母但没有成功，我尝试使用条件来完成它但发现它非常困惑和重复，现在我正在尝试使用来自哪里的目录我拉我要换的字母。为此，我以在这个问题中找到的内容为例:How to change certain characters to other characters in a textarea in html using javascript使用

我将对象更改为字典，但我可能不知道如何将更改适应代码的其他部分。

我在 js 和 html 文件中有这个

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>

顺便说一句，我在网络开发方面的经验几乎为零，我自己做这件事。谢谢!

编辑 1。正如@Mohammed Swillam 所说，我更改了我的代码，所以我得到了下一个:

/* 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>

所以现在我可以将文本恢复到其原始状态。但是现在我有一个新问题。我把“aeiou”作为输入来测试它，但是当文本被替换时，结果文本改变了“imes”的“ai”值中的“i”，所以结果是“aimesenterimesoberufat"，如下图所示...

Buuuut...当我撤销更改时，现在会执行与上述类似的操作。

我真的不明白这里发生了什么。感谢您的帮助!

Answer 1

我认为您可以遍历 defaultDiacriticsRemovalMap 对象的属性，并使用 String.prototype.replace() 方法将每个字符替换为其相应的替换项。

您可以使用正则表达式来匹配每个字符，并使用 String.prototype.replace()试试这个例子

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>