區(qū)分中英文字符的兩種方法(正則和charCodeAt())

更新時間：2010年11月05日 18:31:25 作者：

最近在為項(xiàng)目寫登錄注冊系列頁面, 表單驗(yàn)證無疑是不可缺少的部分, 在這個jQ插件滿天飛的web年代, 表單驗(yàn)證倒也不是難事. 但再好的插件, 也并不能做到十全十美

比如這次用到的我先前介紹過的Vanadium表單驗(yàn)證插件, 因?yàn)槭荅文中不存在占2個字符的字, 所以, 區(qū)分中英文字符就得自己擴(kuò)展. 本文就將介紹兩種區(qū)分中英文字符的方法: 利用正則和charCodeAt方法區(qū)分中英文字符.

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>區(qū)分中英文字符的兩種方法: 正則和charCodeAt()方法@Mr.Think</title> <style> /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em} div,h2,p,fieldset,legend,form,textarea,span,em,sub{margin:0;padding:0} input{font:12px/1.5 tahoma,arial,sans-serif;vertical-align:middle} h1{font-size:1em;font-weight:normal} h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} /*demo css*/ fieldset{padding:20px;border:1px solid #ccc;width:720px} fieldset legend{background:#a40000;color:#fff;text-align:center;padding:0 8px;margin-left:25px} fieldset label{display:block;padding-left:25px;line-height:40px} fieldset label input{padding:2px 3px;border:1px solid #888;width:200px;height:16px} fieldset label input:focus{border:1px solid blue} </style> <meta name="author" content="Mr.Think青鳥" /> <meta name="keywords" content="Mr.Think,前端開發(fā),WEB前端,前端技術(shù),前端開發(fā),WEB前端開發(fā),用戶體驗(yàn),網(wǎng)站策劃,網(wǎng)站優(yōu)化,青鳥,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鳥的博客,PHP愛好者,Bluebirdsky" /> <meta name="description" content="Mr.Think的博客,中文網(wǎng)名青鳥,現(xiàn)專注于WEB前端開發(fā),同時也是一位PHP的愛好者.愛思考,有點(diǎn)代碼潔癖,生吃過螃蟹腿,喜好肉食.這里是我記錄知識與生活瑣事的地方." /> <link rel="pingback" href="http://mrthink.net/xmlrpc.php" /> <link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" /> <script> /******************************* * @author Mr.Think * @author blog http://mrthink.net/ * @2010.10.22 * @可自由轉(zhuǎn)載及使用,但請注明版權(quán)歸屬 *******************************/ window.onload=function(){ var regExpForm=document.getElementById('regexp'); var charCodeAt=document.getElementById('charcodeat'); var entryVal=null;//輸入的值 var cnChar=null;//中文字符 var cnArr=new Array();//存放中文字符的數(shù)組 var entryLen=null;//輸入字符的長度 //通過正則區(qū)分中英文字符--Mr.Think推薦方法 regExpForm.onblur=function(){ entryVal=this.value; entryLen=entryVal.length; cnChar=entryVal.match(/[^\x00-\x80]/g);//利用match方法檢索出中文字符并返回一個存放中文的數(shù)組 entryLen+=cnChar.length;//算出實(shí)際的字符長度 alert('你輸入了 '+cnChar.length+' 個中文字符;\n它們分別是: '+cnChar+' ;\n共計輸入了 '+entryLen+' 個字符.'); } //通過charCodeAt區(qū)分中英文字符 charCodeAt.onblur=function(){ entryVal=this.value; entryLen=entryVal.length; for(var i=0;i<entryVal.length;i++){ if(entryVal.charCodeAt(i)>255){//遍歷判斷字符串中每個字符的Unicode碼,大于255則為中文 cnArr.push(entryVal[i]);//講符合條件的值插入到中文字符數(shù)組中 //注意一個小bug,push是向數(shù)組的末尾添加一個或多個元素并返回新的長度,所以未刷新的情況下反復(fù)blur會累加字符值 } } entryLen+=cnArr.length; alert('你輸入了 '+cnArr.length+' 個中文字符;\n它們分別是: '+cnArr+' ;\n共計輸入了 '+entryLen+' 個字符.'); } } </script> </head> <body> <h1><a href="http://mrthink.net/">Mr.Think的個人博客</a>@專注前端技術(shù),熱愛PHP,崇尚簡單生活.</h1> <h3>返回文章頁:<a href="http://mrthink.net/js-cn-en-character/">區(qū)分中英文字符的兩種方法: 正則和charCodeAt()方法@Mr.Think</a></h3>  <fieldset> <legend>請?jiān)谌缦卤韱沃休斎胱址簏c(diǎn)擊表單外區(qū)域</legend> <label for="regexp">通過正則表達(dá)式判斷：<input id="regexp" name="regexp" /></label> <label for="charcodeat">通過charCodeAt()方法判斷：<input id="charcodeat" name="charcodeat" /></label> </fieldset> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

正則無疑是最強(qiáng)大的判斷各種條件的方法, 最近也在研習(xí)它, 雖然枯燥, 但仍有樂趣. 用它來判斷一個雙字節(jié)的中文字符也是輕而易舉地. 而判斷中文字符, Mr.Think也是非常推薦用這種方法的, 簡單且執(zhí)行效率高.
核心代碼如下:

復(fù)制代碼代碼如下:

 
regExpForm.onblur=function(){ 
entryVal=this.value; 
entryLen=entryVal.length; 
cnChar=entryVal.match(/[^\x00-\x80]/g);//利用match方法檢索出中文字符并返回一個存放中文的數(shù)組 
entryLen+=cnChar.length;//算出實(shí)際的字符長度 
} 

第二種方法是通過charCodeAt()方法判斷Unicode碼值, 若大于255即為中文字符(為什么? 請Google ). Mr.Think并不建議用這種方法的, 它的執(zhí)行效率沒有正則高, 也沒有正則簡單.
核心代碼如下:

復(fù)制代碼代碼如下:

 
entryVal=this.value; 
entryLen=entryVal.length; 
for(var i=0;i<entryVal.length;i++){ 
if(entryVal.charCodeAt(i)>255){//遍歷判斷字符串中每個字符的Unicode碼,大于255則為中文 
cnArr.push(entryVal[i]);//講符合條件的值插入到中文字符數(shù)組中 
//注意一個小bug,push是向數(shù)組的末尾添加一個或多個元素并返回新的長度,所以未刷新的情況下反復(fù)blur會累加字符值 
} 
} 
entryLen+=cnArr.length; 