1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js正则表达式用法</title> 6 <style type="text/css"> 7 input{ 8 display: block; 9 } 10 </style> 11 <script type="text/javascript"> 12 window.onload = function(){ 13 var reg = document.getElementById('reg'); 14 var str = document.getElementById('str'); 15 var search_res = document.getElementById('search_res'); 16 var replace_res = document.getElementById('replace_res'); 17 var test_res = document.getElementById('test_res'); 18 var exec_res = document.getElementById('exec_res'); 19 var btn = document.getElementById("btn"); 20 21 obtn.onclick = function(){ 22 23 // 正则表达式 24 var regStr = reg.value; 25 // 需要进行匹配的字符串 26 var strStr = str.value; 27 28 var searchResult = search_res.value; 29 var replaceResult = replace_res.value; 30 var testResult = test_res.value; 31 var execResult= exec_res.value; 32 33 var patt1=new RegExp(regStr); 34 35 // search方法的结果 36 search_res.value = strStr.search(patt1); 37 // replace_res的结果,匹配则替换,不匹配则返回原来的字串 38 replace_res.value = strStr.replace(patt1,"替换的字符串") 39 //test 方法的结果 40 test_res.value = patt1.test(strStr); 41 //exec 方法的结果,匹配成功返回结果,不成功返回null 42 exec_res.value = patt1.exec(strStr).toString(); 43 } 44 } 45 </script> 46 </head> 47 <body> 48 正则表达式:<input id="reg" type="text"/> 49 <br/> 50 字符串:<input id="str" type="text"/> 51 <br/> 52 search结果(检索和正则表达式相匹配的子字符串,并返回子串的起始位置):<input id="search_res" type="text"/> 53 <br/> 54 replace结果(替换一个与正则表达式匹配的子串):<input id="replace_res" type="text"/> 55 <br/> 56 test结果(检测是否匹配,返回true或者false):<input id="test_res" type="text"/> 57 <br/> 58 exec结果(存放匹配的结果,不匹配则为null):<input id="exec_res" type="text"/> 59 <br/> 60 <input id="obtn" type="button" name="" value="提交"/> 61 </body> 62 </html>