Fatal编程技术网

Javascript HTML文件的国际化

javascript jquery html internationalization

Javascript HTML文件的国际化,javascript,jquery,html,internationalization,Javascript,Jquery,Html,Internationalization,我正在开发一个项目，并使用HTML文件（而不是JSP或客户端的任何其他技术）。我使用JQuery编写脚本。我有表、列和许多字段，上面有“文本”。如何使用JQuery将我的网页国际化？我的意思是我将加载一个文件扩展名，我的网页将是土耳其语，扩展名将是瑞典语等等 有什么想法吗 EDIT1:例如，我将编写如下代码： <div>${name}</div> <div>${surname}</div> name = isim surname = soyisi

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

有什么想法吗

EDIT1:例如，我将编写如下代码：

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

name = isim
surname = soyisim

name = namn
surname = efternamn
将有一个_swe.properties文件，如下所示：

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

name = isim
surname = soyisim

name = namn
surname = efternamn
如果我更改导入的文件，div中的文本将以不同的语言显示

EDIT2:这项功能对我来说已经足够了，我不需要更多了，我需要一个快速、轻量级的插件（也许从JSON馈送是一个额外的特长）。

您可以使用jQuery模板API用可以动态定义的变量替换所有编写的单词

请参阅此处的更多信息：

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



编辑：根据您的需要，我建议您

我不会使用JQuery对您的网页内容进行国际化，这不是一个好的技术选择，因为JavaScript不能在浏览器或客户端阅读您的网页时发挥作用

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

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

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

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

要进行翻译，您将使用类似以下代码：

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


Globalize.addCultureInfo（“tr”{
信息：{
“名称”：“isim”，
“姓氏”：“索伊西姆”
}
});
//瑞典语代码实际上是sv
Globalize.addCultureInfo（“sv”{
信息：{
“名称”：“namn”，
“姓氏”：“埃弗特纳姆”
}
});
$（文档）.ready（函数（）{
//你需要知道该用什么语言
//但这超出了这个答案的范围
$（“名称”）.val（Globalize.localize（“名称”、“tr”））；
$（“姓氏”）.val（全球化、本地化（“姓氏”、“tr”）；
});
要使用此脚本，您需要修改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>


名称


姓氏
Localizer插件-plugins.jquery.com/project/Localizer很简单，而且运行良好。

我支持Pawel Dyda关于使用jquery Globalize插件的回答。我们正在我们的项目中使用类似的解决方案

步骤如下

  • 下载jqueryglobalize插件

  • 在HTML文件中包含globalize.js和您需要的区域性的js文件

    e、 g.，globalize.culture.tr.js

  • 添加带有ID的HTML代码

    <div id="name"></div>
<div id="surname></div>
    瑞典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对象并设置下拉列表的选项名称和值
    • 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>
    我希望在客户端执行国际化过程，因为我的应用程序将尽可能与主服务器端分离。我将与REST服务沟通。重复页面的想法可能不利于添加新语言或将一种语言更改为另一种语言，即我也会根据浏览器的默认语言更改语言。我仍然认为您考虑的技术是错误的。JavaScript应该用于增强网页，而不是依赖于显示其内容。问题是如何使用jQuery实现国际化。本地化插件-看起来不错，我会检查它。如果您需要更多（如适当的复数支持、变量等），您可以查看我编辑的问题，根据我的需要，你建议哪一个？我如何使用jqueryi18n实现翻译，而不通过编程将值设置为html，如：${name}${lasname}