如何以非编程方式国际化 HTML 文本答案

【问题标题】：How to internationalize of HTML text non-programmatically如何以非编程方式国际化 HTML 文本
【发布时间】：2015-03-31 12:25:08
【问题描述】：

我需要重构我的应用程序以使其支持国际化。

我找到了https://github.com/jquery-i18n-properties/jquery-i18n-properties，但它似乎只支持使用 jQuery 以编程方式翻译文本。

但是我的 JSP/html 文件中有大量的硬编码文本，所以我希望找到一种 ALSO 支持国际化静态 html 文本的方法，例如：

<title>@{title_here}<title>
<div>@{label}</div>

在我读取正确的属性文件后，页面将自动将这些值替换为正确的值，而无需使用 jquery 设置每个文本，例如 $(....).text(read_from_properties);

有没有办法做到这一点？

【问题讨论】：

@AlvaroMontoro，是的，抱歉打错了
我不知道是否有真正的非编程解决方案。正如您所说，HTML 是静态的，因此总会有一些代码/程序在幕后完成技巧并替换值
我不确定这个问题是否适合stackoverflow。

标签： javascript jquery html jsp internationalization

【解决方案1】：

由于 html 是静态的，因此您不能只将其放入数据文件并期望它输出正确的语言。

如果您的 JSP 文件中有硬编码文本，我会在服务器端实现 i18n。

如果您有一个单页应用程序，您可能会使用一些模板引擎（作为 MV* 框架的一部分，或独立）来呈现 html。我以前用过polyglot，效果很好。

无论哪种方式，您都需要更改所有当前的静态文本。

【讨论】：

【解决方案2】：

我不知道这是否正是你要找的东西，但是当我看到你想要的东西时，我首先想到的是handlebars expressions：

<script id="myTemplate" type="text/x-handlebars-template">
    <div>{{welcome}}</div>
    <div>{{name}}</div>
    <div>{{time}}</div>
</script>
<div id="generated"></div>

您仍然需要一些代码来将语言从一种语言更改为另一种语言，但这并不难。您可以在此处查看运行示例：http://jsfiddle.net/gj9hbhwj/1/

function changeLanguage(lang) {
    var templateSource = document.getElementById('myTemplate').innerHTML;
    var template = Handlebars.compile(templateSource);
    var generatedHolder = document.getElementById('generated');
    generatedHolder.innerHTML = template(int[lang]);
}

在个人和小型项目/应用程序中，我使用了一个简单的 jQuery/JSON 组合，只需要几行代码就可以像魅力一样工作：

/** ON A SEPARATE FILE **/
int = {
    "en": {
        "#welcome": "Welcome to my site",
        "#name": "My name is...",
        "#time": "It's 8 o'clock"
    },
    "es": {
        "#welcome": "Bienvenido a mi web",
        "#name": "Mi nombre es...",
        "#time": "Son las 8 en punto"
    }
}

/** ON MAIN SCRIPT **/
function changeLanguage(target_lang) {
    if (int[target_lang]) {
        $.each(int[target_lang], function (index, value) {
            $(index).text(value);
        });
    }
}

key 是我要修改的元素的 CSS 选择器，value 是不同语言的文本。使用 $.each() 我可以立即修改所有字符串，只需 3 行代码（与要替换的短语数量无关）。你可以在这里看到它运行：http://jsfiddle.net/4y5j0gr7/

【讨论】：