web網頁多語言的實現方案_前端實現多語言切換

實現的效果

需要在web中實現多語言的切換，當用戶語言切換完成后下次重新打開網頁，也是上次設置的語言進行顯示。

資源網站搜索大全https://55wd.com

實現步驟

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代表要替換的文字的標識 。例如：  

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

});

 

 

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'));