Question

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

我找到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）;

有没有办法实现这个目标？

Answer 1

由于html是静态的，你不能只是把它扔到一个数据文件中，并期望它能够输出正确的语言。

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

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

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

Answer 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);
        });
    }
}

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

如何非编程地使HTML文本国际化

2 个答案: