大量のJavaScript String replace（）を使用してページを翻訳する方法は？

Question

私はJavascriptで新しいです。

私は別のHTMLページなしで私のページを翻訳したいと思います。これを行うには

は、私はこのコードを試しています：

<a href="javascript:myFunction()"><img src="img/Fr-Flag.png"></a> 
<a href="javascript:myFunction2()"><img src="img/UK-Flag.png"></a> 
<h2 id="translate">Title</h2> 

とJavaScript：

<script> 
      function myFunction() { 
      var str = document.getElementById("translate").innerHTML; 
      var res = str.replace("Title", "Titre"); 
      document.getElementById("translate").innerHTML = res; 
     } 
      function myFunction2() { 
      var str = document.getElementById("translate").innerHTML; 
      var res = str.replace("Titre", "Title"); 
      document.getElementById("translate").innerHTML = res; 
     } 
</script> 

このメソッドは動作しますが、私は、この方法は非常に重い見つける、私はテキストを記述する必要があります3回... 翻訳を別のファイル（jsファイル？）に入れることはできますか？これを行う方法 ？

Answer 1

まあ、特別なフレームワーク、ライブラリ、あるいは外部ファイルを使用せずに、私は、Javascriptのオブジェクト内の翻訳を保存し、パラメータなどの言語でそれをリフレッシュするために単一の関数を呼び出します。

<a href="javascript:doTranslate('fr')"><img src="img/Fr-Flag.png"></a> 
<a href="javascript:doTranslate('en')"><img src="img/UK-Flag.png"></a> 
<h2 id="title">Title</h2> 
<p id="content">Content</p> 

とJavaScriptは

<script> 
     var translations= { 'en' : 
           {'title' : 'Title', 'content' : 'Content of the document...'}, 
          'fr' : 
           {'title' : 'Titre', 'content' : 'Contenu du document'} 
          }; 
     function doTranslate(language) { 
      for(id in translations[language]) { 
       document.getElementById(id).innerHTML = translations[language][id]; 
      } 
     } 
</script> 

となり、この方法は、可能な限りあなたの例に近いことを意図しています。私はそれがシンプルで柔軟性があると思います：翻訳する新しい要素を追加するときにはtranslationsを更新するだけです（この例のように）。あなたは確かに言語と翻訳が存在すること、禁止されているすべての文字が正しくエンコードされていることを保証する必要があります。

クライアント上で管理するのに役立つフレームワークとライブラリがたくさんあることに注意してください）側またはサーバー側にあります。

Answer 2

より良いアプローチは定数を使用することです。

var languages = { 
    EN: {title: 'Title'}, 
    FR: {title: 'Titre'}, 
}; 
var currentLanguage = 'EN'; 
var html = ` 
    <a href="javascript:myFunction()"><img src="img/Fr-Flag.png"></a> 
    <a href="javascript:myFunction2()"><img src="img/UK-Flag.png"></a> 
    <h2 id="translate">${languages[currentLanguage].title}</h2> 
`;