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

2019-11-21 00:09:17

字體：大中小

供稿：網(wǎng)友

比如這次用到的我先前介紹過的Vanadium表單驗證插件, 因為是E文中不存在占2個字符的字, 所以, 區(qū)分中英文字符就得自己擴展. 本文就將介紹兩種區(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="http://m.survivalescaperooms.com/"/> <meta name="keywords" content="Mr.Think,前端開發(fā),WEB前端,前端技術(shù),前端開發(fā),WEB前端開發(fā),用戶體驗,網(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的愛好者.愛思考,有點代碼潔癖,生吃過螃蟹腿,喜好肉食.這里是我記錄知識與生活瑣事的地方." /> <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;//算出實際的字符長度 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>請在如下表單中輸入字符后點擊表單外區(qū)域</legend> <label for="regexp">通過正則表達式判斷：<input id="regexp" name="regexp" /></label> <label for="charcodeat">通過charCodeAt()方法判斷：<input id="charcodeat" name="charcodeat" /></label> </fieldset> </body> </html>

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

正則無疑是最強大的判斷各種條件的方法, 最近也在研習(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;//算出實際的字符長度 
} 

第二種方法是通過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; 