前端开发中多语言的切换，可使用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();}//获取cookiefunction getCookie(name){var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");if(arr=document.cookie.match(reg))return unescape(arr[2]);elsereturn null;}//setCookie('lan','hk'); 繁体中文//setCookie('lan','cn'); 简体中文//setCookie('lan','en'); 英文12345678910111213141516171819221234567891011121314151617181922
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>123456789123456789
3、定义3个语言的标识+内容的json字符串
var cn = {"name" : "姓名","tel" : "电话","email" : "邮箱",};var hk = {"name" : "姓名","tel" : "電話","email" : "郵箱",};var en = {"name" : "Name","tel" : "Tel","email" : "Email",};12345678910111213141516171234567891011121314151617
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);}});1234567891011121314151617181922232425262728293031323334353637383940414212345678910111213141516171819222324252627282930313233343536373839404142
以上是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;}12345678910111213141516171819222324251234567891011121314151617181922232425
那么在js中使用的文字就只要用此函数来读取就可以了
如
alert('姓名');改成alert(get_lan('name'));123123
