javascript正则表达式的常用方法总结
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>Untitled Document</title> </head> <body> <script> var str="hello,caolvchong.I love maomao.I should love her forever"; var reg=/ao/g; function execstr(){ var show=reg.exec(str); alert(show.index+"-"+show.lastIndex+"--"+show);//exec只匹配第一个,show是单元素数组,输出第一个匹配项.index和lastIndex分别是第一项的起始和结束位置.要让exec匹配全部,要用上面exec中举的例子,使用while循环 } function matchstr(){ var show=str.match(reg); alert(show.index+"-"+show.lastIndex+"--"+show);//match匹配全部满足正则表达式的式子.show同样是个数组,由于包含了所有匹配项目,一般有多项.javascript中输出数组名将输出全部数组中的内容.当然你也可以用for循环逐个输出各个项,数组下标从0开始.另外,这里的index和lastIndex是最后一个匹配项的起始和结束位置 } </script> 被搜索字符串:Hello,my name is caolvchong.I love maomao. 用/ao/g正则表达式搜索.<br/> <input type="button" value="exec方法搜索" onclick="execstr()"> <input type="button" value="match方法搜索" onclick="matchstr()"> </body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>正则表达式split</title> <script> function split_by_str(){ var txtnode=document.getElementById("txt");//取得div节点 var txt=txtnode.firstChild.nodeValue;//取得文本值 var newtxt=txt.split("AI");//用AI来划分 for(var i=0;i<newtxt.length;i++){//输出 alert(newtxt[i]); } } function split_by_regexp(){ var txtnode=document.getElementById("txt");//取得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="txt"> 我AI爱ai毛毛,Ai毛毛aI爱AI我! </div> <input type="button" value="用字符串AI来划分" onclick="split_by_str();"> <input type="button" value="用正则表达式Ai或ai或AI或aI来划分" onclick="split_by_regexp();"> </body></html>
?
??????例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>正则表达式replace</title> <style> .color_name{/*定义高亮样式:背景****,字体粗体红色*/ color:red; font-weight:bold; background:yellow; } </style> <script language="JavaScript" type="text/javascript"> function change_name(){ //替换文本函数 var txtnode=document.getElementById("txt");//取得div节点 var txt=txtnode.firstChild.nodeValue;//取得文本值 var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索 var newtxt=txt.replace(regstr,"草履虫");//全部替换 document.getElementById("txt").firstChild.nodeValue=newtxt;//改变文本显示 } function color_name(){//高亮函数 var txtnode=document.getElementById("txt");//取得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,\'<span value="高亮TOM" onclick="color_name();"> <input type="button" value="转化TOM" onclick="change_name();"> </body></html>?
??????例子:(是根据上面exec方法改变了下)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>正则表达式</title> <script language="JavaScript" type="text/javascript"> function regexp_str(){ var getStr=document.getElementsByTagName("input")[0].value; var regexpStr; var searchType=document.getElementsByTagName("input")[1].value; if(searchType==1){ //是否大小写判断 regexpStr=/cat/i; } else{ regexpStr=/cat/; } var arr = getStr.search(regexpStr); if(arr==-1){ //没有找到返回-1 alert("输入的字符串中没有出现cat"); } else{ //找到返回第一次匹配的位置 alert("第一个匹配cat的字符串出现位置:"+arr); } } function checkbox_value(){ var searchType=document.getElementsByTagName("input")[1].value; if(searchType==1) searchType=0; else searchType=1; document.getElementsByTagName("input")[1].value=searchType; } </script> </head> <body> <input type="text"> 忽略大小写:<input type="checkbox" checked value="1" onchange="checkbox_value();"> <input type="button" value="查询" onclick="regexp_str();"> </body></html>?
?
?????? 例子:
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>正则表达式</title> <script language="JavaScript" type="text/javascript"> function regexp_str(){//匹配正则表达式函数 var getStr=document.getElementsByTagName("input")[0].value;//取得输入 var regexpStr,arr; var searchType=document.getElementsByTagName("input")[1].value;//是否全文搜索 if(searchType==1){//全文搜索 regexpStr=/cat/g;//g,全文搜索参数 while ((arr = regexpStr.exec(getStr)) != null){//当还没匹配完之前 alert(arr.index + "-" + arr.lastIndex + arr + "---"+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 + "-" + arr.lastIndex + arr + "---"+arr.input); //由于只是一次匹配,就不要像上面那样用循环了(不然出现匹配情况,每次始终从头开始搜索,不能达到null,陷入死循环) } } function checkbox_value(){//改变checkbox的值 var searchType=document.getElementsByTagName("input")[1].value; //取得当前checkbox值 if(searchType==1) //checkbox值为1改为0,否则改为1 searchType=0; else searchType=1; document.getElementsByTagName("input")[1].value=searchType; } </script> </head> <body> <input type="text"> 全文搜索:<input type="checkbox" checked value="1" onchange="checkbox_value();"> <input type="button" value="查询" onclick="regexp_str();"> </body></html>?
??????例子:(第一篇正则表达式例子)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>正则表达式</title> <script language="JavaScript" type="text/javascript"> function regexp_str(){ var getStr=document.getElementsByTagName("input")[0].value; //取得输入值 var regexpStr=/cat/; //建立正则对象,匹配为cat if(regexpStr.test(getStr)) //正则对象的test方法,后面会介绍(就是匹配返回true,否则返回false) alert("输入的字符串"+getStr+"包含"+regexpStr.source); //正则对象的source属性,后面会介绍(就是返回正则对象设置的匹配值) else alert("输入的字符串"+getStr+"不包含"+regexpStr.source); } </script> </head> <body> <input type="text"> <input type="button" value="查询" onclick="regexp_str();"> </body></html> ?
?