使用Google Translate翻译其他文本字段的语言内容

时间:2017-02-23 21:03:12

标签: javascript html google-translate

所以我手动创建了一个基本的字母翻译器。它将一个字母表翻译成西里尔语,您手动按下并将其吐出到文本字段中(我将其标记为' alphabet_output')。我的工作主要是我想要的。

我希望西里尔语能用英语变成拉丁字母。我希望在第二个文本字段中发生这种情况(我将其标记为' english_output'),最好在第一个文本字段(alphabet_output)中检测到某些内容时自动进行。

但是我不知道API和我看到的与此问题相关的大多数问题似乎都是基于谷歌不再支持的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;
}

1 个答案:

答案 0 :(得分:0)

您可以按照Here编写的方式使用Google翻译API,但必须在Google云端平台项目上启用结算

您可以使用Translitered API,但已弃用here

在最后一种情况下,您可以使用Google翻译工具。 Here您能找到代码段吗?

  <!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>