Javascript - 如何通过在输入中键入三个（或更多）字母来呈现输出？

Question

我正在制作一个 html 页面，它是一个外国脚本的类型。我的进步：这里这是整个 javascript：function getReplacedText(latinText) {            if (!latinText) {                return "";        }            var replacedText = "";            for (var i = 0, len = latinText.length; i < len; i++) {                var curLetter = latinText[i];                var pos1Txt = latinText[i + 1];                var pos2Txt = latinText[i + 2];                if (!(curLetter == "")) {                    var dualLetter = latreplaced[curLetter + pos1Txt];                    if (dualLetter) {                        replacedText += dualLetter;                        i++;                        continue;                    }                }                replacedText += latreplaced[curLetter] || curLetter;            }            return replacedText;        }                     var latreplaced = {"u":"う","ku":"く","tsu":"つ",        };        function onLatinTextChange(txt) {            var replacedTextareaElem = document.getElementById("replaced_textarea");            var div = document.createElement("div");            var replacedHtmlEntities = getReplacedText(txt);            div.innerHTML = replacedHtmlEntities;            replacedTextareaElem.value = div.innerText;        }该项目的目的是创建一个虚拟注音键盘，仅使用拉丁字母来键入某些外国脚本，而无需安装其键盘设置。基本上，如果您在 input 中输入一个字母表<textarea>，它会呈现相应的外国字母表。（例如，输入'u' > 输出'う'，输入'ku' > 输出'く'）这是我的问题：到目前为止，当在输入框中输入一个或两个字母表时，我已经启用了渲染输出。但是我不知道如何通过输入三个字母来启用它。（例如，输入'tsu' > 输出'つ'）"u":"う", // <- can convert"ku":"く", // <- can convert"tsu":"つ", // <- cannot convert!在 javascript 代码中，有一个var名为dualLetter，由以下脚本执行：var dualLetter = latreplaced[curLetter + pos1Txt];如何编辑这部分代码（或整个 javascript）以转换3 个或更多输入字母？我需要制作var tripleLetter或创建一个全新的系统吗？任何替代方法也会有所帮助。

Answer 1

受您的代码启发的解决方案：

我更改了主要功能，但这绝对有效

现场演示：https ://jsfiddle.net/alias_gui3/wds426mq/12/

源代码 ：

  var dictionnary = {

    "u":"う",

    "ku":"く",

    "tsu":"つ",

    

    "test for spaces": "😍"

  };

  

  var maxLength = Object.keys(dictionnary)

    .reduce((a, b) => a.length > b.length ? a : b) // get the longest word

    .length; // and it's length

  

  function translate (text) {

    var translated = "";

    var cur = 0;

    while (cur < text.length) {

      var testedPhoneme;

      var symbol = undefined;

      for (var length = maxLength; length > 0; length --) {

        testedPhoneme = text.substr(cur, length);

        if (dictionnary[testedPhoneme]) {

          symbol = dictionnary[testedPhoneme];

          break; // stop the loop

        }

      }

      if (symbol) {

        translated += symbol;

        cur += testedPhoneme.length;

      }

      else {

        translated += text[cur]

        cur++;

      }

    }

    return translated

  }

  function onLatinTextChange(txt) {

    var replacedTextareaElem = document.getElementById("replaced_textarea");

    var div = document.createElement("div");

    var replacedHtmlEntities = translate(txt);

    div.innerHTML = replacedHtmlEntities;

    replacedTextareaElem.value = div.innerText;

  }

[上一篇] 一个简单的解决方案：

我建议您使用空格拆分文本

如果我理解得很好，你想输入u ku tsuget うくつ，而不是get ukutsu，如果这是正确的，那么类似的东西就可以工作：

const dictionnary = {

  "u": "う",

  "ku": "く",

  "tsu": "つ"

var phonemes = text.split(' ') // split text by spaces

var translatedArray = phonemes.map(function (phoneme) {

  return dictionnary[phoneme] || phoneme 

  // will return the latin phoneme if it is not in the dictionnary

})

translatedString = translatedArray.join('')