HTML文件的国际化

Question

我正在开发一个项目并使用HTML文件（不是JSP或客户端的任何其他技术）。 我使用JQuery编写脚本。 我有表，列和许多字段，上面有“文本”。 如何使用JQuery将我的网页国际化？ 我的意思是我将加载文件_tr.extension，我的网页将是土耳其语，_swe.extension将是瑞典语等。

有任何想法吗？

EDIT1：例如我会写一个这样的代码：

<div>${name}</div>
<div>${surname}</div>

并且会有一个像这样的_tr.properties文件：

name = isim
surname = soyisim

并且会有一个像这样的_swe.properties文件：

name = namn
surname = efternamn

如果我更改导入的文件，div内的文本将每页使用不同的语言。

EDIT2：这个功能对我来说足够了我不想要更多我需要一个快速而轻巧的插件（也许从JSON喂养可能是另一个特色）。

Answer 1

我强烈建议将Globalize作为翻译和格式化解决方案。

要翻译你将使用类似的代码：

<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>
<script type="text/javascript">
  Globalize.addCultureInfo( "tr", {
    messages: {
      "name" : "isim",
      "surname" : "soyisim"
    }
  });
  // Swedish language code is actually sv
  Globalize.addCultureInfo( "sv", {
    messages: {
      "name" : "namn",
      "surname" : "efternamn"
    }
  });

  $(document).ready(function() {
    // you need somehow know what language to use
    // but it is out of scope of this answer
    $( "name" ).val( Globalize.localize( "name", "tr" ) );
    $( "surname" ).val( Globalize.localize( "surname", "tr" ) );
  });
</script>

要使用此脚本，您需要修改html，如下所示：

<!-- DIV is just a container, P (paragraph) or SPAN 
     are more suitable for the job. Also this shows
     neutral language texts.
     Be sure to use unique IDs -->
<div><p id="name">name</p></div>
<div><p id="surname">surname</p></div>

Answer 2

以下是一些建议。 （i18n ==国际化）

http://plugins.jquery.com/i18n/
http://code.google.com/p/jquery-utils/wiki/I18N
http://code.google.com/p/jquery-i18n-properties/

编辑：为了您的需要，我建议https://github.com/jquery-i18n-properties/jquery-i18n-properties

Answer 3

我是第二个Pawel Dyda使用Jquery Globalize插件的答案。 我们在项目中使用类似的解决方案。

以下步骤。

1. 下载Jquery Globalize插件

   https://github.com/jquery/globalize

2. 在HTML文件中包含globalize.js和所需文化的JS文件

   例如， globalize.culture.tr.js

3. 添加带ID的HTML代码

    <div id="name"></div> <div id="surname></div> 

4. 将名称和姓氏添加到相应语言JS文件的messages部分

   土耳其JS文件

     messages : { "name": "isim", "surname": "soyisim" } 

   瑞典JS文件

     messages : { "name": "namn" "surname": "efternamn" } 

5. 根据选择设置文化

     Globalize.Culture("tr"); 

6. 使用.text函数或.html函数更新文化的字符串

     $("#name").text(Globalize.localize("name",globalize.culture())); $("#surname").text(Globalize.localize("surame",globalize.culture())); 

在我们的项目中，我们还使用JSON字符串来填充基于文化的下拉列表

1. 将下拉列表名称和值对保存为消息部分中的JSON字符串
2. 将JSON字符串转换为JSON对象
3. 循环JSON对象并为下拉列表设置选项名称和值

Answer 4

的index.html

 <!DOCTYPE html>
  <html>
  <head>
  <title>javascript - Internationalizaton of HTML Files</title>
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="globalize.cultures.js"></script>
<p id="name">name</p>
<p id="surname">surname</p>

  <script>
function myFunction()
 {
 surname=document.getElementById("surname");  //Find the element
 surname.innerHTML=Globalize.localize( "surname", "fr" );    //Change the content
 n=document.getElementById("name");
 n.innerHTML=Globalize.localize("name","fr");
}
 window.onload=function(){
 var language=window.navigator.language; //default language en-US
 surname=document.getElementById("surname");  //Find the element
 surname.innerHTML=Globalize.localize( "surname", language );    //Change the content
 n=document.getElementById("name");
 n.innerHTML=Globalize.localize("name",language);

 };
</script>
 <button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

globalize.cultures.js文件

  Globalize.addCultureInfo( "en-US", {
    messages: {
     "name" : "English Name",
     "surname" : "English Surname"
    }
   });
   // French language code is actually fr

       Globalize.addCultureInfo( "fr", {
       messages: {
     "name" : "French name",
    "surname" : "French Surname"
      }
    });

Answer 5

您可以使用jQuery模板API将所有已写入的单词替换为可动态定义的变量。

在此处查看更多信息： http ： //api.jquery.com/tmpl/

Answer 6

我不会使用JQuery来国际化您的网页内容，它不是一个很好的技术选择，因为不能依赖JavaScript在浏览器或客户端阅读您的页面时是活跃的。

您最好使用服务器端语言将内容提供给HTML模板，或者如果不可能，则为每种语言创建重复的页面并适当地标记它们。

Answer 7

你可能想看一下gettext jQuery插件。 gettext是一个标准语言文件，具有很棒的编辑工具，如果您必须处理翻译服务（甚至是技术不高的内部人员），这将使体验变得更加容易。

对于URL问题，您的Web服务器可能具有一些通过重写URL来提供帮助的功能。 例如Apache中的.htaccess 。 （您可能希望将其作为单独的问题发布。）

Answer 8

Localizer插件 - plugins.jquery.com/project/localizer很简单，效果很好。