当前位置:首页 > javascript正则表达式的常用方法总结

javascript正则表达式的常用方法总结

点击次数:3477  更新日期:2014-05-14

在介绍正则表达式语法之前先学习下面几个方法:
正则表达式方法: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差别比较的例子:


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


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



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



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

例子:
<!DOCTYPE HTML PUBLIC &#8220;-//W3C//DTD HTML 4.01//EN&#8221; &#8220;http://www.w3.org/TR/html4/strict.dtd&#8221;>
<html>
 <head>
   <meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=GB2312&#8243; />
   <title>正则表达式split</title>
   <script>
     function split_by_str(){
       var txtnode=document.getElementById(&#8220;txt&#8221;);//取得div节点
       var txt=txtnode.firstChild.nodeValue;//取得文本值
       var newtxt=txt.split(&#8220;AI&#8221;);//用AI来划分
       for(var i=0;i<newtxt.length;i++){//输出
         alert(newtxt[i]);
       }
     }
     function split_by_regexp(){
       var txtnode=document.getElementById(&#8220;txt&#8221;);//取得div节点
       var txt=txtnode.firstChild.nodeValue;//取得文本值
       var regtxt=/ai/i;//也可以/ai/gi,这个不影响,split本身具有全文匹配功能
       var newtxt=txt.split(regtxt);//用AI来划分
       for(var i=0;i<newtxt.length;i++){//输出
         alert(newtxt[i]);
       }
     }
   </script>
 </head>
 <body>
   <div id=&#8221;txt&#8221;>
     我AI爱ai毛毛,Ai毛毛aI爱AI我!
   </div>
   <input type=&#8221;button&#8221; value=&#8221;用字符串AI来划分&#8221; onclick=&#8221;split_by_str();&#8221;>
   <input type=&#8221;button&#8221; value=&#8221;用正则表达式Ai或ai或AI或aI来划分&#8221; onclick=&#8221;split_by_regexp();&#8221;>
 </body>
</html>


例子:
<!DOCTYPE HTML PUBLIC &#8220;-//W3C//DTD HTML 4.01//EN&#8221; &#8220;http://www.w3.org/TR/html4/strict.dtd&#8221;>
<html>
 <head>
   <meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=GB2312&#8243; />
   <title>正则表达式replace</title>
   <style>
     .color_name{/*定义高亮样式:背景黄色,字体粗体红色*/
       color:red;
       font-weight:bold;
       background:yellow;
     }
   </style>
   <script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;>    
     function change_name(){//替换文本函数
       var txtnode=document.getElementById(&#8220;txt&#8221;);//取得div节点
       var txt=txtnode.firstChild.nodeValue;//取得文本值
       var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索
       var newtxt=txt.replace(regstr,&#8221;草履虫&#8221;);//全部替换
       document.getElementById(&#8220;txt&#8221;).firstChild.nodeValue=newtxt;//改变文本显示
     }
     function color_name(){//高亮函数
       var txtnode=document.getElementById(&#8220;txt&#8221;);//取得div节点
       var txt=txtnode.firstChild.nodeValue;//取得文本值
       var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索
       var arr=txt.match(regstr);//match方法取得满足匹配的所有字符串
       for(var i=0;i<arr.length;i++){//遍历满足匹配的所有字符串
         var newtxt=txt.replace(regstr,&#8217;<span class=&#8221;color_name&#8221;>&#8217;+arr[i]+&#8217;</span>&#8217;);//替换,实际上就是添加标签,该标签高亮
         txtnode.innerHTML=newtxt;//不能用nodeValue修改,nodeValue不支持转化为html,所以用innerHTML
         }      
     }
   </script>
 </head>
 <body>
 <div id=&#8221;txt&#8221;>
   Hello,everyone!
   His name is tom.
   Do you know Tom?
   TOM is a boy who loves football and PC.
   So,do you want to make friends with TOm.
 </div>
 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br/>
 把上面的Tom(包括各种形式)高亮或转化为草履虫<br/>
 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br/>
 <input type=&#8221;button&#8221; value=&#8221;高亮TOM&#8221; onclick=&#8221;color_name();&#8221;>
 <input type=&#8221;button&#8221; value=&#8221;转化TOM&#8221; onclick=&#8221;change_name();&#8221;>
 </body>
</html>


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


<!DOCTYPE HTML PUBLIC &#8220;-//W3C//DTD HTML 4.01//EN&#8221; &#8220;http://www.w3.org/TR/html4/strict.dtd&#8221;>
<html>
 <head>
   <meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=GB2312&#8243; />
   <title>正则表达式</title>
   <script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;>
   function regexp_str(){
     var getStr=document.getElementsByTagName(&#8220;input&#8221;)[0].value;
     var regexpStr;
     var searchType=document.getElementsByTagName(&#8220;input&#8221;)[1].value;
     if(searchType==1){ //是否大小写判断
       regexpStr=/cat/i;
     }
     else{  
       regexpStr=/cat/;
       }
     var arr = getStr.search(regexpStr);
     if(arr==-1){ //没有找到返回-1
       alert(&#8220;输入的字符串中没有出现cat&#8221;);
     }
     else{ //找到返回第一次匹配的位置
       alert(&#8220;第一个匹配cat的字符串出现位置:&#8221;+arr);
     }
   }
   function checkbox_value(){
     var searchType=document.getElementsByTagName(&#8220;input&#8221;)[1].value;
     if(searchType==1)
       searchType=0;
     else
       searchType=1;
     document.getElementsByTagName(&#8220;input&#8221;)[1].value=searchType;
   }
 </script>
 </head>
 <body>
   <input type=&#8221;text&#8221;>
   忽略大小写:<input type=&#8221;checkbox&#8221; checked value=&#8221;1&#8243; onchange=&#8221;checkbox_value();&#8221;>
   <input type=&#8221;button&#8221; value=&#8221;查询&#8221; onclick=&#8221;regexp_str();&#8221;>
 </body>
</html>


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


例子:(第一篇正则表达式例子)
<!DOCTYPE HTML PUBLIC &#8220;-//W3C//DTD HTML 4.01//EN&#8221; &#8220;http://www.w3.org/TR/html4/strict.dtd&#8221;>
<html>
 <head>
   <meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=GB2312&#8243; />
   <title>正则表达式</title>
   <script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;>
   function regexp_str(){
     var getStr=document.getElementsByTagName(&#8220;input&#8221;)[0].value; //取得输入值
     var regexpStr=/cat/; //建立正则对象,匹配为cat
     if(regexpStr.test(getStr)) //正则对象的test方法,后面会介绍(就是匹配返回true,否则返回false)
       alert(&#8220;输入的字符串&#8221;+getStr+&#8221;包含&#8221;+regexpStr.source); //正则对象的source属性,后面会介绍(就是返回正则对象设置的匹配值)
     else
       alert(&#8220;输入的字符串&#8221;+getStr+&#8221;不包含&#8221;+regexpStr.source);
   }
 </script>


</head>
 <body>
   <input type=&#8221;text&#8221;>
   <input type=&#8221;button&#8221; value=&#8221;查询&#8221; onclick=&#8221;regexp_str();&#8221;>
 </body>
</html>