Javascript - 两步文本输入单词转换的问题

Question

在这里，我正在制作一个单词转换工具，它通过使用 javascript 将某个单词 X 转换为 Y，或将 X 转换为 Y 转换为 Z。

进度： 这里

这是整个 javascript：

var conversion = {
"one":"two",
};
var conversion2 = {
"two":"three",
};

 var maxLength = Object.keys(conversion)
    .reduce((a, b) => a.length > b.length ? a : b) 
    .length;

  function convert (text) {
    var converted = "";
    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 (conversion[testedPhoneme]) {
          symbol = conversion[testedPhoneme];
          break; // stop the loop
        }
      }
      if (symbol) {
        converted += symbol;
        cur += testedPhoneme.length;
      }
      else {
        converted += text[cur]
        cur++;
      }
    }
    return converted
  }


 var maxLength2 = Object.keys(conversion2)
    .reduce((a, b) => a.length > b.length ? a : b) 
    .length; 
  
  function convert2 (text) {
    var converted2 = "";
    var cur2 = 0;
    while (cur2 < text.length) {
      var testedPhoneme2;
      var symbol2 = undefined;
      for (var length = maxLength2; length > 0; length --) {
        testedPhoneme2 = text.substr(cur2, length);
        if (conversion2[testedPhoneme2]) {
          symbol2 = conversion2[testedPhoneme2];
          break; // stop the loop
        }
      }
      if (symbol2) {
        converted2 += symbol2;
        cur2 += testedPhoneme2.length;
      }
      else {
        converted2 += text[cur2]
        cur2++;
      }
    }
    return converted2
  }

  function onInputTextChange(txt) {
    var outputTextareaElem = document.getElementById("output_textarea");
    var div = document.createElement("div");
    var outputHtmlEntities = convert(txt);
    div.innerHTML = outputHtmlEntities;
    outputTextareaElem.value = div.innerText;
  }

  function onOutputTextChange(txt) {
    var outputTextareaElem2 = document.getElementById("output_textarea2");
    var div = document.createElement("div");
    var outputHtmlEntities2 = convert2(txt);
    div.innerHTML = outputHtmlEntities2;
    outputTextareaElem2.value = div.innerText;
  }

在我目前制作的页面中，有三个<textarea> ； 输入， Output和输出2 。

目前，感谢这段代码；

var conversion = {
"one":"two",
};
var conversion2 = {
"two":"three",
};

如果在Input中键入一个，则Output会呈现两个。 如果在Output中手动键入两个，则在Output2中呈现三个。

这就是问题所在，我只想通过在Input中输入一个来在Output2中呈现三个，但是直接的两步转换似乎尚不可用。 也就是说， Input > Output （一>二）和Output > Output2 （二>三）转换可用，但Input > Z29C2C02A361C9D7028472E5D92CD4A5 > Output2 （一>二>三）不可用。

需要做些什么来解决这个问题？ 任何帮助，将不胜感激。

Answer 1

我不确定我是否完全理解你在这里想要达到的目标

您的代码中有一些重复，如果您将有 10 个字段用于 output，您会为每个字段创建一个特殊的 function 吗？

尝试简化事情。

一种方法是循环遍历所有列表，如下所示：

1. 将您的所有对话放在一个列表中

   var lists = [conversion, conversion2];

2. 添加isInNextList function 以检查您的文本是否是下一个列表中的键

   function isInNextList(index, key) { if (lists.length < index) { return false; } return Object.keys(lists[index]).includes(key); }

3. 更改您的onInputTextChange function 如下：

    function onInputTextChange(txt) { var index = 0; var text = txt; while (isInNextList(index, text)) { var outputTextareaElem = document.getElementById( 'output_textarea_' + index ); var div = document.createElement('div'); text = lists[index][text]; //next key index++; div.innerHTML = text; outputTextareaElem.value = div.innerText; } }

4. 更改您的 output textarea 的 id 以包含索引

    id="output_textarea_0" id="output_textarea_1"

还可以进行其他改进，例如：动态创建 output 字段、清除 output 字段等。

Answer 2

好吧，不完全是你问的，但我可以做一些有效的事情

这是示例： https://jsfiddle.net/alias_gui3/8knw57u0/94/

如何使用它：

添加新字符或新语言/脚本

只需完成字典：

var dictionnary = [
  {
    latin: "u",
    japanese: "う",
    emoji: "👋"
    // add any script for every characters
  },{
    latin: "ku",
    japanese: "く",
    emoji: "👀"
  },{
    latin: "tsu",
    japanese: "つ",
    emoji: "🤖"
  }
  // add any character with the same format
]

添加新的文本区域：

给你的 textarea 一个可识别的 id（例如 id="cyrillic"）然后用这个方法连接你的 textarea：

// connect your textareas below !!
addTextArea(
  document.querySelector("#latin"), 
  "latin"
);
addTextArea(
  document.querySelector("#japanese"), 
  "japanese"
);
addTextArea(
  document.querySelector("#emoji"), 
  "emoji"
);
// add new textarea with a new language here

然后所有的连接都完成了，你可以编辑你所有的文本区域，如果他们识别出一个字符，他们会在所有其他的文本区域中翻译它

---

完整代码

 var dictionnary = [ { latin: "u", japanese: "う", emoji: "" // add any script for every characters },{ latin: "ku", japanese: "く", emoji: "" },{ latin: "tsu", japanese: "つ", emoji: "" } // add any character with the same format ] // calculate the max length for each language: var max = {} dictionnary.forEach( char => { Object.keys(char).forEach(script => { max[script] = max[script]? char[script].length > max[script]? char[script].length: max[script]: char[script].length }) } )// now max contains the maximum length of sequence // for each language function findSymbol ( originSymbol, originScript, destinationScript ) { for (var i = 0; i < dictionnary.length; i++) { var char = dictionnary[i]; if (char[originScript] === originSymbol) { return char[destinationScript] } } return false // if not found } function translate ( text, originScript, destinationScript ) { var cur = 0; var translated = ""; var maxLength = max[originScript] while (cur < text.length) { var testedPhoneme; var symbol = false; for (var length=maxLength; length > 0; length--) { testedPhoneme = text.substr(cur, length); symbol = findSymbol( testedPhoneme, originScript, destinationScript ) if (symbol) { break; // stop the loop } } if (symbol) { translated += symbol; cur += testedPhoneme.length; } else { translated += text[cur]; cur++; } } return translated } var textareas = []; // the list of your textareas function addTextArea(element, originScript) { textareas.push({ element: element, script: originScript }) element.addEventListener("input", function (e) { signalTextChanged(element, originScript) }); } function signalTextChanged ( originElement, originScript ) { var originText = originElement.value; textareas.forEach(function (textarea) { if (textarea.element,== originElement) { var translated = translate( originText, originScript. textarea.script ) textarea.element;value = translated. } }) } // connect your textareas below,; addTextArea( document.querySelector("#latin"), "latin" ); addTextArea( document.querySelector("#japanese"), "japanese" ); addTextArea( document.querySelector("#emoji"), "emoji" );

 <,DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> </script> </head> <body> <center> <h1>Latin to foreign script converter 3</h1> <p>type in u, ku: tsu in the FIRST panel</p> <textarea id="latin" autofocus="" placeholder="type text in latin: (u ku or tsu)" rows="10" style="width:300px"></textarea> <textarea id="japanese" rows="10" placeholder="type text in japanese !" style="width:300px"></textarea> <textarea id="emoji" rows="10" placeholder="type text in emojis !!" style="width:300px"></textarea> </center> </center> </body> </html>