web网页多语言的实现方案_前端实现多语言切换

实现的效果

需要在web中实现多语言的切换，当用户语言切换完成后下次重新打开网页，也是上次设置的语言进行显示。

实现步骤

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

//写入cookie函数

function setCookie(name,value)

{

    var Days = ;

    var exp = new Date();

    exp.setTime(exp.getTime() + Days****);

    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[]);

    else

    return null;

}

//setCookie('lan','hk');    繁体中文

//setCookie('lan','cn');    简体中文

//setCookie('lan','en');    英文

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

<span set-lan="html:name">名字</span>

<input type="text" value="名字" set-lan="val:name" />

这些就需要前端工程师在开发过程中添加进去，并且，要切换语言文字的外面都必须要有一个标签包裹，否则无法进行切换；

如：

<span set-lan="html:name"><i class="icon"></i>名字</span>

这样的代码，是无法把“名字”替换成“Name”的，会把“名字”前面的i标签也一起替换掉，如果不想把i标签也替换掉，就要在“名字”外面添加一个标签，改成：

<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>

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

var cn = {

            "name" : "姓名",

            "tel" : "电话",

            "email" : "邮箱",

        };

var hk = {

            "name" : "姓名",

            "tel" : "電話",

            "email" : "郵箱",

        };

var en = {

            "name" : "Name",

            "tel" : "Tel",

            "email" : "Email",

        };

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

$('[set-lan]').each(function(){

    var me = $(this);

    var a = me.attr('set-lan').split(':');

    var p = a[];   //文字放置位置

    var m = a[];   //文字的标识

    //用户选择语言后保存在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);

    }

});

5、以上是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'));

巴特西

web网页多语言的实现方案_前端实现多语言切换

实现的效果

实现步骤

最新文章

热门文章