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>

 

参考文档

posted on 2019-06-04 19:35  西风寞  阅读(494)  评论(0编辑  收藏  举报