2017-02-23 35 views
0

私は手動で作成した基本的なアルファベットの翻訳者があります。これは、あるアルファベットをキリル文字に変換して、手動で入力してテキストフィールドに吐き出します(私はそれを 'alphabet_output'とIDを付けています)。私はそれがほとんど私がそれをしたい方法を働かせている。Google翻訳を使用して別のテキストフィールドの言語コンテンツを翻訳する

キリル文字を英語でラテンアルファベットに変えたいと思っています。私はこれが2番目のテキストフィールド(私はそれが 'english_output'とIDENされている)で、好ましくは何かが最初のテキストフィールド(alphabet_output)で検出されたときに自動的に発生させたい。

しかし、私はAPIについて考えていないし、この質問に関連するほとんどの質問は、API googleがサポートしていないことに基づいているようだ。ここで

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

答えて

0

あなたが書かれたHereとしてGoogle翻訳のAPIを使用することができますが、Googleで課金を有効にする必要がありCloud Platformプロジェクト

[翻訳された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> 
関連する問題