使用Google翻譯翻譯另一個文本字段的語言內容

Question

因此，我有一個手動創建的基本字母翻譯器。 它將一個字母轉換為西里爾字母，您手動按一下，然后將其吐出到文本字段中（我將其標識為“ alphabet_output”）。 我已經按照我的意願進行了工作。

我想把西里爾字母變成英語的拉丁字母。 我希望在第二個文本字段（我將其標識為“ english_output”）中發生這種情況，最好在第一個文本字段（alphabet_output）中檢測到某些東西時自動發生。

但是，我對API一無所知，我看到的與此問題相關的大多數問題似乎都是基於Google不再支持的API。

這是codepen： https ://codepen.io/erik-b/pen/bqbjVV

HTML：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="button" value="Ⰰ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰱ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰲ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰳ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰴ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰵ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰶ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰷ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰸ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰺ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰻ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰼ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰽ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰾ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⰿ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱀ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱁ" name="no" onclick="moveCharacters(this.value)">
<br><br>
<input type="button" value="Ⱂ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱃ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱄ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱅ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱆ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱇ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱈ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱉ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱋ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱌ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱍ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱏ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱐ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱑ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱖ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱓ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱔ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱗ" name="no" onclick="moveCharacters(this.value)">
<br><br>
<input type="button" value="Ⱘ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱙ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱚ" name="no" onclick="moveCharacters(this.value)">
<input type="button" value="Ⱛ" name="no" onclick="moveCharacters(this.value)"> <br>

<h3>Glagolitic</h3>
<form>
  <input id='alphabet' type='text' value=''>
</form>
<br>
<input onclick='glagolitic()' type='button' value='Translate'><br>
<br><br>

<h3>Cyrillic</h3>
<textarea id='alphabet_output' rows='15' cols='100'>
</textarea>
<br><br>

<h3>English</h3>
<div id="google_translate_element">
  <textarea id='english_output' rows='15' cols='100'></textarea>

</div>

使用Javascript：

function moveCharacters(num) { 
    var txt=document.getElementById("alphabet").value; 
    txt=txt + num; 
    document.getElementById("alphabet").value=txt; 
    } 
var mapObj = {
  Ⰰ: "А",
  ⰰ: "а",
  Ⰱ: "Б",
  ⰱ: "б",
  Ⰲ: "В",
  ⰲ: "в",
  Ⰳ: "Г",
  ⰳ: "г",
  Ⰴ: "Д",
  ⰴ: "д",
  Ⰵ: "Є",
  ⰵ: "є",
  Ⰶ: "Ж",
  ⰶ: "ж",
  Ⰷ: "Ѕ",
  ⰷ: "ѕ",
  Ⰸ: "З",
  ⰸ: "з",
  Ⰹ: "И",
  ⰹ: "и",
  Ⰺ: "Й",
  ⰺ: "й",
  Ⰻ: "І",
  ⰻ: "i",
  Ⰼ: "Ћ",
  ⱞ: "ћ",
  Ⰽ: "К",
  ⰽ: "k",
  Ⰾ: "Л",
  ⰾ: "Л",
  Ⰿ: "М",
  ⰿ: "m",
  Ⱀ: "Н",
  ⱀ: "h",
  Ⱁ: "О",
  ⱁ: "o",
  Ⱂ: "П",
  ⱂ: "п",
  Ⱃ: "Р",
  ⱃ: "p",
  Ⱄ: "С", 
  ⱄ: "c",
  Ⱅ: "Т",
  ⱅ: "t",
  Ⱆ: "У",
  ⱆ: "у",
  Ⱇ: "Ф",
  ⱇ: "ф",
  Ⱈ: "Х",
  ⱈ: "x",
  Ⱉ: "Ѡ",
  ⱉ: "ѡ",
  Ⱋ: "Щ",
  ⱋ: "щ",
  Ⱌ: "Ц",
  ⱌ: "ц",
  Ⱍ: "Ч",
  ⱍ: "ч",
  Ⱎ: "Ш",
  ⱎ: "ш",
  Ⱏ: "Ъ",
  ⱏ: "ъ",
  Ⱐ: "Ь",
  ⱐ: "ь",
  Ⱑ: "Ѣ",
  ⱑ: "ѣ",
  Ⱖ: "Ё",
  ⱖ: "Ё",
  Ⱓ: "Ю", 
  ⱓ: "Ю",
  Ⱔ: "Ѧ",
  ⱔ: "ѧ",
  Ⱗ: "Ѩ",
  ⱗ: "ѩ",
  Ⱘ: "Ѫ",
  ⱘ: "ѫ",
  Ⱙ: "Ѭ",
  ⱙ: "ѭ",
  Ⱚ: "Ѳ",
  ⱚ: "ѳ",
  Ⱛ: "Ѵ",
  ⱛ: "v",
};

function glagolitic() {
  var str = document.getElementById('alphabet').value;
  var re = new RegExp(Object.keys(mapObj).join("|"), "g");
  str = str.replace(re, function(matched) {
    return mapObj[matched.valueOf()];
  });
  document.getElementById('alphabet_output').innerHTML = str;
}

Answer 1

您可以按此處編寫的方式使用Google Translation API，但必須在Google Cloud Platform項目上啟用計費功能

您可以使用音譯API，但此處已棄用該API

在最后一種情況下，您可以使用Google翻譯工具。 您可以在此處找到代碼段。

  <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Translate Test</title>
</head>
<body>
    <div class="destination">
        <p>This is some text already on the page that could be translated by the Google Translate Web Element. <a href="#" class="loadMore">Load More</a></p>
    </div>
    <div id="google_translate_element"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: "en" }, "google_translate_element");
        };

        $(function () {
            $(".loadMore").click(function () {
                $("<p/>", {
                    text: "This is some injected text that will not be translated."
                }).appendTo($(".destination"));
            });
            $.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
        });
    </script>
</body>
</html>