web前端国际化

处理文件 lang.js

function SetCookie(name, value) {
    var Days = 30; //此 cookie 将被保存 30 天
    var exp = new Date(); //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

function getCookie(name) //取cookies函数   
{
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return null
}

/**
 * 语言翻译处理函数
 * @param {语言类型} lang 
 */
function loadI18nProperties(lang) {
    jQuery.i18n.properties({
        name: 'i18n', // 资源文件名称
        path: '/i18n/', // 资源文件所在目录路径 **绝对路径**

        mode: 'map', // 模式：变量或 Map 
        language: lang, // 对应的语言
        cache: false,
        encoding: 'UTF-8',
        callback: function () { //加载成功后设置显示内容
            try {
                //初始化页面元素
                /**
                 * 针对表单的placeholder进行翻译
                 */
                $('[data-i18n-placeholder]').each(function () {
                    $(this).attr('placeholder', $.i18n.prop($(this).data('i18n-placeholder')));
                });

                /**
                 * 针对普通文本进行翻译
                 */
                $('[data-i18n-text]').each(function () {
                    //如果text里面还有html需要过滤掉
                    var html = $(this).html();
                    var reg = /<(.*)>/;
                    if (reg.test(html)) {
                        var htmlValue = reg.exec(html)[0];
                        $(this).html(htmlValue + $.i18n.prop($(this).data('i18n-text')));
                    } else {
                        $(this).text($.i18n.prop($(this).data('i18n-text')));
                    }
                });

                /**
                 * 会对文本框的提示内容进行翻译
                 */
                $('[data-i18n-value]').each(function () {
                    $(this).val($.i18n.prop($(this).data('i18n-value')));
                });
            } catch (ex) {}
            console.log("i18n写入完毕");
        }
    });
}


function getRsValue(rsCode) {
    return $.i18n.prop(rsCode);
}


/**
 * 语言切换判断
 */
if (getCookie("lang") == "en-US") {
    loadI18nProperties("en_US");
} else {
    loadI18nProperties("zh_CN");
}

使用方法

• 引入到html文件中

<script src="/i18n/jquery-3.3.1.min.js"></script>
<script src="/i18n/jquery.i18n.properties.min.js"></script>
<script src="/i18n/lang.js"></script>

• 对应替换的字段

 <!-- <title>智慧能源管控平台</title> -->
    <title class="i18n" data-i18n-text="title"></title>