<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式</title> <script> window.onload=function(){ var pattern=/d+/g; var str="hello122i45ehe9876"; var strArr=str.match(pattern); for(i=0;i<strArr.length;i++){ document.write("匹配的第"+i+"个数字是："+strArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式</title> <script> window.onload=function(){ var pattern=/[A-Za-z]*is+/g; var str="This is test regex ."; var strArr=str.match(pattern); for(i=0;i<strArr.length;i++){ document.write("匹配的第"+i+"个数字是："+strArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式</title> <script> window.onload=function(){ var mobileArr=new Array("13312345678","13712345678","18012345678","189123456789","1531234567","181123456789"); var pattern=/^1[35]3d{8}|18[019]d{8}$/; document.write("手机号列表如下：<br>"); for(i=0;i<mobileArr.length;i++){ document.write(mobileArr[i]+"<br>"); } document.write("<br>符合电信手机号规则的列表如下：<br>"); for(i=0;i<mobileArr.length;i++){ if(pattern.test(mobileArr[i])) document.write(mobileArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>分组正则表达式</title> <script> window.onload=function(){ var ipArr=new Array("98.a.3.3","192.168.1.1","172.268.3.4","10-1-2-1"); var pattern=/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/; document.write("地址列表如下：<br>"); for(i=0;i<ipArr.length;i++){ document.write(ipArr[i]+"<br>"); } document.write("<br>其中的IP地址列表如下：<br>"); for(i=0;i<ipArr.length;i++){ if(pattern.test(ipArr[i])) document.write(ipArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>后向引用正则表达式</title> <script> window.onload=function(){ var numberArr=new Array("1212","1234","1221","1231"); //var pattern=/(d)(d)21|(d)(d)34/; var pattern=/(?<n1>d)(?<n2>d)k<n2>k<n1>|(?<m1>d)(?<m2>d)k<m1>k<m2>/; document.write("数字列表如下：<br>"); for(i=0;i<numberArr.length;i++){ document.write(numberArr[i]+"<br>"); } document.write("<br>其中符合abba或abab的列表如下：<br>"); for(i=0;i<numberArr.length;i++){ if(pattern.test(numberArr[i])) document.write(numberArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>忽略大小写修饰符</title> <script> window.onload=function(){ var str="LiNuxand php,aaaLINUXaa and linux and lamp"; var pattern=/linux/ig; document.write("源串如下：<br>"+str); strArr=str.match(pattern); document.write("<br>找到的linux子串如下：<br>"); for(i=0;i<strArr.length;i++){ document.write(strArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>换行修饰符</title> <script> window.onload=function(){ var str="Linuxand php, LINUXaa and linux and lamp"; var pattern=/^linux/igm; //把每一行中以linux开头的匹配出来 document.write("源串如下：<br>"+str); strArr=str.match(pattern); document.write("<br>找到的linux子串如下：<br>"); for(i=0;i<strArr.length;i++){ document.write(strArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>贪婪模式</title> <script> window.onload=function(){ var str="<b>Linux</b> an <b>php</b> linux abc"; var pattern=/<b>.*</b>/g; document.write("源串如下：<br>"+str); strArr=str.match(pattern); document.write("<br>找到的匹配的子串如下：<br>"); for(i=0;i<strArr.length;i++){ document.write(strArr[i]+"<br>"); } } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式test方法</title> <script> window.onload=function(){ var myBtn=document.getElementById("btn"); myBtn.onclick=function(){ //获取文本框中用户输入Email的信息 var objStr=document.getElementById("email").value; //设置匹配Email的正则表达式 var rgExp=/^w+@(w+[.])*w+$/; //如果判断字符串中是否存在匹配内容，如果存在提示正确信息，否则返回错误 if(rgExp.test(objStr)){ alert("该Email地址是合法的!"); }else{ alert("该Email地址是非法的!"); } } } </script> </head> <body> <br><br><br><br><br><br><br> 请输入Email地址： <input type="text" id="email"> <input type="button" value="检测合法性" id="btn"> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式match方法</title> <script> window.onload=function(){ var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/; var result = url.match(reg); document.write(result+"<br>"); //输出 a=1, a, 1 document.write(result.index+"<br>"); //21 document.write(result.input+"<br>"); //http://www.baidu.com?a=1&b=2&c=3 } </script> </head> <body> </body> <html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式</title> <script> window.onload=function(){ var strObj="This is test page!" var reg=/is|es|ag/g; strResult=strObj.replace(reg,"**"); document.write("源串是："+strObj+"<br>"); document.write("目的串是："+strResult); } </script> </head> <body> </body></html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式</title> <script> window.onload=function(){ var re=/(d)(d)d21/; //设置正则表达式 var ostr="253212328"; //所要匹配的字符串，字符串第一个位置从0开始 var pos=ostr.search(re);//进行字符串匹配 if(pos==-1){ document.write("没有找到任何匹配"); } else{ arr=ostr.match(re);//进行match找出匹配的内容 document.write("在位置"+pos+"，找到第一个匹配，匹配内容为："); document.write(arr[0]);//输出匹配的内容 } } </script> </head> <body> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <style> span{ color:red; font-weight:bold; display:none;} </style> <script> window.onload=function(){ var myTestBtn=document.getElementById("sub"); var myTestRegex=document.getElementsByClassName("regex"); var myError=document.getElementsByClassName("error"); for(i=0;i<myTestRegex.length;i++){ myTestRegex[i].index=i; myTestRegex[i].onblur=function(){ switch(this.index){ case 0:var reg=/^w{6,15}$/; spaceError="用户名不能为空！"; regError="用户名在6~15位之间"; testResult(this,reg,this.index,spaceError,regError) break; case 1:var reg=/^w{6,15}$/; spaceError="密码不能为空！"; regError="密码6~15字母、数字、下划线"; testResult(this,reg,this.index,spaceError,regError) break; case 2: if(myTestRegex[2].value==""){ myError[2].style.display="inline"; myError[2].innerHTML="确认密码不能为空！"; myTestRegex[2].data=1; } if(myTestRegex[1].value!=myTestRegex[2].value){ myError[2].style.display="inline"; myError[2].innerHTML="密码与确认密码不相同！"; myTestRegex[2].data=1; } break; case 3:var reg=/^1[3578]d{9}$/; spaceError="手机号必须输入不能为空！"; regError="手机必须是以13，15，17，18开头的11位数字"; testResult(this,reg,this.index,spaceError,regError) break; case 4:var reg=/^w+@(w+[.])*w+$/; spaceError="邮箱不能为空！"; regError="邮箱不符合规则"; testResult(this,reg,this.index,spaceError,regError) break; } } } function testResult(object,reg,index,spaceError,regError){ var value=object.value; var result=reg.test(value); if(value==""){ myError[index].style.display="inline"; myError[index].innerHTML=spaceError; object.data=1; } else if(result){ myError[index].style.display="none"; object.data=0; }else{ myError[index].style.display="inline"; myError[index].innerHTML=regError; object.data=1; } } myTestBtn.onclick=function(){ total=0; for(i=0;i<myTestRegex.length;i++){ myTestRegex[i].onblur(); total+=myTestRegex[i].data; } if(total>0) return false; else return true; } } </script> </head> <body> <form action="reg.php" method="get"> 用 户 名: <input type="text" id="username" name="username" class="regex"> <span class="error">用户名在6~15位之间</span> <br> 密 码: <input type="password" id="pwd" name="pwd" class="regex"> <span class="error"></span> <br> 确认密码: <input type="password" id="c_pwd" name="c_pwd" class="regex"> <span class="error"></span> <br> 手 机 号: <input type="text" id="mobile" name="mobile" class="regex"> <span class="error"></span> <br> 邮 箱: <input type="text" id="email" name="email" class="regex"> <span class="error"></span> <br> <input type="submit" id="sub" value="注册"> </form> </body> </html>
<html> <head> <meta charset="UTF-8"> <title>省市二级联动</title> <script> window.onload=function(){ var selectPro="" var proArr=new Array("河南","湖北","湖南"); var arr = new Array(); arr[0]="郑州,开封,洛阳,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河" arr[1]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江" arr[2]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化" var city = document.getElementById("city"); var province=document.getElementById("province"); var result=document.getElementById("result"); var cityArr = arr[0].split(","); initCity(0); function initCity(index){ var cityArr = arr[index].split(","); for(var i=0;i<cityArr.length;i++) { city[i]=new Option(cityArr[i],cityArr[i]); } selectPro=proArr[province.value]; result.innerHTML=selectPro+"省"+cityArr[0]+"市"; } province.onchange=function(){ var index = province.selectedIndex; //将城市数组中的值填充到城市下拉框中 initCity(index); } city.onchange=function(){ result.innerHTML=selectPro+"省"+city.value+"市"; } } </script> </head> <body > 请您选择省份： <select id="province" size="1"> <option value="0">河南</option> <option value="1" >湖北</option> <option value="2" >湖南</option> </select><br> 请您选择城市： <select id="city" style="60px"> </select> <br> 您选择的结果是：<span id="result" style="color:red"></span> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>评分</title> <style> *{margin:0px; padding:0px;} #box{ width:600px; height:115px; background:pink; margin:0 auto;} #box ul {list-style:none;} #box ul li{ background:url(1.jpg) no-repeat; width:120px; height:115px; float:left; cursor:pointer;} #box ul li.active{background:url(1.jpg) 0px -115px;} </style> <script> window.onload=function(){ var myLI=document.getElementsByTagName("li"); var py=["非常差","差","一般","好","非常好",]; for(var i=0;i<myLI.length;i++){ myLI[i].index=i;//用来指出哪一个 myLI[i].onmouseover=function(){ for(var j=0;j<this.index+1;j++) myLI[j].className="active"; }; myLI[i].onmouseout=function(){ for(var j=0;j<this.index+1;j++) myLI[j].className=""; }; myLI[i].onclick=function(){ alert("您的评分分数是："+(this.index+1)+ "分，您的评语是："+py[this.index]) }; } }; </script> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>评分</title> <style> *{margin:0px; padding:0px;} #box{ width:600px; height:115px; background:pink; margin:0 auto;} #box ul {list-style:none;} #box ul li{ background:url(1.jpg) no-repeat; width:120px; height:115px; float:left; cursor:pointer;} #box ul li.active{background:url(1.jpg) 0px -115px;} #display{ width:600px; height:25px; text-align:center; margin:0px auto;} </style> <script> window.onload=function(){ var myDisplay=document.getElementById("display"); var myLI=document.getElementsByTagName("li"); var py=["非常差","差","一般","好","非常好",]; for(var i=0;i<myLI.length;i++){ myLI[i].index=i;//用来指出哪一个 myLI[i].onmouseover=function(){ for(var j=0;j<this.index+1;j++) myLI[j].className="active"; } myLI[i].onmouseout=function(){ for(var j=0;j<this.index+1;j++) myLI[j].className=""; } myLI[i].onclick=function(){ myDisplay.innerHTML="您的评分分数是："+(this.index+1)+ "分，您的评语是："+py[this.index]; } } } </script> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="display"></span> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>正则表达式</title> <style> span{ color:red; font-weight:bold; display:none;} </style> <script> window.onload=function(){ var myTestBtn=document.getElementById("sub"); var myTestRegex=document.getElementsByClassName("regex"); var myError=document.getElementsByClassName("error"); for(i=0;i<myTestRegex.length;i++){ myTestRegex[i].index=i; myTestRegex[i].onblur=function(){ switch(this.index){ case 0:var reg=/^w{6,15}$/; spaceError="用户名不能为空！"; regError="用户名在6~15位之间"; testResult(this,reg,this.index,spaceError,regError) break; case 1:var reg=/^w{6,15}$/; spaceError="密码不能为空！"; regError="密码6~15字母、数字、下划线"; testResult(this,reg,this.index,spaceError,regError) break; case 2: if(myTestRegex[2].value==""){ myError[2].style.display="inline"; myError[2].innerHTML="确认密码不能为空！"; myTestRegex[2].data=1; } if(myTestRegex[1].value!=myTestRegex[2].value){ myError[2].style.display="inline"; myError[2].innerHTML="密码与确认密码不相同！"; myTestRegex[2].data=1; } break; /* alert(myTestRegex[1].value+myTestRegex[2].value) var reg=/^w{6,15}$/; if(myTestRegex[1].value!=myTestRegex[2].value) { myError[index].style.display="inline"; myError[index].innerHTML="密码与确认密码不相同！"; this.data=1; } spaceError="确认密码不能为空！"; regError="确认密码6~15字母、数字、下划线"; testResult(this,reg,this.index,spaceError,regError) if(myTestRegex[1].value!=myTestRegex[2].value) { myError[index].style.display="inline"; myError[index].innerHTML="密码与确认密码不相同！"; this.data=1; }*/ case 3:var reg=/^1[3578]d{9}$/; spaceError="手机号必须输入不能为空！"; regError="手机必须是以13，15，17，18开头的11位数字"; testResult(this,reg,this.index,spaceError,regError) break; case 4:var reg=/^w+@(w+[.])*w+$/; spaceError="邮箱不能为空！"; regError="邮箱不符合规则"; testResult(this,reg,this.index,spaceError,regError) break; } } } function testResult(object,reg,index,spaceError,regError){ var value=object.value; var result=reg.test(value); if(value==""){ myError[index].style.display="inline"; myError[index].innerHTML=spaceError; object.data=1; } else if(result){ myError[index].style.display="none"; object.data=0; }else{ myError[index].style.display="inline"; myError[index].innerHTML=regError; object.data=1; } } myTestBtn.onclick=function(){ total=0; for(i=0;i<myTestRegex.length;i++){ myTestRegex[i].onblur(); total+=myTestRegex[i].data; } if(total>0) return false; else return true; } } </script> </head> <body> <form action="reg.php" method="get"> 用 户 名: <input type="text" id="username" name="username" class="regex"> <span class="error">用户名在6~15位之间</span> <br> 密 码: <input type="password" id="pwd" name="pwd" class="regex"> <span class="error"></span> <br> 确认密码: <input type="password" id="c_pwd" name="c_pwd" class="regex"> <span class="error"></span> <br> 手 机 号: <input type="text" id="mobile" name="mobile" class="regex"> <span class="error"></span> <br> 邮 箱: <input type="text" id="email" name="email" class="regex"> <span class="error"></span> <br> <input type="submit" id="sub" value="注册"> </form> </body> </html>