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插件的答案。我们在项目中使用了类似的解决方案。

以下步骤。

下载Jquery Globalize插件

https://github.com/jquery/globalize
在HTML文件中包含 globalize.js 和所需文化的JS文件

例如， globalize.culture.tr.js

添加ID为

的HTML代码

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

将名称和姓氏添加到相应语言JS文件的消息部分

土耳其语JS档案

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

瑞典JS文件

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

根据选择
设置文化
```
 Globalize.Culture("tr");
```

使用.text函数或.html函数

更新文化的字符串

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

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

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

Answer 4

您可以使用jQuery模板API将所有文字替换为可动态定义的变量。

在此处查看更多内容：http://api.jquery.com/tmpl/

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

的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"
      }
    });

HTML文件的国际化

8 个答案: