«

JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

时间:2024-3-2 02:07     作者:韩俊     分类: Javascript


一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”)。传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言。这里笔者介绍一种简单可行的方法,不是在服务端而是利用前端的 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,但其实大可不必,而且递归的时候 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() 方法如下。

/** 
* 函数委托 参见 http://blog.csdn.net/zhangxin09/article/details/8508128 
* @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 来保存语言状态。

下面给大家介绍下三步让你的网站支持简体繁体切换

不少网站为了更好地照顾不同用户使用简体/繁体的阅读习惯,会提供简体繁体两种版本字体切换,提高用户体验。例如hexo虽然作者是来自台湾的,但是hexo的官网不仅提供了适合台湾同胞阅读的繁体中文版,还提供了适合我们内地同胞阅读的简体中文版,照顾了我们这些习惯使用简体读写的大陆用户,hexo得到了不少内地忠实粉丝追捧。同样,我们也可以提供繁体版来照顾那些使用繁体字的台湾、香港同胞阅读习惯。

具体实现:

首先,点击这里右键另存下载简繁字体切换所需的 tw_cn.js 文件,上传到自己的网站空间。
其次,修改模板,在你想要显示简繁转换按钮的地方加上下面一段代码,正常情况添加到 header.php 或者 siderbar.php 就可以了。

<a id="translateLink" href="javascript:translatePage();">繁?</a>

最后,在footer.php添加下面代码,记得更改 cookieDomain 这一项。

<script type="text/javascript" src="http://www.arao.me/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体,1-繁体,2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "http://www.arao.me/"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁?"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上,但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

这就基本完成了简体繁体切换功能,不管你是hexo,jelly,Octopress等静态博客,还是wordpress,typecho,emlog,Z-Blog等动态的,都可以用上。具体的演示效果可以点击我博客底部简体中文切换字体,至于简体繁体切换按钮嘛,文字和样式可以按个人喜好自行更改。

标签: javascript

热门推荐