查看完整版本: [-- [转]javascript正则表达式的常用方法总结 --]

风信Java论坛 ›› javascript/html/css 讨论交流中心 ›› [转]javascript正则表达式的常用方法总结 登录 -> 注册

1F [转]javascript正则表达式的常用方法总结   jastby Post by : 2009-05-15 11:39:01.0

在介绍正则表达式语法之前先学习下面几个方法:

正则表达式方法:test(),exec()
String对象方法:match(),search(),replace(),split()

test()方法:
用法:regexp对象实例.test(字符串)
返回值:如果满足regexp对象实例中定的正则规则,返回true,否则返回false

exec()方法:
用法:regexp对象实例.exec(字符串)
返回值:如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。

这里需要备注下:上面返回值这段话关于返回数组让我迷惑了好久,因为试验下来返回的都是一个长度的数组,也就是只有一个元素.查了网上很多资料都没有相关的介绍.翻开上次买的"javascript 高级程序设计"一书,在P168有介绍(所谓反向引用,以后介绍)
另外,关于"更新全局 RegExp 对象的属性"我是这样理解的:更新RegExp对象的index和lastIndex属性,在设置了全文匹配参数后可以试验,每次匹配从上一个lastIndex开始搜索.(可以结合下面的属性和后面的例子来体会)

属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。

match()方法:
用法:string对象.match(regexp对象)
返回值:如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
备注:match和exec一个很明显的差别是设置了全文搜索参数g后它返回的数组不再是一个元素,而是所有的元素,第一个匹配结果数组基数为0,第二个为1,以此类推.
属性:同exec,match也有index,lastIndex,input三个属性,意义也同exec

exec和match差别比较的例子:

   xhtml代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
  5.     <title>Untitled Document</title> 
  6.   </head> 
  7.   <body> 
  8.   <script> 
  9.     var str="hello,caolvchong.I love maomao.I should love her forever";  
  10.     var reg=/ao/g;  
  11.     function execstr()//点一下：输出  7-9--ao      再点一下：输出   25-27--ao      再点：28-30--ao   
  12.    {  
  13.       var show=reg.exec(str);  
  14.       alert(show.index+"-"+show.lastIndex+"--"+show);//exec只匹配第一个,show是单元素数组,输出第一个匹配项.index和lastIndex分别是第一项的起始和结束位置.要让exec匹配全部,要用上面exec中举的例子,使用while循环  
  15.     }  
  16.     function matchstr()//点一下：输出  28-30--ao,ao,ao    
  17.    {  
  18.       var show=str.match(reg);  
  19.       alert(show.index+"-"+show.lastIndex+"--"+show);//match匹配全部满足正则表达式的式子.show同样是个数组,由于包含了所有匹配项目,一般有多项.javascript中输出数组名将输出全部数组中的内容.当然你也可以用for循环逐个输出各个项,数组下标从0开始.另外,这里的index和lastIndex是最后一个匹配项的起始和结束位置  
  20.     }  
  21.  </script> 
  22.   被搜索字符串:Hello,my name is caolvchong.I love maomao.  
  23.   用/ao/g正则表达式搜索.<br/> 
  24.   <input type="button" value="exec方法搜索" onclick="execstr()"> 
  25.   <input type="button" value="match方法搜索" onclick="matchstr()"> 
  26.   </body> 
  27. </html> 

search()方法:
用法:string对象.search(regexp对象)
返回值:search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1.
注意:返回的只是与正则表达式查找内容匹配的第一个子字符串的位置.所以用全局搜索参数就没有意义了.

replace()方法:
用法:string对象.replace(regexp对象|字符串,"替换的字符串")
返回值:如果设置了全文搜索,则全部满足的都将被替换;否则只替换第一个.返回替换后的字符串.
注意:replace中还可以接受字符串,但只替换第一个满足条件的字符串.

split()方法:
用法:string对象.split([分割符(可以是字符串或正则表达式[,限制输出数组个数]])
返回值:返回string对象被分割的数组
注意:string对象不会被split方法修改。分割符是可选项,可以是字符串或正则表达式对象,它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项，返回包含整个字符串的单一元素数组.最后一个选项限制输出数组个数也是可选项,该值用来限制返回数组中的元素个数。
另外,split本身就带有全文匹配的特性,所以可用可不用g参数
从上面分析也可以看出一点:正则表达式比字符串替换功能强大.下面的例子也可以看出.

例子:

   xhtml代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
  5.     <title>正则表达式split</title> 
  6.     <script> 
  7.       function split_by_str(){  
  8.         var txtnode=document.getElementById("txt");//取得div节点  
  9.         var txt=txtnode.firstChild.nodeValue;//取得文本值  
  10.         var newtxt=txt.split("AI");//用AI来划分  
  11.         for(var i=0;i<newtxt.length;i++){//输出  
  12.           alert(newtxt[i]);  
  13.         }  
  14.       }  
  15.       function split_by_regexp(){  
  16.         var txtnode=document.getElementById("txt");//取得div节点  
  17.         var txt=txtnode.firstChild.nodeValue;//取得文本值  
  18.         var regtxt=/ai/i;//也可以/ai/gi,这个不影响,split本身具有全文匹配功能  
  19.         var newtxt=txt.split(regtxt);//用AI来划分  
  20.         for(var i=0;i<newtxt.length;i++){//输出  
  21.           alert(newtxt[i]);  
  22.         }  
  23.       }  
  24.     </script> 
  25.   </head> 
  26.   <body> 
  27.     <div id="txt"> 
  28.       我AI爱ai毛毛,Ai毛毛aI爱AI我!  
  29.     </div> 
  30.     <input type="button" value="用字符串AI来划分" onclick="split_by_str();"> 
  31.     <input type="button" value="用正则表达式Ai或ai或AI或aI来划分" onclick="split_by_regexp();"> 
  32.   </body> 
  33. </html> 

例子:

   xhtml代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
  5.     <title>正则表达式replace</title> 
  6.     <style> 
  7.       .color_name{  
  8.         color:red;  
  9.         font-weight:bold;  
  10.         background:yellow;  
  11.       }  
  12.     </style> 
  13.     <script language="javascript" type="text/javascript">      
  14.       function change_name(){//替换文本函数  
  15.         var txtnode=document.getElementById("txt");//取得div节点  
  16.         var txt=txtnode.firstChild.nodeValue;//取得文本值  
  17.         var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索  
  18.         var newtxt=txt.replace(regstr,"草履虫");//全部替换  
  19.         document.getElementById("txt").firstChild.nodeValue=newtxt;//改变文本显示  
  20.       }  
  21.       function color_name(){//高亮函数  
  22.         var txtnode=document.getElementById("txt");//取得div节点  
  23.         var txt=txtnode.firstChild.nodeValue;//取得文本值  
  24.         var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索  
  25.         var arr=txt.match(regstr);//match方法取得满足匹配的所有字符串  
  26.         for(var i=0;i<arr.length;i++){//遍历满足匹配的所有字符串  
  27.           var newtxt=txt.replace(regstr,'<span class="color_name">'+arr[i]+'</span>');//替换,实际上就是添加标签,该标签高亮  
  28.           txtnode.innerHTML=newtxt;//不能用nodeValue修改,nodeValue不支持转化为html,所以用innerHTML  
  29.           }        
  30.       }  
  31.     </script> 
  32.   </head> 
  33.   <body> 
  34.   <div id="txt"> 
  35.     Hello,everyone!  
  36.     His name is tom.  
  37.     Do you know Tom?  
  38.     TOM is a boy who loves football and PC.  
  39.     So,do you want to make friends with TOm.  
  40.   </div> 
  41.   -----------------------------------------<br/> 
  42.   把上面的Tom(包括各种形式)高亮或转化为草履虫<br/> 
  43.   -----------------------------------------<br/> 
  44.   <input type="button" value="高亮TOM" onclick="color_name();"> 
  45.   <input type="button" value="转化TOM" onclick="change_name();"> 
  46.   </body> 
  47. </html> 

例子:(是根据上面exec方法改变了下)

   xhtml代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
  5.     <title>正则表达式</title> 
  6.     <script language="javascript" type="text/javascript"> 
  7.     function regexp_str(){  
  8.       var getStr=document.getElementsByTagName("input")[0].value;  
  9.       var regexpStr;  
  10.       var searchType=document.getElementsByTagName("input")[1].value;  
  11.       if(searchType==1){ //是否大小写判断  
  12.         regexpStr=/cat/i;  
  13.       }  
  14.       else{    
  15.         regexpStr=/cat/;  
  16.         }  
  17.       var arr = getStr.search(regexpStr);  
  18.       if(arr==-1){ //没有找到返回-1  
  19.         alert("输入的字符串中没有出现cat");  
  20.       }  
  21.       else{ //找到返回第一次匹配的位置  
  22.         alert("第一个匹配cat的字符串出现位置:"+arr);  
  23.       }  
  24.     }  
  25.     function checkbox_value(){  
  26.       var searchType=document.getElementsByTagName("input")[1].value;  
  27.       if(searchType==1)  
  28.         searchType=0;  
  29.       else  
  30.         searchType=1;  
  31.       document.getElementsByTagName("input")[1].value=searchType;  
  32.     }  
  33.   </script> 
  34.   </head> 
  35.   <body> 
  36.     <input type="text"> 
  37.     忽略大小写:<input type="checkbox" checked value="1" onchange="checkbox_value();"> 
  38.     <input type="button" value="查询" onclick="regexp_str();"> 
  39.   </body> 
  40. </html> 

例子:

   xhtml代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
  5.     <title>正则表达式</title> 
  6.     <script language="javascript" type="text/javascript"> 
  7.     function regexp_str(){//匹配正则表达式函数  
  8.       var getStr=document.getElementsByTagName("input")[0].value;//取得输入  
  9.       var regexpStr,arr;  
  10.       var searchType=document.getElementsByTagName("input")[1].value;//是否全文搜索  
  11.       if(searchType==1){//全文搜索  
  12.         regexpStr=/cat/g;//g,全文搜索参数  
  13.         while ((arr = regexpStr.exec(getStr)) != null){//当还没匹配完之前  
  14.         alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input);  
  15. //index是找到匹配的起始位置;lastIndex是找到匹配的末位置+1.比如这个例子:要匹配cat,而你输入的是1cat2cat3,则第一次匹配index为1,lastIndex为4.第二次匹配index为5,lastIndex为8.从这里也可以看出,lastIndex是配置了全文搜索后下一个搜索的开始位置.  
  16. //arr是输出整个数组,由于只有一个长度,输出的就是匹配的字符串  
  17. //input属性是在这里是输入的字符串,广义来说,就是被搜索的全文,比如上面举例的1cat2cat3  
  18.         }  
  19.       }  
  20.       else{ //一次匹配  
  21.         regexpStr=/cat/;  
  22.         arr = regexpStr.exec(getStr);  
  23.         alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input); //由于只是一次匹配,就不要像上面那样用循环了(不然出现匹配情况,每次始终从头开始搜索,不能达到null,陷入死循环)  
  24.         }      
  25.     }  
  26.     function checkbox_value(){//改变checkbox的值  
  27.       var searchType=document.getElementsByTagName("input")[1].value; //取得当前checkbox值  
  28.       if(searchType==1) //checkbox值为1改为0,否则改为1  
  29.         searchType=0;  
  30.       else  
  31.         searchType=1;  
  32.       document.getElementsByTagName("input")[1].value=searchType;  
  33.     }  
  34.   </script> 
  35.   </head> 
  36.   <body> 
  37.     <input type="text"> 
  38.     全文搜索:<input type="checkbox" checked value="1" onchange="checkbox_value();"> 
  39.     <input type="button" value="查询" onclick="regexp_str();"> 
  40.   </body> 
  41. </html> 

例子:(第一篇正则表达式例子)

   xhtml代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
  5.     <title>正则表达式</title> 
  6.     <script language="javascript" type="text/javascript"> 
  7.     function regexp_str(){  
  8.       var getStr=document.getElementsByTagName("input")[0].value; //取得输入值  
  9.       var regexpStr=/cat/; //建立正则对象,匹配为cat  
  10.       if(regexpStr.test(getStr)) //正则对象的test方法,后面会介绍(就是匹配返回true,否则返回false)  
  11.         alert("输入的字符串"+getStr+"包含"+regexpStr.source); //正则对象的source属性,后面会介绍(就是返回正则对象设置的匹配值)  
  12.       else  
  13.         alert("输入的字符串"+getStr+"不包含"+regexpStr.source);  
  14.     }  
  15.   </script> 
  16.  
  17.   </head> 
  18.   <body> 
  19.     <input type="text"> 
  20.     <input type="button" value="查询" onclick="regexp_str();"> 
  21.   </body> 
  22. </html> 

风信Java论坛 ›› javascript/html/css 讨论交流中心 ›› [转]javascript正则表达式的常用方法总结 登录 -> 注册

查看完整版本: [-- [转]javascript正则表达式的常用方法总结 --]
CopyRight © 2008-2009 JavaWind.Net Studio All Rights Reserved
Powered By JWind.BBS Vesion 1.0.0 Beta1 Processed in 14 ms,0 (Queries)  Gzip enabled
粤ICP备07511478号