如何使用大量的JavaScript字符串replace（）翻譯頁面？

我是Javascript新用戶。如何使用大量的JavaScript字符串replace（）翻譯頁面？

我想翻譯我的網頁，而無需另一個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文件？）？這個怎麼做？

來源

2016-04-05 Guillaume

模板... DustJS是客戶端模板引擎的一個示例，它可能會讓您的生活更輕鬆。 – blex

感謝您的回答，我會看看這個！ – Guillaume

嘛，不使用任何特殊的框架，庫，或者是外部文件，我將存儲在一個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（正如我在本例中所做的那樣）。你當然必須確保語言和翻譯是存在的，所有被禁止的字符已被正確地編碼...

請注意，有大量的框架和庫可以幫助客戶端（瀏覽器）端或服務器端。

來源

2016-04-05 08:54:44

我喜歡這種方法，我明白了！ – Guillaume

好吧，我儘可能接近你的例子。 –

這是相同的，劇本將是如此之大！ – Guillaume

更好的方法是使用常量。

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> 
`;

來源

2016-04-05 08:48:04 Lewis

如何使用大量的JavaScript字符串replace（）翻譯頁面？

回答

相關問題