位置: 编程技术 - 正文
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招(javascript点击切换div内容)
编辑：rootadmin推荐整理分享JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招(javascript点击切换div内容)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript点击切换div内容,使用js实现内容的切换,javascript切片,javascript切片,javascript快速切换图片闪烁,javascript切片,javascript切片,js 切换页面,内容如对您有帮助，希望把文章链接给更多的朋友！
一般商业网站都有一个语言的需求，就是为了照顾使用正体中文的国人，会特地提供一个切换到正体中文的选项（或曰“繁体中文”）。传统做法是在服务端完成的，即通过某些控件或者过滤器转换文本语言。这里笔者介绍一种简单可行的方法，不是在服务端而是利用前端的 JavaScript 就可以切换正体中文。
大概六年前我还专门写过这议题的博文，这篇也是奠基在那篇文章（旧文也是参考了一高手代码）之上，《对 JavaScript 繁简字切换的小改进》。时过境迁，有必要把代码进行更新一下——以前的太稚嫩啦。
如下图，我们把切换按钮放在页脚（当然你也可以放置在“导航”或者其他更醒目的位置）。
由于页面假设设定均使用 Unicode 字符集，于是一般不用考虑 GB/BIG5 字符集问题，伟大的 Unicode 字符集已经涵盖了繁体字的字符了（UTF-8 编码）。
怎么在页面调用这个功能呢？很简单，首先引入下面 Js（注意还依赖 Function.prototype.delegate()， 下面会提及）：
然后绑定按钮事件，我们简单地使用 onclick 绑定来全局函数 window.toChinese(el)、window.toSimpleChinese(el)。el 是按钮元素。
js 代码中比较长的两个字符串变量分别是简体中文和繁体中文，他们之间的切换没有什么神奇之处，只是所有文本经过这些变量一一对应即可。当然这里只是常用的繁简对应，而且是机械的，有些特殊的翻译需要联系上下文的，那种高级转换不在此讨论之列。
首先我们看看变量函数 translate，执行它会通过递归遍历完整个 DOM（可以说比较笨的方法）
转换 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.prototype.delegate() 方法如下。
繁简的转换基本如此了。值得一提的是，浏览器其实替我们识别语言环境的变量，主要是 navigator.userLanguage || navigator.language。这个变量在服务端也可以获取，头读取：Request.ServerVariables("http_accept_language")。
最后我们还通过 cookie 来保存语言状态。
下面给大家介绍下三步让你的网站支持简体繁体切换
不少网站为了更好地照顾不同用户使用简体/繁体的阅读习惯，会提供简体繁体两种版本字体切换，提高用户体验。例如hexo虽然作者是来自台湾的，但是hexo的官网不仅提供了适合台湾同胞阅读的繁体中文版，还提供了适合我们内地同胞阅读的简体中文版，照顾了我们这些习惯使用简体读写的大陆用户，hexo得到了不少内地忠实粉丝追捧。同样，我们也可以提供繁体版来照顾那些使用繁体字的台湾、香港同胞阅读习惯。
具体实现：
首先，点击这里右键另存下载简繁字体切换所需的 tw_cn.js 文件，上传到自己的网站空间。其次，修改模板，在你想要显示简繁转换按钮的地方加上下面一段代码，正常情况添加到 header.php 或者 siderbar.php 就可以了。
最后，在footer.php添加下面代码，记得更改 cookieDomain 这一项。
这就基本完成了简体繁体切换功能,不管你是hexo，jelly，Octopress等静态博客，还是wordpress，typecho，emlog，Z-Blog等动态的，都可以用上。具体的演示效果可以点击我博客底部简体中文切换字体,至于简体繁体切换按钮嘛，文字和样式可以按个人喜好自行更改。
JavaScript过滤字符串中的中文与空格方法汇总 js如何过滤字符串里中文或空格呢？方法有很多种，我们可以使用替换与正则表达式来实现，本文向大家介绍两个简单的例子，感兴趣的朋友可以参考一
Bootstrap每天必学之日期控制 一个成熟的框架，日期控制是少不了的，在网上也有很多日期控制可以选择，而主框架用了bootstrap，日期控制也当前要用它自己的，控件地址：
JavaScript实现字符串与日期的互相转换及日期的格式化 字符串转日期、日期转字符串//--/***字符串转时间（yyyy-MM-ddHH:mm:ss）*result（分钟）*/stringToDate:function(fDate){varfullDate=fDate.split("-");returnnewDate(fullDate[0
上一篇：javascript特殊日历控件分享(js特殊字符有哪些)
下一篇：JavaScript过滤字符串中的中文与空格方法汇总(js过滤字符串中的特殊字符)
