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/源代码 ：&nbsp; var dictionnary = {&nbsp; &nbsp; "u":"う",&nbsp; &nbsp; "ku":"く",&nbsp; &nbsp; "tsu":"つ",&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; "test for spaces": "😍"&nbsp; };&nbsp;&nbsp;&nbsp; var maxLength = Object.keys(dictionnary)&nbsp; &nbsp; .reduce((a, b) => a.length > b.length ? a : b) // get the longest word&nbsp; &nbsp; .length; // and it's length&nbsp;&nbsp;&nbsp; function translate (text) {&nbsp; &nbsp; var translated = "";&nbsp; &nbsp; var cur = 0;&nbsp; &nbsp; while (cur < text.length) {&nbsp; &nbsp; &nbsp; var testedPhoneme;&nbsp; &nbsp; &nbsp; var symbol = undefined;&nbsp; &nbsp; &nbsp; for (var length = maxLength; length > 0; length --) {&nbsp; &nbsp; &nbsp; &nbsp; testedPhoneme = text.substr(cur, length);&nbsp; &nbsp; &nbsp; &nbsp; if (dictionnary[testedPhoneme]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; symbol = dictionnary[testedPhoneme];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break; // stop the loop&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (symbol) {&nbsp; &nbsp; &nbsp; &nbsp; translated += symbol;&nbsp; &nbsp; &nbsp; &nbsp; cur += testedPhoneme.length;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; translated += text[cur]&nbsp; &nbsp; &nbsp; &nbsp; cur++;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return translated&nbsp; }&nbsp; function onLatinTextChange(txt) {&nbsp; &nbsp; var replacedTextareaElem = document.getElementById("replaced_textarea");&nbsp; &nbsp; var div = document.createElement("div");&nbsp; &nbsp; var replacedHtmlEntities = translate(txt);&nbsp; &nbsp; div.innerHTML = replacedHtmlEntities;&nbsp; &nbsp; replacedTextareaElem.value = div.innerText;&nbsp; }[上一篇] 一个简单的解决方案：我建议您使用空格拆分文本如果我理解得很好，你想输入u ku tsuget うくつ，而不是get ukutsu，如果这是正确的，那么类似的东西就可以工作：const dictionnary = {&nbsp; "u": "う",&nbsp; "ku": "く",&nbsp; "tsu": "つ"var phonemes = text.split(' ') // split text by spacesvar translatedArray = phonemes.map(function (phoneme) {&nbsp; return dictionnary[phoneme] || phoneme&nbsp;&nbsp; // will return the latin phoneme if it is not in the dictionnary})translatedString = translatedArray.join('')