CODEWITHSUNDEEP
javascripthtml
jack
jack

Reputation: 315

Javascript - how to render an output by typing three (or more) alphabets into the input?

I am making an html page which is a typer of a foreign script.

my progress: HERE

Here's the entire 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;
        }

The purpose of this project is to create a virtual phonetic keyboard to type certain forign scripts by only using Latin alphabets, without its keyboard setting installed.

Basically, if you enter an alphabet into the input <textarea>, it renders its corresponding foreign alphabet. (For instance, input 'u' > output 'う', input 'ku' > output 'く')

Here is my problem: So far I have enabled rendering an output when one or two alphabet is typed into the input box. But I cannot figure out how to enable the same by entering three alphabets. (For instance, input 'tsu' > output 'つ')

"u":"う", // <- can convert
"ku":"く", // <- can convert
"tsu":"つ", // <- cannot convert!

In the javascript code, there is a var called dualLetter, which goes by the following script:

var dualLetter = latreplaced[curLetter + pos1Txt];

How can I edit this part of code (or the entire javascript) to be able to convert 3 or more input alphabets? Do I need to make var tripleLetter, or create a whole new system? Any alternative ways would also be helpful.

Upvotes: 0

Views: 112

Answers (1)

gui3
gui3

Reputation: 1867

[edit] a solution inspired by your code :

I changed the main function but this definitively works

live demo : https://jsfiddle.net/alias_gui3/wds426mq/12/

source code :


  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;
  }

[previous post] a simple solution :

I suggest you split your text using spaces

If i understand well, you want to type u ku tsu to get うくつ, not ukutsu, if this is right then something like that could work :

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('')

Upvotes: 1

Related Questions