对JavaScript繁简字切换的小改进

繁简即时切换脚本属于比较普遍常见的脚本，多应用于港澳台的公司企业网站上，一些面向大陆服务的站点也提供正体、简体的页面切换（“正体”一词乃台湾方面的新说法）。在前人梳理的经验上，推荐这个 StranBody 方案。此方案是从客户端出发而考虑，是直接基于 JavaScript 对浏览器 DOM 内容修改的纯客户端方案，因此具有不依赖服务端转换，减轻服务端运算符合等的好处。当然，如果用户关闭掉 JavaScript 脚本，就无法使用正体、简体切换的功能了。直接使用该脚本毫无问题，亦兼容 IE & FireFox 浏览器，但美中不足的是，笔者个人感觉代码写得比较乱，当然这乃是较早期的实现，对JS认识不如今天的应用是可以理解的。现在恰好客户需求，笔者正好可将此代码派上项目用场，加上笔者自身亦一时技痒，就打算重构一番这个早期的繁简切换脚本，多练练手。

~~观察在线演示地址代码IE6 & FF 3.0/Ext Core 3.2下通过，。~~ edit：2012.12.27 该文链接已失效

代码约定，true 的话表示正体中文（繁体中文），反之 false 就是简体中文。并且需要说明的是，当然脚本以默认“简体中文”的网站为假设，如果本来是正体中文的，就需要按如下修改脚本的原始值：

$$.big5.language = true; // true表示正体中文，反之false就是简体中文

经过重构，该模块的命名空间是 $$.big5.*（请注意命名空间的设置：if(typeof $$ == 'undefined')$$={};）。使用方法很简单，执行 init() 对其送入元素 id 或元素对象即可。该元素就是用来切换的按钮。

$$.big5.init('StranLink'); // 修改StranLink为你的元素标识

繁、简切换的原理在是，先准备一“繁、简”对照表，如私有成员“ var 简化中文 = '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺……”和“var 正体中文 = '啊阿埃挨哎唉哀皚癌藹矮艾礙愛隘鞍氨安……”，他们之间是一一对应的，知道任意一种字符的索引即可查得另一种字符的编码；然后，字符串的索引如何怎么查得呢？可通过字符串的indeOf()。charAt()方法返回指定索引位置处的字符。这样，凭借此对照表，按照顺序逐一替换为他种语言。以上的实现编码在 $$.big5.traditionalized() 及 $$.big5.simplized()方法中。

如何得到那些要的翻译文本？遍历 DOM 是前台开发中经常使用的一点，一般而言通过递归遍历 DOM。这一次，我们又是从 document.body 收集需要转换的内容。虽然说的比较简单，但是实际还有不少需要考虑的细节问题。先看看这个递归函数。

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

不知看官有没有稍加注意，我们采用 arguments.callee(node);的技巧实现匿名递归。

控制切换的UI是$$.big5.el，类型是 Ext.Element。我是为了避免烦恼的跨浏览器问题，使用上了 Ext Core 库。如果需要通用，用户可以很快的修改通过的 w3c 方案，不算太困难。Ext Core 方案如下：

$$.big5.el = Ext.get(el).on('click', function(e, el){$$.big5.language = !$$.big5.language;// 反相器toggle($$.big5.language);StranBody(document.body); });

cookie 是记录在客户端的可控对象，可以透过 JavaScript 编程来创建和取回 cookie 的值。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。在本脚本中我们使用 Cookie 来记录用户选择了那一种语言，那么下一次客户离开页面再访问的时候，仍然可以转换到上一次选择的结果，无须用户手动设置。

设置Cookie，当按钮选择后发生。

// Sys.Big5.js 第53行 setCookie("ft" + window.location.hostname.replace(//./g, ""), b, 7);

每一次运行该脚本时都会执行下一行语句。如果用户从未选择过“繁体/简体”，那么这个方法总是返回 null 值。

// Sys.Big5.js 第96行 var c = getCookie("ft" + window.location.hostname.replace(//./g, ""));

至此，我们就对 StranBody 基本问题介绍了一遍。如果是原本的 StranBody 方案，那么到这儿就算结束了，——可如果马上结束就失去了本文的意义，尚有后面改进内容的介绍——

首先是重构后焕然一新的代码，从原来的全局变量重构为 JS 单例模式。表面上是这样，但其中最大变化的一点，可以说集中在 toggle() 函数中，从而避免源码混乱的状态管理。

/*** @param {Boolean} b True正体中文，false，简化中文*/ function toggle(b){$$.big5.fn = b === true ? $$.big5.traditionalized : $$.big5.simplized;$$.big5.el.update(b === true ? "-》简体中文" : "-》繁体中文");setCookie("ft" + window.location.hostname.replace(//./g, ""), b, 7);// 触发事件if(b === true){$$.big5.onBig5();}else{$$.big5.onSimpleChinese();} }

JS的函数是第一要员，可灵活控制之。我们的$$.big5.fn正是这一种体现，无论是繁转简抑或是简转繁，反正调用$$.big5.fn即可！

其次，加入了事件$$.big5.onBig5、$$.big5.onSimpleChinese，那么等于增加了对图片和动画处理的手段了。我们重写这个两个方法就可以加入自定义的事件；还有依据浏览器的userLanguage自动选择繁体：

/*** 默认是否正体中文：true为正体；false简体。* ASP版本：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;}}

有人不免要问，为什么不写成属性而是方法。因为方法的写法可避免在服务端下JS的报错。

最后，就是一个对 StranBody 的小 Patch 修正了，虽然属于别人的劳动成果，但既然公开了，应该不碍事吧！？还是可以借用一下的^_^，原文如下：

对上面的程序进行测试，可以发现，对于有行内框架(IFRMIE)内的内容没有转换，对脚本输出文本即alert. confirrmn和prompt函数输出的内容也末作转换，还有网页标题也末作转换，这显然是很不完美的事。于是，经过一番探索，终于找到很好的办法解决了这两个问题。

在此基础我修改了一下，就是函数hijackFn()：

总结今次学习过程，可以明白繁简翻译、Cookie 控制、RegExp.exec()等等的细节问题，从中收获不少。

在线例子：http://playen.ajaxjs.com/playen/blog/big5/

edit：2011-05-29 14:35:32重新上传，修正了例子的链接。

参见：唐乾林，牟向宇，《JavaScript在网站中繁简字体转换的应用》。

对JavaScript繁简字切换的小改进相关推荐

Ubuntu Fcitx 繁简输入切换
安装输入法 apt-get install fcitx apt-get install fcitx-table-wbpy 安装输入法之后,状态栏会多一个小键盘(有时候要重启电脑的) 默认情况下如果只能 ...
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰"繁体中文").传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语 ...
蚪侠-远程泛目录[泛域名+泛目录+泛内页]-[代码+汉字]干扰-字体繁简切换-蜘蛛欺骗-主动推送_镜像版-V25版
程序应用在: 租用高权重站点的[目录]或[二级域名]来做优化的. 只需将客户端文件上传至租用的目录或二级域名下即可:然后在我们自己的服务器上搭建服务端,这样客户端就会远程实时调用服务端的内容,服务端可 ...
蚪侠-远程泛目录[泛域名+泛目录+泛内页]-[代码+汉字]干扰-字体繁简切换-蜘蛛欺骗-主动推送_模板版-V25版
程序应用在: 租用高权重站点的[目录]或[二级域名]来做优化的. 只需将客户端文件上传至租用的目录或二级域名下即可:然后在我们自己的服务器上搭建服务端,这样客户端就会远程实时调用服务端的内容,服务端可 ...
Android多语言支持以及繁简转换
Android多语言支持以及繁简转换 Android自身就带有多语言支持.前一段时间需要做一个同时支持繁简体的APP,经过简单的搜索和探索,轻松解决了问题.并且写了一个简单的繁体到简单的转换类.分享给 ...
网站繁简切换的JS遇到的一个BUG
公司打算进入台湾市场,最近开发了繁体版本的网站,数据库里的信息全是简体,除了网页上固定的文字手动翻译了,文章内容标题都不是繁体. 于是在网上找了一段比较流行的繁简切换的JS实现了,不过后来却发现,有些 ...
win10Oracle繁体乱码,win10系统切换繁简字体出现乱码的解决方法
win10系统内置微软的输入法,工作中经常会遇到有些软件因为系统繁简不兼容而出现乱码,让人感到很疑惑,有什么办法修复?其实这种问题要解决也简单,下面小编和大家说说win10系统切换繁简字体出现乱码的解 ...
php实现繁简字体转换jq繁体字简体字切换实现
1.新建文件tw_cn.js var defaultEncoding = 2; // 网站默认语言,1: 繁體中文, 2: 简体中文 var translateDelay = 0; //延迟时间,若不 ...
【2021】Linux版搜狗输入法关闭繁简切换
说明 ctrl+thift+F 这个快捷键是jetbrain套,如idea,pycharm,goland的全局搜索的快捷键. 但linux版的搜狗输入法的繁简切换快捷键也是这个,但在输入法的设置中没找 ...

对JavaScript繁简字切换的小改进

对JavaScript繁简字切换的小改进相关推荐

最新文章

热门文章