基于JavaScript实现快速转换文本语言(繁体中文和简体中文)


Posted in Javascript onMarch 07, 2016

一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”)。传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言。这里笔者介绍一种简单可行的方法,不是在服务端而是利用前端的 JavaScript 就可以切换正体中文。
如下图,我们把切换按钮放在页脚(当然你也可以放置在“导航”或者其他更醒目的位置)。

基于JavaScript实现快速转换文本语言(繁体中文和简体中文)

由于页面假设设定均使用 Unicode 字符集,于是一般不用考虑 GB2312/BIG5 字符集问题,伟大的 Unicode 字符集已经涵盖了繁体字的字符了(UTF-8 编码)。

怎么在页面调用这个功能呢?很简单,首先引入下面 Js(注意还依赖 Function.prototype.delegate(), 下面会提及):

;(function(){ 
 var 简化中文 = '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔彼碧蓖蔽毕毙毖币庇痹闭敝弊必辟壁臂避陛鞭边编贬扁便变卞辨辩辫遍标彪膘表鳖憋别瘪彬斌濒滨宾摈兵冰柄丙秉饼炳病并玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳捕卜哺补埠不布步簿部怖擦猜裁材才财睬踩采彩菜蔡餐参蚕残惭惨灿苍舱仓沧藏操糙槽曹草厕策侧册测层蹭插叉茬茶查碴搽察岔差诧拆柴豺搀掺蝉馋谗缠铲产阐颤昌猖场尝常长偿肠厂敞畅唱倡超抄钞朝嘲潮巢吵炒车扯撤掣彻澈郴臣辰尘晨忱沉陈趁衬撑称城橙成呈乘程惩澄诚承逞骋秤吃痴持匙池迟弛驰耻齿侈尺赤翅斥炽充冲冲虫崇宠抽酬畴踌稠愁筹仇绸瞅丑臭初出橱厨躇锄雏滁除楚础储矗搐触处揣川穿椽传船喘串疮窗幢床闯创吹炊捶锤垂春椿醇唇淳纯蠢戳绰疵茨磁雌辞慈瓷词此刺赐次聪葱囱匆从丛凑粗醋簇促蹿篡窜摧崔催脆瘁粹淬翠村存寸磋撮搓措挫错搭达答瘩打大呆歹傣戴带殆代贷袋待逮怠耽担丹单郸掸胆旦氮但惮淡诞弹蛋当挡党荡档刀捣蹈倒岛祷导到稻悼道盗德得的蹬灯登等瞪凳邓堤低滴迪敌笛狄涤翟嫡抵底地蒂第帝弟递缔颠掂滇碘点典靛垫电佃甸店惦奠淀殿碉叼雕凋刁掉吊钓调跌爹碟蝶迭谍叠丁盯叮钉顶鼎锭定订丢东冬董懂动栋侗恫冻洞兜抖斗陡豆逗痘都督毒犊独读堵睹赌杜镀肚度渡妒端短锻段断缎堆兑队对墩吨蹲敦顿囤钝盾遁掇哆多夺垛躲朵跺舵剁惰堕蛾峨鹅俄额讹娥恶厄扼遏鄂饿恩而儿耳尔饵洱二贰发罚筏伐乏阀法珐藩帆番翻樊矾钒繁凡烦反返范贩犯饭泛坊芳方肪房防妨仿访纺放菲非啡飞肥匪诽吠肺废沸费芬酚吩氛分纷坟焚汾粉奋份忿愤粪丰封枫蜂峰锋风疯烽逢冯缝讽奉凤佛否夫敷肤孵扶拂辐幅氟符伏俘服浮涪福袱弗甫抚辅俯釜斧脯腑府腐赴副覆赋复傅付阜父腹负富讣附妇缚咐噶嘎该改概钙盖溉干甘杆柑竿肝赶感秆敢赣冈刚钢缸肛纲岗港杠篙皋高膏羔糕搞镐稿告哥歌搁戈鸽胳疙割革葛格蛤阁隔铬个各给根跟耕更庚羹埂耿梗工攻功恭龚供躬公宫弓巩汞拱贡共钩勾沟苟狗垢构购够辜菇咕箍估沽孤姑鼓古蛊骨谷股故顾固雇刮瓜剐寡挂褂乖拐怪棺关官冠观管馆罐惯灌贯光广逛瑰规圭硅归龟闺轨鬼诡癸桂柜跪贵刽辊滚棍锅郭国果裹过哈骸孩海氦亥害骇酣憨邯韩含涵寒函喊罕翰撼捍旱憾悍焊汗汉夯杭航壕嚎豪毫郝好耗号浩呵喝荷菏核禾和何合盒貉阂河涸赫褐鹤贺嘿黑痕很狠恨哼亨横衡恒轰哄烘虹鸿洪宏弘红喉侯猴吼厚候后呼乎忽瑚壶葫胡蝴狐糊湖弧虎唬护互沪户花哗华猾滑画划化话槐徊怀淮坏欢环桓还缓换患唤痪豢焕涣宦幻荒慌黄磺蝗簧皇凰惶煌晃幌恍谎灰挥辉徽恢蛔回毁悔慧卉惠晦贿秽会烩汇讳诲绘荤昏婚魂浑混豁活伙火获或惑霍货祸击圾基机畸稽积箕肌饥迹激讥鸡姬绩缉吉极棘辑籍集及急疾汲即嫉级挤几脊己蓟技冀季伎祭剂悸济寄寂计记既忌际妓继纪嘉枷夹佳家加荚颊贾甲钾假稼价架驾嫁歼监坚尖笺间煎兼肩艰奸缄茧检柬碱硷拣捡简俭剪减荐槛鉴践贱见键箭件健舰剑饯渐溅涧建僵姜将浆江疆蒋桨奖讲匠酱降蕉椒礁焦胶交郊浇骄娇嚼搅铰矫侥脚狡角饺缴绞剿教酵轿较叫窖揭接皆秸街阶截劫节茎睛晶鲸京惊精粳经井警景颈静境敬镜径痉靖竟竞净炯窘揪究纠玖韭久灸九酒厩救旧臼舅咎就疚鞠拘狙疽居驹菊局咀矩举沮聚拒据巨具距踞锯俱句惧炬剧捐鹃娟倦眷卷绢撅攫抉掘倔爵桔杰捷睫竭洁结解姐戒藉芥界借介疥诫届巾筋斤金今津襟紧锦仅谨进靳晋禁近烬浸尽劲荆兢觉决诀绝均菌钧军君峻俊竣浚郡骏喀咖卡咯开揩楷凯慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕颗科壳咳可渴克刻客课肯啃垦恳坑吭空恐孔控抠口扣寇枯哭窟苦酷库裤夸垮挎跨胯块筷侩快宽款匡筐狂框矿眶旷况亏盔岿窥葵奎魁傀馈愧溃坤昆捆困括扩廓阔垃拉喇蜡腊辣啦莱来赖蓝婪栏拦篮阑兰澜谰揽览懒缆烂滥琅榔狼廊郎朗浪捞劳牢老佬姥酪烙涝勒乐雷镭蕾磊累儡垒擂肋类泪棱楞冷厘梨犁黎篱狸离漓理李里鲤礼莉荔吏栗丽厉励砾历利傈例俐痢立粒沥隶力璃哩俩联莲连镰廉怜涟帘敛脸链恋炼练粮凉梁粱良两辆量晾亮谅撩聊僚疗燎寥辽潦了撂镣廖料列裂烈劣猎琳林磷霖临邻鳞淋凛赁吝拎玲菱零龄铃伶羚凌灵陵岭领另令溜琉榴硫馏留刘瘤流柳六龙聋咙笼窿隆垄拢陇楼娄搂篓漏陋芦卢颅庐炉掳卤虏鲁麓碌露路赂鹿潞禄录陆戮驴吕铝侣旅履屡缕虑氯律率滤绿峦挛孪滦卵乱掠略抡轮伦仑沦纶论萝螺罗逻锣箩骡裸落洛骆络妈麻玛码蚂马骂嘛吗埋买麦卖迈脉瞒馒蛮满蔓曼慢漫谩芒茫盲氓忙莽猫茅锚毛矛铆卯茂冒帽貌贸么玫枚梅酶霉煤没眉媒镁每美昧寐妹媚门闷们萌蒙檬盟锰猛梦孟眯醚靡糜迷谜弥米秘觅泌蜜密幂棉眠绵冕免勉娩缅面苗描瞄藐秒渺庙妙蔑灭民抿皿敏悯闽明螟鸣铭名命谬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌谋牟某拇牡亩姆母墓暮幕募慕木目睦牧穆拿哪呐钠那娜纳氖乃奶耐奈南男难囊挠脑恼闹淖呢馁内嫩能妮霓倪泥尼拟你匿腻逆溺蔫拈年碾撵捻念娘酿鸟尿捏聂孽啮镊镍涅您柠狞凝宁拧泞牛扭钮纽脓浓农弄奴努怒女暖虐疟挪懦糯诺哦欧鸥殴藕呕偶沤啪趴爬帕怕琶拍排牌徘湃派攀潘盘磐盼畔判叛乓庞旁耪胖抛咆刨炮袍跑泡呸胚培裴赔陪配佩沛喷盆砰抨烹澎彭蓬棚硼篷膨朋鹏捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片骗飘漂瓢票撇瞥拼频贫品聘乒坪苹萍平凭瓶评屏坡泼颇婆破魄迫粕剖扑铺仆莆葡菩蒲埔朴圃普浦谱曝瀑期欺栖戚妻七凄漆柒沏其棋奇歧畦崎脐齐旗祈祁骑起岂乞企启契砌器气迄弃汽泣讫掐洽牵扦钎铅千迁签仟谦乾黔钱钳前潜遣浅谴堑嵌欠歉枪呛腔羌墙蔷强抢橇锹敲悄桥瞧乔侨巧鞘撬翘峭俏窍切茄且怯窃钦侵亲秦琴勤芹擒禽寝沁青轻氢倾卿清擎晴氰情顷请庆琼穷秋丘邱球求囚酋泅趋区蛆曲躯屈驱渠取娶龋趣去圈颧权醛泉全痊拳犬券劝缺炔瘸却鹊榷确雀裙群然燃冉染瓤壤攘嚷让饶扰绕惹热壬仁人忍韧任认刃妊纫扔仍日戎茸蓉荣融熔溶容绒冗揉柔肉茹蠕儒孺如辱乳汝入褥软阮蕊瑞锐闰润若弱撒洒萨腮鳃塞赛三叁伞散桑嗓丧搔骚扫嫂瑟色涩森僧莎砂杀刹沙纱傻啥煞筛晒珊苫杉山删煽衫闪陕擅赡膳善汕扇缮墒伤商赏晌上尚裳梢捎稍烧芍勺韶少哨邵绍奢赊蛇舌舍赦摄射慑涉社设砷申呻伸身深娠绅神沈审婶甚肾慎渗声生甥牲升绳省盛剩胜圣师失狮施湿诗尸虱十石拾时什食蚀实识史矢使屎驶始式示士世柿事拭誓逝势是嗜噬适仕侍释饰氏市恃室视试收手首守寿授售受瘦兽蔬枢梳殊抒输叔舒淑疏书赎孰熟薯暑曙署蜀黍鼠属术述树束戍竖墅庶数漱恕刷耍摔衰甩帅栓拴霜双爽谁水睡税吮瞬顺舜说硕朔烁斯撕嘶思私司丝死肆寺嗣四伺似饲巳松耸怂颂送宋讼诵搜艘擞嗽苏酥俗素速粟僳塑溯宿诉肃酸蒜算虽隋随绥髓碎岁穗遂隧祟孙损笋蓑梭唆缩琐索锁所塌他它她塔獭挞蹋踏胎苔抬台泰酞太态汰坍摊贪瘫滩坛檀痰潭谭谈坦毯袒碳探叹炭汤塘搪堂棠膛唐糖倘躺淌趟烫掏涛滔绦萄桃逃淘陶讨套特藤腾疼誊梯剔踢锑提题蹄啼体替嚏惕涕剃屉天添填田甜恬舔腆挑条迢眺跳贴铁帖厅听烃汀廷停亭庭挺艇通桐酮瞳同铜彤童桶捅筒统痛偷投头透凸秃突图徒途涂屠土吐兔湍团推颓腿蜕褪退吞屯臀拖托脱鸵陀驮驼椭妥拓唾挖哇蛙洼娃瓦袜歪外豌弯湾玩顽丸烷完碗挽晚皖惋宛婉万腕汪王亡枉网往旺望忘妄威巍微危韦违桅围唯惟为潍维苇萎委伟伪尾纬未蔚味畏胃喂魏位渭谓尉慰卫瘟温蚊文闻纹吻稳紊问嗡翁瓮挝蜗涡窝我斡卧握沃巫呜钨乌污诬屋无芜梧吾吴毋武五捂午舞伍侮坞戊雾晤物勿务悟误昔熙析西硒矽晰嘻吸锡牺稀息希悉膝夕惜熄烯溪汐犀檄袭席习媳喜铣洗系隙戏细瞎虾匣霞辖暇峡侠狭下厦夏吓掀锨先仙鲜纤咸贤衔舷闲涎弦嫌显险现献县腺馅羡宪陷限线相厢镶香箱襄湘乡翔祥详想响享项巷橡像向象萧硝霄削哮嚣销消宵淆晓小孝校肖啸笑效楔些歇蝎鞋协挟携邪斜胁谐写械卸蟹懈泄泻谢屑薪芯锌欣辛新忻心信衅星腥猩惺兴刑型形邢行醒幸杏性姓兄凶胸匈汹雄熊休修羞朽嗅锈秀袖绣墟戌需虚嘘须徐许蓄酗叙旭序畜恤絮婿绪续轩喧宣悬旋玄选癣眩绚靴薛学穴雪血勋熏循旬询寻驯巡殉汛训讯逊迅压押鸦鸭呀丫芽牙蚜崖衙涯雅哑亚讶焉咽阉烟淹盐严研蜒岩延言颜阎炎沿奄掩眼衍演艳堰燕厌砚雁唁彦焰宴谚验殃央鸯秧杨扬佯疡羊洋阳氧仰痒养样漾邀腰妖瑶摇尧遥窑谣姚咬舀药要耀椰噎耶爷野冶也页掖业叶曳腋夜液一壹医揖铱依伊衣颐夷遗移仪胰疑沂宜姨彝椅蚁倚已乙矣以艺抑易邑屹亿役臆逸肄疫亦裔意毅忆义益溢诣议谊译异翼翌绎茵荫因殷音阴姻吟银淫寅饮尹引隐印英樱婴鹰应缨莹萤营荧蝇迎赢盈影颖硬映哟拥佣臃痈庸雍踊蛹咏泳涌永恿勇用幽优悠忧尤由邮铀犹油游酉有友右佑釉诱又幼迂淤于盂榆虞愚舆余俞逾鱼愉渝渔隅予娱雨与屿禹宇语羽玉域芋郁吁遇喻峪御愈欲狱育誉浴寓裕预豫驭鸳渊冤元垣袁原援辕园员圆猿源缘远苑愿怨院曰约越跃钥岳粤月悦阅耘云郧匀陨允运蕴酝晕韵孕匝砸杂栽哉灾宰载再在咱攒暂赞赃脏葬遭糟凿藻枣早澡蚤躁噪造皂灶燥责择则泽贼怎增憎曾赠扎喳渣札轧铡闸眨栅榨咋乍炸诈摘斋宅窄债寨瞻毡詹粘沾盏斩辗崭展蘸栈占战站湛绽樟章彰漳张掌涨杖丈帐账仗胀瘴障招昭找沼赵照罩兆肇召遮折哲蛰辙者锗蔗这浙珍斟真甄砧臻贞针侦枕疹诊震振镇阵蒸挣睁征狰争怔整拯正政帧症郑证芝枝支吱蜘知肢脂汁之织职直植殖执值侄址指止趾只旨纸志挚掷至致置帜峙制智秩稚质炙痔滞治窒中盅忠钟衷终种肿重仲众舟周州洲诌粥轴肘帚咒皱宙昼骤珠株蛛朱猪诸诛逐竹烛煮拄瞩嘱主著柱助蛀贮铸筑住注祝驻抓爪拽专砖转撰赚篆桩庄装妆撞壮状椎锥追赘坠缀谆准捉拙卓桌琢茁酌啄着灼浊兹咨资姿滋淄孜紫仔籽滓子自渍字鬃棕踪宗综总纵邹走奏揍租足卒族祖诅阻组钻纂嘴醉最罪尊遵昨左佐柞做作坐座'; 
 var 正体中文 = '啊阿埃挨哎唉哀?癌?矮艾??郯?鞍卑舶嘲窗蛋栋钒赴拱喊话及桨韭O?傲?W懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙?伟粤T爸白柏百?[佰?“莅薨甙喟岚獍泐C板版扮拌伴瓣半??邦?桶鸢癜蚪?棒磅蚌?傍?苞胞包褒??薄雹保堡???抱?蟊┍?U爆杯碑悲卑北?背??倍???v焙被奔苯本笨崩?甭泵蹦迸逼鼻比鄙?彼碧蓖蔽??辣?疟颖蚤]敝弊必辟壁臂避陛鞭???扁便?卞辨??遍?吮氡毂睃?憋?e?彬斌?l?I??P兵冰柄丙秉?炳病?K玻菠播?芾?波博勃搏?箔伯帛舶脖膊渤泊?捕?哺?埠不布步簿部怖擦猜裁材才?睬踩采彩菜蔡餐?⑿Q???M?K?N???}?娌夭俨诓鄄懿?????y?硬洳宀娌绮璨椴瓴氩觳聿钤?拆柴豺?v?较s???????昌猖??L常?????S敞?吵????n朝嘲潮巢吵炒?扯撤掣?爻撼怀汲?m晨忱沈?趁??畏Q城橙成呈乘程?统握\承逞?秤吃?持匙池?弛??u?侈尺赤翅斥?氤湫n?_?崇??抽酬??稠愁?仇?瞅?臭初出??N躇??滁除楚??Υ4び|?揣川穿椽?鞔????窗幢床???吹炊捶?垂春椿醇唇淳?蠢戳?疵茨磁雌?慈瓷?此刺?次???璐????粗醋簇促?篡?摧崔催脆瘁粹淬翠村存寸磋撮搓措挫?搭?答瘩打大呆歹傣戴?Т??J袋待逮怠耽???梧??勰?旦氮但??淡???蛋??觞h??n刀?v蹈倒?u??У降镜康辣I德得的蹬?舻堑鹊傻枢?堤低滴迪?车训?斓缘盏值椎氐俚诘鄣苓f??掂滇碘?典靛?|?佃甸店惦奠?盏畹锏鸬竦虻蟮舻踽??跌爹碟蝶叠??丁盯叮??鼎?定??G?|冬董懂???侗恫?龆炊刀遏Y陡豆逗痘都督毒?侏??堵睹?杜?肚度渡妒端短?段?嗑?堆?蛾??Χ??蹲敦?囤?盾遁掇哆多?Z垛躲朵跺舵剁惰??蛾峨?俄??娥?憾蚨蠖舳躔I恩而?憾???洱二???筏伐乏?法?藩帆番翻樊??繁凡?┓捶倒??犯?泛坊芳方肪房防妨仿??放菲非啡?肥匪?吠肺?U沸?芬酚吩氛分???焚汾粉?^份忿????封?鞣浞邃h??烽逢???奉?佛否夫敷?孵扶拂?幅氟符伏俘服浮涪福袱弗甫?彷o俯釜斧脯腑府腐赴副覆??傅付阜父腹?富?附?D?咐噶嘎?改概??溉?指矢烁谈透乌s感?敢?????缸肛???港杠篙?高膏羔糕搞?稿告哥歌?R戈?胳疙割革葛格蛤?隔???各?根跟耕更庚羹埂耿梗工攻功恭?供躬公?m弓?汞拱?共?勾?瞎豆饭????蚬脊焦竟抗拦凉鹿霉墓判M骨谷股故?固雇刮瓜??寡挂褂乖拐怪棺?官冠?管?罐?T灌?光?V逛瑰?圭矽?w???鬼?癸桂??跪??]??L棍?郭????^哈骸孩海氦亥害?酣憨邯?含涵寒函喊罕翰撼捍旱憾悍焊汗?h夯杭航壕嚎豪毫郝好耗?浩呵喝荷菏核禾和何合盒貉?河涸赫褐??嘿黑痕很狠恨哼亨?M衡恒?哄烘虹?洪宏弘?喉侯猴吼厚候後呼乎忽瑚?睾??????』⒒Wo互??艋?W?猾滑???化?槐徊?鸦??g?桓???Q患?警?豢??o宦幻荒慌?磺蝗簧皇凰惶煌晃幌恍?灰?]?徽恢蛔回?Щ诨刍芑莼拶V???Z?≈M???昏婚魂??混豁活夥火?或惑霍???艋??C畸稽?箕肌?迹激??姬??吉?O棘?籍集及急疾汲即嫉??D?准辜核E技冀季伎祭?┘??募庞??既忌?妓??嘉枷?A佳家加???甲?假稼?r架?嫁????约夤{?煎兼肩?奸???z柬?A???旌???剪?p????????箭件健??︷T?u?R?窘ń┙??{江疆?????匠?降蕉椒礁焦?交郊?豺??山?????e?狡角???剿教酵??叫窖揭接皆?街?截劫??睛晶?京?精粳?井警景??境敬??蒋d靖竟??Q炯窘揪究?玖韭久灸九酒??扰f臼舅咎就疚鞠拘狙疽居?菊局咀矩?沮聚拒??蘧呔嗑徜?俱句?志?【棂N娟倦眷卷?撅攫抉掘倔爵桔?芙萁藿???解姐戒藉芥界借介疥??媒斫罱锝鸾窠蚪缶o??H??靳?x禁近?a浸??徘G兢??Q??均菌??君峻俊竣浚郡?喀咖卡咯?揩楷?P慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕?科?た瓤煽士丝炭驼n肯啃??┛涌钥湛挚卓?缚诳劭芸菘蘅呖嗫?煅??垮挎跨胯?K筷?~快??款匡筐狂框?眶??r?盔?h?葵奎魁傀?愧?⒗だダ?Ю?U廓?垃拉喇??辣啦??碣??婪??r??????????欣|???E琅榔狼廊郎朗浪??诶卫侠欣牙依?忱?防阻D蕾磊累儡?纠蘩哳??I棱楞冷厘梨犁黎?狸?漓理李???莉荔吏栗????畹[?牙????×⒘?r?力璃哩?z????廉?z?i??磕????????隽毫涣?奢v量晾亮?撩聊僚?燎寥?潦了撂?廖料列裂烈劣?琳林磷霖???淋?C?吝拎玲菱零??伶羚?R?陵?X?另令溜琉榴硫?留?⒘隽髁?????祷\窿隆??n????Шt漏陋????]?t?稃u??麓碌露路?鹿潞???戮??武X?H旅履?铱|?]氯律率?V??n???\?绰?y掠略?噍?????S???螺?????裸落洛????麻?????嘛?崧褓I????????M蔓曼慢漫?芒茫盲氓忙莽?茅?毛矛?卯茂冒帽貌?麽玫枚梅酶?煤?]眉媒?每美昧寐妹媚?????萌蒙檬盟?猛?裘厦忻衙颐用灾i??米秘?泌蜜密?缑廾呔d冕免勉娩?面苗描瞄藐秒渺?R妙蔑?缑衩蛎竺???明螟??名命?摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌?牟某拇牡?姆母墓暮幕募慕木目睦牧穆拿哪呐?那娜?氖乃奶耐奈南男?囊?夏X?吏[淖呢??饶勰苣菽弈吣嗄?M你匿?逆溺蔫拈年碾?f?幽钅镝??尿捏?孽???涅您???凝甯?Q?襞Eもo???廪r弄奴努怒女暖虐?挪懦糯?哦?W????I偶?a啪趴爬帕怕琶拍排牌徘湃派攀潘?磐盼畔判叛乓?旁耪胖抛咆刨炮袍跑泡呸胚培裴?陪配佩沛??盆砰抨烹澎彭蓬棚硼篷膨朋?捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片??漂瓢票撇瞥拼??品聘乒坪?萍平?{瓶?屏坡???婆破魄迫粕剖?滗?仆莆葡菩蒲埔?闫云掌肿V曝瀑期欺??萜奁?D漆柒沏其棋奇歧畦崎??旗祈祁?起?乞企??契砌器?馄??汽泣?掐洽??L??千??仟?乾黔??前??遣?\??q嵌欠歉???芮磺???????橇?敲悄?蚯??S巧鞘撬?峭俏?切茄且怯??J侵?秦琴勤芹擒禽??沁青???A卿清擎晴氰情???c??秋丘邱球求囚酋泅??^蛆曲?屈?渠取娶?趣去圈??嗳┤??????袢比踩?s?榷?雀裙群然燃冉染瓤壤攘嚷???_?惹?崛扇嗜巳添g任?刃妊?扔仍日戎茸蓉?s融熔溶容?冗揉柔肉茹蠕儒孺如辱乳汝入褥?阮蕊瑞????若弱撒?⑺_腮?塞?三三?闵⑸I?噬︱}?呱┥???????⑸采臣?傻啥煞??裆荷簧忌?h煽衫??擅?膳善汕扇?墒??藤p晌上尚裳梢捎稍??稚咨厣偕谏劢B奢?蛇舌舍赦?z射?厣嫔缭O砷申呻伸身深娠?神沈???鹕跄I慎?B?生甥牲升?省盛剩?俾}??失?施?裨??剖????r什食????史矢使屎?始式示士世柿事拭誓逝?菔鞘仁蛇m仕侍??氏市恃室??收手首守?凼谑凼苁莴F蔬?惺崾馐爿?叔舒淑疏??H孰熟薯暑曙署蜀黍鼠?傩g述?涫??Q墅庶?凳?∷⑺Kにニ??栓拴霜?爽?水睡?吮瞬?舜??朔?q斯撕嘶思私司?死肆寺嗣四伺似?巳松??Z?送宋??搜艘?\嗽?酥俗素速粟僳塑溯宿??酸蒜算?隋??髓碎?q穗遂隧祟?O?p?蓑梭唆??索?所塌他它她塔??樘Lぬヌ?E台泰酞太?B汰坍???????刺堤蹲T?坦毯袒碳探?U炭??撂绿锰奶盘铺翘忍商侍?C掏??峡l萄桃逃淘陶?套特藤?疼?梯剔踢?提?蹄啼?替嚏惕涕剃?咸焯硖钐锾鹛裉蛱筇?l迢眺跳??帖?d??N汀廷停亭庭挺艇通桐酮瞳同?彤童桶捅筒?痛偷投?透凸?突?D徒途?T屠土吐兔湍?F推?腿?褪退吞屯臀拖托??陀???E妥拓唾挖哇蛙?娃瓦?歪外豌???惩骖B丸烷完碗挽晚皖惋宛婉?腕汪王亡枉?往旺望忘妄威巍微危??桅??ㄎ???H??萎委??^尾?未蔚味畏胃?魏位渭?尉慰?瘟?匚梦穆??吻?紊??嗡翁??胛??u?我斡?握沃巫?桄u??@?屋?o?梧吾?俏阄湮逦嫖缥栉槲?]戊?晤物勿?瘴蛘`昔熙析西硒矽晰嘻吸??尴∠⑾Oはハο?ㄏ┫????u席?媳喜?洗系隙?蚣?瞎?匣霞?暇?{?b?下?B夏??掀?先仙?????舷?涎弦嫌?????腺????陷限?相???香箱襄湘?翔祥?想?享?巷橡像向象?硝霄削哮?啼N消宵淆?孕⌒⑿P?[笑效楔些歇?鞋?f??y邪斜????械卸蟹懈泄?a?屑薪芯?欣辛新忻心信?星腥猩惺?刑型形邢行醒幸杏性姓兄凶胸匈?靶坌苄菪扌咝嘈徵n秀袖?墟戌需??u?徐?蓄酗?⑿裥蛐笮粜跣鼍w??喧宣?倚??x?眩?靴薛?W穴雪血?煅?????ゑZ巡殉汛???迅?貉壶f?呀丫芽牙蚜崖衙涯雅????焉咽???淹??姥醒蜒已友灶??炎沿奄掩眼衍演?堰燕???雁唁?┭嫜缰V?殃央?秧??P佯?羊洋?氧仰???友??????u?蜻b??姚咬舀?要耀椰噎耶??野冶也?掖?I?曳腋夜液一壹?揖?依伊衣?夷?移?x胰疑沂宜姨?ひ蜗?倚已乙矣以?抑易邑屹?|役臆逸肄疫亦裔意毅???益溢?????翼翌?茵?因殷音?姻吟?淫寅?尹引?印英??膪???t???I?上?迎?盈影?硬映???蛴钒b庸雍?蛹?泳?ビ烙劣掠糜??悠?n尤由???油?酉有友右佑釉?又幼迂淤于盂榆虞愚?余俞逾?愉渝?O隅予?视昱c?Z禹宇?羽玉域芋郁?遇喻峪?愈欲?育?浴寓裕?豫???Y冤元垣袁原援??@?T?A猿源??苑?怨院曰?越???[?月???耘???螂E允??????孕匝砸?栽哉?脑纵d再在咱???嘿???葬遭糟?藻??早澡蚤躁噪造皂?燥???t?少\怎增憎曾??喳渣?????眨?耪フφдㄔp摘?宅窄????终舱痴幢K?剌??湔拐?U?鹫菊烤`樟章彰漳??掌?q杖丈?べ~仗?瘴障招昭找沼?照罩兆肇召遮折哲??者?蔗?浙珍斟真甄砧臻???烧碚钤\震振??蒸?瓯?征???怔整拯正政??⑧??芝枝支吱蜘知肢脂汁之??直植殖?讨抵吨分钢怪褐恢技?志??S至致置?弥胖浦侵戎少|炙痔??沃现兄阎益R衷???重仲?舟周州洲?粥?肘帚咒?宙???珠株蛛朱???逐竹?T煮拄??谥髦????A??住注祝?抓爪拽?4u?撰?篆?肚f??y撞??钭靛F追?????准捉拙卓桌琢茁酌啄著灼?崞?咨?姿滋淄孜紫仔籽滓子自?n字鬃棕?宗????走奏揍租足卒族祖?阻??纂嘴醉最罪尊遵昨左佐柞做作坐座'; 
 
 /** 
  * 默认是否正体中文:true为正体;false简体。 HTTP 
  * 头读取:Request.ServerVariables("http_accept_language") 
  * 
  * @return {Boolean} 
  */ 
 function getClientLanguage() { 
  var s = navigator.userLanguage || navigator.language; 
  switch (s.toLowerCase()) { 
  case 'zh-cn': 
   return false; 
  case 'zh-tw': 
   return true; 
  default: 
   return null; 
  } 
 } 
  
 /** 
  * 转换对象,使用递归,逐层剥到文本 
  * @param {HTMLElement} obj 从document.body开始, 
  */ 
 function translate(el, coverntFn){ 
  el = el.childNodes; 
  var node; 
  for (var i = 0, j = el.length; i < j; i++) { 
   node = el.item(i); 
// || (node == $$.big5.el) 
   if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; 
    
   if(node.title){ 
    node.title = coverntFn(node.title); 
   }else if(node.alt){ 
    node.alt = coverntFn(node.alt); 
   }else if(node.tagName == "INPUT" && node.value != "" && node.type != "text" && node.type != "hidden"){ 
    node.value = coverntFn(node.value); 
   }else if(node.nodeType == 3){ 
    node.data = coverntFn(node.data); 
   }else{ 
    arguments.callee(node, coverntFn); 
   }   
  } 
 } 
  
 function translateText(text, isBig5) { 
  var str = [], _char, charIndex, result; 
 
  for (var i = 0, j = text.length; i < j; i++) { 
   _char = text.charAt(i); 
   charIndex = isBig5 ? 简化中文.indexOf(_char) : 正体中文.indexOf(_char); 
   result = isBig5 ? 正体中文.charAt(charIndex) : 简化中文.charAt(charIndex); 
 
   str.push(charIndex != -1 ? result : _char); 
  } 
 
  return str.join(''); 
 } 
 var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false); 
  
 var cookieName = 'ChineseType'; 
  
 // 转换为正体中文(繁体中文) 
 window.toChinese = function(el) { 
  el.addCls('selected'); 
  document.querySelector(".simpleChinese").removeCls('selected'); 
  translate(document.body, traditionalized) 
  Cookie.set(cookieName, true); 
 } 
 // 转换为简体中文 
 window.toSimpleChinese = function(el) { 
  el.addCls('selected'); 
  document.querySelector(".Chinese").removeCls('selected'); 
  translate(document.body, simplized); 
  Cookie.set(cookieName, false); 
 } 
  
 var Cookie = { 
  set: function (name, val) { 
   var exp = new Date(); 
   exp.setDate(exp.getDate() + 600 * 1000); 
   document.cookie = name + "=" + escape(val) + ";expires=" + exp.toGMTString(); 
  }, del: function (name) { 
   document.cookie = name + "=;expires=" + (new Date(0)).toGMTString(); 
  }, get: function (name) { 
   var cookieArray = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); 
   if (cookieArray != null) return unescape(cookieArray[2]); 
   else return null; 
  } 
 }; 
  
 var value = Cookie.get(cookieName); 
 if( value == null && getClientLanguage() || value == 'true') {  
  // 没有检查出 cookie 则为第一次运行。 
  // cookie保留了用户选择的正体,将原来的简化字转换为默认的正体! 
  window.toChinese(document.querySelector(".Chinese")); 
 } else if(value == null && !getClientLanguage() || value == 'false') { 
  // 虽然第一次运行,但对方正是简体中文,不用转。 
  // 原来已经是简体,无须转换。 
 } 
})();

然后绑定按钮事件,我们简单地使用 onclick 绑定来全局函数 window.toChinese(el)、window.toSimpleChinese(el)。el 是按钮元素。

// 转换为正体中文(繁体中文) 
window.toChinese = function(el) { 
 el.addCls('selected'); 
 document.querySelector(".simpleChinese").removeCls('selected'); 
 translate(document.body, traditionalized) 
 Cookie.set(cookieName, true); 
} 
// 转换为简体中文 
window.toSimpleChinese = function(el) { 
 el.addCls('selected'); 
 document.querySelector(".Chinese").removeCls('selected'); 
 translate(document.body, simplized); 
 Cookie.set(cookieName, false); 
}

js 代码中比较长的两个字符串变量分别是简体中文和繁体中文,他们切换没有什么神奇之处,只是所有文本经过这些变量一一对应即可。当然这里只是常用的繁简对应,而且是机械的,有些特殊的翻译需要联系上下文的,这种高级转换不在此讨论之列。

首先我们看看变量函数 translate,执行它会通过递归遍历完整个 DOM(可以说比较笨的方法)

/** 
  * 转换对象,使用递归,逐层剥到文本 
  * @param {HTMLElement} obj 从document.body开始, 
  */ 
 function translate(el, coverntFn){ 
  el = el.childNodes; 
  var node; 
  for (var i = 0, j = el.length; i < j; i++) { 
   node = el.item(i); 
// || (node == $$.big5.el) 
   if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; 
    
   if(node.title){ 
    node.title = coverntFn(node.title); 
   }else if(node.alt){ 
    node.alt = coverntFn(node.alt); 
   }else if(node.tagName == "INPUT" && node.value != "" && node.type != "text" && node.type != "hidden"){ 
    node.value = coverntFn(node.value); 
   }else if(node.nodeType == 3){ 
    node.data = coverntFn(node.data); 
   }else{ 
    arguments.callee(node, coverntFn); 
   }   
  } 
 }

转换 DOM 内容,我们第一时间想到的可能是 el.innerHTML,但其实大可不必,而且递归的时候不太方便。不妨再想想看,我们其实只需要对文本转换即可,DOM API 能够判断 文本节点(node.nodeType == 3),然后可读可写的 data 属性就是设置文本的(textNode.data),由此我们就是完成到繁体的切换。节点其他属性 title、alt、value 也是同样原理。另外,if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; 是排除某些节点的方法,其思路比较特别,可以多借鉴下。

至于 coverntFn 是一函数参数。通过根函数 translateText(text, isBig5) 新生成两个函数 :var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);

function translateText(text, isBig5) { 
 var str = [], _char, charIndex, result; 
 
 for (var i = 0, j = text.length; i < j; i++) { 
  _char = text.charAt(i); 
  charIndex = isBig5 ? 简化中文.indexOf(_char) : 正体中文.indexOf(_char); 
  result = isBig5 ? 正体中文.charAt(charIndex) : 简化中文.charAt(charIndex); 
 
  str.push(charIndex != -1 ? result : _char); 
 } 
 
 return str.join(''); 
} 
var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);

Function.prototype.delegate() 方法如下。

/** 
 * 函数委托 
 * @return {Function} 
*/ 
Function.prototype.delegate = function () { 
 var self = this, scope = this.scope, args = arguments, aLength = arguments.length, fnToken = 'function'; 
 
 return function(){ 
  var bLength = arguments.length, Length = (aLength > bLength) ? aLength : bLength; 
 
  // mission one: 
  for (var i = 0; i < Length; i++) 
   if (arguments[i])args[i] = arguments[i]; // 拷贝参数 
 
  args.length = Length; // 在 MS jscript下面,arguments作为数字来使用还是有问题,就是length不能自动更新。修正如左: 
 
  // mission two: 
  for (var i = 0, j = args.length; i < j; i++) { 
   var _arg = args[i]; 
   if (_arg && typeof _arg == fnToken && _arg.late == true) 
    args[i] = _arg.apply(scope || this, args); 
  } 
 
  return self.apply(scope || this, args); 
 }; 
};

繁简的转换基本如此了。值得一提的是,浏览器其实替我们识别语言环境的变量,主要是 navigator.userLanguage || navigator.language。这个变量在服务端也可以获取,头读取:Request.ServerVariables("http_accept_language")。

/** 
  * 默认是否正体中文:true为正体;false简体。 HTTP 
  * 头读取:Request.ServerVariables("http_accept_language") 
  * 
  * @return {Boolean} 
  */ 
 function getClientLanguage() { 
  var s = navigator.userLanguage || navigator.language; 
  switch (s.toLowerCase()) { 
  case 'zh-cn': 
   return false; 
  case 'zh-tw': 
   return true; 
  default: 
   return null; 
  } 
 }

最后我们还通过 cookie 来保存语言状态。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
js调用刷新界面的几种方式
May 03 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
小程序实现筛子抽奖
May 26 Javascript
论JavaScript模块化编程
Mar 07 #Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 #Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 #Javascript
javascript数组去重小结
Mar 07 #Javascript
详解JS正则replace的使用方法
Mar 06 #Javascript
浅谈javascript中的call、apply、bind
Mar 06 #Javascript
一波JavaScript日期判断脚本分享
Mar 06 #Javascript
You might like
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php解析url的三个示例
2014/01/20 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php实现微信支付之企业付款
2018/05/30 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Saltstack快速入门简单汇总
2016/03/01 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
捐书活动总结
2014/05/04 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
党的群众路线调研报告
2014/11/03 职场文书
酒会邀请函
2015/01/31 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers