前端多语言切

淡淡的烟草味﹌ 2022-05-19 04:17 184阅读 0赞

前端开发中的多语言切换，可使用js动态替换内容

1、在用户点击切换语言后，把选择的语言版本保存在cookie中

//写入cookie函数
    function setCookie(name,value)
    {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }
    
    //获取cookie
    function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
        else
        return null;
    }
    
    //setCookie('lan','hk');    繁体中文
    //setCookie('lan','cn');    简体中文
    //setCookie('lan','en');    英文

2、在包含静态文本的标签中，添加一个属性：set-lan=”html:name”   
属性值中的html代表内容的位置，name代表要替换的文字的标识   
例如：

名字
 <input type="text" value="名字" set-lan="val:name" />
 
 这些就需要前端工程师在开发过程中添加进去，并且，要切换语言文字的外面都必须要有一个标签包裹，否则无法进行切换；
 如：
 名字
 这样的代码，是无法把“名字”替换成“Name”的，会把“名字”前面的i标签也一起替换掉，如果不想把i标签也替换掉，就要在“名字”外面添加一个标签，改成：
 <lan set-lan="html:name">名字</lan>

*  3、定义3个语言的标识+内容的json字符串

4、遍历带set-lan属性的标签，进行文本替换

$('[set-lan]').each(function(){
        var me = $(this);
        var a = me.attr('set-lan').split(':');
        var p = a[0];   //文字放置位置
        var m = a[1];   //文字的标识
    
        //用户选择语言后保存在cookie中，这里读取cookie中的语言版本
        var lan = getCookie('lan');
    
        //选取语言文字
        switch(lan){
            case 'cn':
                var t = cn[m];  //这里cn[m]中的cn是上面定义的json字符串的变量名，m是json中的键，用此方式读取到json中的值
                break;
            case 'en':
                var t = en[m];
                break;
            default:
                var t = hk[m];
        }
    
        //如果所选语言的json中没有此内容就选取其他语言显示
        if(t==undefined) t = cn[m];
        if(t==undefined) t = en[m];
        if(t==undefined) t = hk[m];
    
        if(t==undefined) return true;   //如果还是没有就跳出
    
        //文字放置位置有（html,val等，可以自己添加）
        switch(p){
            case 'html':
                me.html(t);
                break;
            case 'val':
            case 'value':
                me.val(t);
                break;
            default:
                me.html(t);
        }
    
    });

以上是html中的文字替换，但是写在js中的文字怎么办？   
可以定义一个函数，来读取

function get_lan(m)
    {
        //获取文字
        var lan = getCookie('lan');     //语言版本
        //选取语言文字
        switch(lan){
            case 'cn':
                var t = cn[m];
                break;
            case 'hk':
                var t = hk[m];
                break;
            default:
                var t = en[m];
        }
    
        //如果所选语言的json中没有此内容就选取其他语言显示
        if(t==undefined) t = cn[m];
        if(t==undefined) t = en[m];
        if(t==undefined) t = hk[m];
    
        if(t==undefined) t = m; //如果还是没有就返回他的标识
    
        return t;
    }

那么在js中使用的文字就只要用此函数来读取就可以了   
如

alert('姓名');
    改成
    alert(get_lan('name'));