锐单电子商城 , 一站式电子元器件采购平台!
  • 电话:400-990-0325

软件开发基于JavaScript实现快速转换文本语言

时间:2022-12-20 16:30:01 双刀转换继电器

基于软件开发JavaScript快速转换文本语言

一般商业网站都有一种语言需求,就是为了照顾使用正体汉语的中国人,专门提供切换到正体汉语的选项(或者传统的做法是在服务端完成,即通过某些控制器或过滤器转换文本语言。在这里,作者介绍了一种简单可行的方法,不是在服务端,而是使用前端 JavaScript可切换正体中文。
如下图所示,我们将切换按钮放在页脚上(当然也可以放在导航或其他更引人注目的位置)。

因为页面假设使用 Unicode所以一般不需要考虑字符集, GB2312/BIG5 字符集问题,伟大 Unicode 字符集已经涵盖了繁体字的字符了(UTF-8 编码)。

如何在页面上调用此功能?这很简单。首先介绍以下内容 Js(注意依赖 Function.prototype.delegate(), 以下将提及:

;(function(){   var 简化中文 = 涅槃乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,鸵鸟乐园,浣熊乐园,浣熊乐园,浣熊乐园,浣熊乐园,浣熊乐园   var 正体中文 = ‘啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊,啊駁捕蔔哺補埠不布步簿部怖擦猜裁材才財睬踩采彩菜蔡餐參蠶殘慚慘燦蒼艙倉滄藏操糙槽曹草廁策側冊測層蹭插叉茬茶查碴搽察岔差詫拆柴豺攙摻蟬饞讒纏鏟産闡顫昌猖場嘗常長償腸廠敞暢唱倡超抄鈔朝嘲潮巢吵炒車扯撤掣徹澈郴臣辰塵晨忱沈陳趁襯撐稱城橙成呈乘程懲澄誠承逞騁秤吃癡持匙池遲弛馳恥齒侈尺赤翅斥熾充衝沖蟲崇寵抽酬疇躊稠愁籌仇綢瞅醜臭初出櫥廚躇鋤雛滁除楚礎儲矗搐觸處揣川穿椽傳船喘串瘡窗幢床闖創吹炊捶錘垂春椿醇唇淳純蠢戳綽疵茨磁雌辭慈瓷詞此刺賜次聰蔥囪匆從叢湊粗醋簇促躥篡竄摧崔催脆瘁粹淬翠村存寸磋撮搓措挫錯搭達答瘩打大呆歹傣戴帶殆代貸袋待逮怠耽擔丹單鄲撣膽旦氮但憚淡誕彈蛋當擋黨蕩檔刀搗蹈倒島禱導到稻悼道盜德得的蹬燈登等瞪凳鄧堤低滴迪敵笛狄滌翟嫡抵底地蒂第帝弟遞締顛掂滇碘點典靛墊電佃甸店惦奠澱殿碉叼雕凋刁掉吊釣調跌爹碟蝶叠諜疊丁盯叮釘頂鼎錠定訂丟東冬董懂動棟侗恫凍洞兜抖鬥陡豆逗痘都督毒犢獨讀堵睹賭杜鍍肚度渡妒端短鍛段斷緞堆兌隊對墩噸蹲敦頓囤鈍盾遁掇哆多奪垛躲朵跺舵剁惰墮蛾峨鵝俄額訛娥惡厄扼遏鄂餓恩而兒耳爾餌洱二貳發罰筏伐乏閥法琺藩帆番翻樊礬釩繁凡煩反返範販犯飯泛坊芳方肪房防妨仿訪紡放菲非啡飛肥匪誹吠肺廢沸費芬酚吩氛分紛墳焚汾粉奮份忿憤糞豐封楓蜂峰鋒風瘋烽逢馮縫諷奉鳳佛否夫敷膚孵扶拂輻幅氟符伏俘服浮涪福袱弗甫撫輔俯釜斧脯腑府腐赴副覆賦複傅付阜父腹負富訃附婦縛咐噶嘎該改概鈣蓋溉幹甘杆柑竿肝趕感稈敢贛岡剛鋼缸肛綱崗港杠篙臯高膏羔糕搞鎬稿告哥歌擱戈鴿胳疙割革葛格蛤閣隔鉻個各給根跟耕更庚羹埂耿梗工攻功恭龔供躬公宮弓鞏汞拱貢共鈎勾溝苟狗垢構購夠辜菇咕箍估沽孤姑鼓古蠱骨谷股故顧固雇刮瓜剮寡挂褂乖拐怪棺關官冠觀管館罐慣灌貫光廣逛瑰規圭矽歸龜閨軌鬼詭癸桂櫃跪貴劊輥滾棍鍋郭國果裹過哈骸孩海氦亥害駭酣憨邯韓含涵寒函喊罕翰撼捍旱憾悍焊汗漢夯杭航壕嚎豪毫郝好耗號浩呵喝荷菏核禾和何合盒貉閡河涸赫褐鶴賀嘿黑痕很狠恨哼亨橫衡恒轟哄烘虹鴻洪宏弘紅喉侯猴吼厚候後呼乎忽瑚壺葫胡蝴狐糊湖弧虎唬護互滬戶花嘩華猾滑畫劃化話槐徊懷淮壞歡環桓還緩換患喚瘓豢煥渙宦幻荒慌黃磺蝗簧皇凰惶煌晃幌恍謊灰揮輝徽恢蛔回毀悔慧卉惠晦賄穢會燴彙諱誨繪葷昏婚魂渾混豁活夥火獲或惑霍貨禍擊圾基機畸稽積箕肌饑迹激譏雞姬績緝吉極棘輯籍集及急疾汲即嫉級擠幾脊己薊技冀季伎祭劑悸濟寄寂計記既忌際妓繼紀嘉枷夾佳家加莢頰賈甲鉀假稼價架駕嫁殲監堅尖箋間煎兼肩艱奸緘繭檢柬堿鹼揀撿簡儉剪減薦檻鑒踐賤見鍵箭件健艦劍餞漸濺澗建僵姜將漿江疆蔣槳獎講匠醬降蕉椒礁焦膠交郊澆驕嬌嚼攪鉸矯僥腳狡角餃繳絞剿教酵轎較叫窖揭接皆稭街階截劫節莖睛晶鯨京驚精粳經井警景頸靜境敬鏡徑痙靖竟競淨炯窘揪究糾玖韭久灸九酒廄救舊臼舅咎就疚鞠拘狙疽居駒菊局咀矩舉沮聚拒據巨具距踞鋸俱句懼炬劇捐鵑娟倦眷卷絹撅攫抉掘倔爵桔傑捷睫竭潔結解姐戒藉芥界借介疥誡屆巾筋斤金今津襟緊錦僅謹進靳晉禁近燼浸盡勁荊兢覺決訣絕均菌鈞軍君峻俊竣浚郡駿喀咖卡咯開揩楷凱慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕顆科殼咳可渴克刻客課肯啃墾懇坑吭空恐孔控摳口扣寇枯哭窟苦酷庫褲誇垮挎跨胯塊筷儈快寬款匡筐狂框礦眶曠況虧盔巋窺葵奎魁傀饋愧潰坤昆捆困括擴廓闊垃拉喇蠟臘辣啦萊來賴藍婪欄攔籃闌蘭瀾讕攬覽懶纜爛濫琅榔狼廊郎朗浪撈勞牢老佬姥酪烙澇勒樂雷鐳蕾磊累儡壘擂肋類淚棱楞冷厘梨犁黎籬狸離漓理李裏鯉禮莉荔吏栗麗厲勵礫曆利傈例俐痢立粒瀝隸力璃哩倆聯蓮連鐮廉憐漣簾斂臉鏈戀煉練糧涼梁粱良兩輛量晾亮諒撩聊僚療燎寥遼潦了撂鐐廖料列裂烈劣獵琳林磷霖臨鄰鱗淋凜賃吝拎玲菱零齡鈴伶羚淩靈陵嶺領另令溜琉榴硫餾留劉瘤流柳六龍聾嚨籠窿隆壟攏隴樓婁摟簍漏陋蘆盧顱廬爐擄鹵虜魯麓碌露路賂鹿潞祿錄陸戮驢呂鋁侶旅履屢縷慮氯律率濾綠巒攣孿灤卵亂掠略掄輪倫侖淪綸論蘿螺羅邏鑼籮騾裸落洛駱絡媽麻瑪碼螞馬罵嘛嗎埋買麥賣邁脈瞞饅蠻滿蔓曼慢漫謾芒茫盲氓忙莽貓茅錨毛矛鉚卯茂冒帽貌貿麽玫枚梅酶黴煤沒眉媒鎂每美昧寐妹媚門悶們萌蒙檬盟錳猛夢孟眯醚靡糜迷謎彌米秘覓泌蜜密冪棉眠綿冕免勉娩緬面苗描瞄藐秒渺廟妙蔑滅民抿皿敏憫閩明螟鳴銘名命謬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌謀牟某拇牡畝姆母墓暮幕募慕木目睦牧穆拿哪呐鈉那娜納氖乃奶耐奈南男難囊撓腦惱鬧淖呢餒內嫩能妮霓倪泥尼擬你匿膩逆溺蔫拈年碾攆撚念娘釀鳥尿捏聶孽齧鑷鎳涅您檸獰凝甯擰濘牛扭鈕紐膿濃農弄奴努怒女暖虐瘧挪懦糯諾哦歐鷗毆藕嘔偶漚啪趴爬帕怕琶拍排牌徘湃派攀潘盤磐盼畔判叛乓龐旁耪胖抛咆刨炮袍跑泡呸胚培裴賠陪配佩沛噴盆砰抨烹澎彭蓬棚硼篷膨朋鵬捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片騙飄漂瓢票撇瞥拼頻貧品聘乒坪蘋萍平憑瓶評屏坡潑頗婆破魄迫粕剖撲鋪仆莆葡菩蒲埔樸圃普浦譜曝瀑期欺棲戚妻七淒漆柒沏其棋奇歧畦崎臍齊旗祈祁騎起豈乞企啓契砌器氣迄棄汽泣訖掐洽牽扡釺鉛千遷簽仟謙乾黔錢鉗前潛遣淺譴塹嵌欠歉槍嗆腔羌牆薔強搶橇鍬敲悄橋瞧喬僑巧鞘撬翹峭俏竅切茄且怯竊欽侵親秦琴勤芹擒禽寢沁青輕氫傾卿清擎晴氰情頃請慶瓊窮秋丘邱球求囚酋泅趨區蛆曲軀屈驅渠取娶齲趣去圈顴權醛泉全痊拳犬券勸缺炔瘸卻鵲榷確雀裙群然燃冉染瓤壤攘嚷讓饒擾繞惹熱壬仁人忍韌任認刃妊紉扔仍日戎茸蓉榮融熔溶容絨冗揉柔肉茹蠕儒孺如辱乳汝入褥軟阮蕊瑞銳閏潤若弱撒灑薩腮鰓塞賽三三傘散桑嗓喪搔騷掃嫂瑟色澀森僧莎砂殺刹沙紗傻啥煞篩曬珊苫杉山刪煽衫閃陝擅贍膳善汕扇繕墒傷商賞晌上尚裳梢捎稍燒芍勺韶少哨邵紹奢賒蛇舌舍赦攝射懾涉社設砷申呻伸身深娠紳神沈審嬸甚腎慎滲聲生甥牲升繩省盛剩勝聖師失獅施濕詩屍虱十石拾時什食蝕實識史矢使屎駛始式示士世柿事拭誓逝勢是嗜噬適仕侍釋飾氏市恃室視試收手首守壽授售受瘦獸蔬樞梳殊抒輸叔舒淑疏書贖孰熟薯暑曙署蜀黍鼠屬術述樹束戍豎墅庶數漱恕刷耍摔衰甩帥栓拴霜雙爽誰水睡稅吮瞬順舜說碩朔爍斯撕嘶思私司絲死肆寺嗣四伺似飼巳松聳慫頌送宋訟誦搜艘擻嗽蘇酥俗素速粟僳塑溯宿訴肅酸蒜算雖隋隨綏髓碎歲穗遂隧祟孫損筍蓑梭唆縮瑣索鎖所塌他它她塔獺撻蹋踏胎苔擡台泰酞太態汰坍攤貪癱灘壇檀痰潭譚談坦毯袒碳探歎炭湯塘搪堂棠膛唐糖倘躺淌趟燙掏濤滔縧萄桃逃淘陶討套特藤騰疼謄梯剔踢銻提題蹄啼體替嚏惕涕剃屜天添填田甜恬舔腆挑條迢眺跳貼鐵帖廳聽烴汀廷停亭庭挺艇通桐酮瞳同銅彤童桶捅筒統痛偷投頭透凸禿突圖徒途塗屠土吐兔湍團推頹腿蛻褪退吞屯臀拖托脫鴕陀馱駝橢妥拓唾挖哇蛙窪娃瓦襪歪外豌彎灣玩頑丸烷完碗挽晚皖惋宛婉萬腕汪王亡枉網往旺望忘妄威巍微危韋違桅圍唯惟爲濰維葦萎委偉僞尾緯未蔚味畏胃餵魏位渭謂尉慰衛瘟溫蚊文聞紋吻穩紊問嗡翁甕撾蝸渦窩我斡臥握沃巫嗚鎢烏汙誣屋無蕪梧吾吳毋武五捂午舞伍侮塢戊霧晤物勿務悟誤昔熙析西硒矽晰嘻吸錫犧稀息希悉膝夕惜熄烯溪汐犀檄襲席習媳喜銑洗系隙戲細瞎蝦匣霞轄暇峽俠狹下廈夏嚇掀鍁先仙鮮纖鹹賢銜舷閑涎弦嫌顯險現獻縣腺餡羨憲陷限線相廂鑲香箱襄湘鄉翔祥詳想響享項巷橡像向象蕭硝霄削哮囂銷消宵淆曉小孝校肖嘯笑效楔些歇蠍鞋協挾攜邪斜脅諧寫械卸蟹懈泄瀉謝屑薪芯鋅欣辛新忻心信釁星腥猩惺興刑型形邢行醒幸杏性姓兄凶胸匈洶雄熊休修羞朽嗅鏽秀袖繡墟戌需虛噓須徐許蓄酗敘旭序畜恤絮婿緒續軒喧宣懸旋玄選癬眩絢靴薛學穴雪血勳熏循旬詢尋馴巡殉汛訓訊遜迅壓押鴉鴨呀丫芽牙蚜崖衙涯雅啞亞訝焉咽閹煙淹鹽嚴研蜒岩延言顔閻炎沿奄掩眼衍演豔堰燕厭硯雁唁彥焰宴諺驗殃央鴦秧楊揚佯瘍羊洋陽氧仰癢養樣漾邀腰妖瑤搖堯遙窯謠姚咬舀藥要耀椰噎耶爺野冶也頁掖業葉曳腋夜液一壹醫揖銥依伊衣頤夷遺移儀胰疑沂宜姨彜椅蟻倚已乙矣以藝抑易邑屹億役臆逸肄疫亦裔意毅憶義益溢詣議誼譯異翼翌繹茵蔭因殷音陰姻吟銀淫寅飲尹引隱印英櫻嬰鷹應纓瑩螢營熒蠅迎贏盈影穎硬映喲擁傭臃癰庸雍踴蛹詠泳湧永恿勇用幽優悠憂尤由郵鈾猶油遊酉有友右佑釉誘又幼迂淤于盂榆虞愚輿余俞逾魚愉渝漁隅予娛雨與嶼禹宇語羽玉域芋郁籲遇喻峪禦愈欲獄育譽浴寓裕預豫馭鴛淵冤元垣袁原援轅園員圓猿源緣遠苑願怨院曰約越躍鑰嶽粵月悅閱耘雲鄖勻隕允運蘊醞暈韻孕匝砸雜栽哉災宰載再在咱攢暫贊贓髒葬遭糟鑿藻棗早澡蚤躁噪造皂竈燥責擇則澤賊怎增憎曾贈紮喳渣劄軋鍘閘眨柵榨咋乍炸詐摘齋宅窄債寨瞻氈詹粘沾盞斬輾嶄展蘸棧占戰站湛綻樟章彰漳張掌漲杖丈帳賬仗脹瘴障招昭找沼趙照罩兆肇召遮折哲蟄轍者鍺蔗這浙珍斟真甄砧臻貞針偵枕疹診震振鎮陣蒸掙睜征猙爭怔整拯正政幀症鄭證芝枝支吱蜘知肢脂汁之織職直植殖執值侄址指止趾只旨紙志摯擲至致置幟峙制智秩稚質炙痔滯治窒中盅忠鍾衷終種腫重仲衆舟周州洲謅粥軸肘帚咒皺宙晝驟珠株蛛朱豬諸誅逐竹燭煮拄矚囑主著柱助蛀貯鑄築住注祝駐抓爪拽專磚轉撰賺篆樁莊裝妝撞壯狀椎錐追贅墜綴諄准捉拙卓桌琢茁酌啄著灼濁茲咨資姿滋淄孜紫仔籽滓子自漬字鬃棕蹤宗綜總縱鄒走奏揍租足卒族祖詛阻組鑽纂嘴醉最罪尊遵昨左佐柞做作坐座'; 
 
 /** 
  * 默认是否正体中文: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 来保存语言状态。

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

 

锐单商城拥有海量元器件数据手册IC替代型号,打造电子元器件IC百科大全!

相关文章