JavaScript 正则表达式入门学习一

 1 <form id="form1" runat="server">
 2         <div>
 3             <input type="button" id="btn" value="使用New方式创建Test的正则表达式" />
 4             <input type="button" id="btn1" value="一句话创建正则表达式" />
 5             <input type="button" id="btn2" value="匹配字符串" />
 6             <input type="button" id="btn3" value="匹配字符串并返回数组" />
 7             <input type="button" id="btn4" value="匹配字符串并返回匹配的位置" />
 8             <input type="button" id="btn5" value="匹配字符串并并替换成指定的字符串并返回字符串" />
 9             <input type="button" id="btn6" value="匹配字符串并拆分成数组" />
10 
11             <span>正则表达式的静态属性</span>
12             <br />
13             <input type="button" id="btn7" value="输入当前匹配的字符串" />
14             <input type="button" id="btn8" value="输入当前匹配的字符串的左边字符串" />
15             <input type="button" id="btn9" value="输入当前匹配的字符串的右边字符串" />
16             <input type="button" id="btn10" value="输入当前匹配的字符串的最后一个字符串" />
17 
18             <br />
19             <span>正则表达式的实例属性</span><br />
20             <input type="button" id="btn11" value="判断正则是否开启全局" />
21             <input type="button" id="btn12" value="判断正则是否开启大小写" />
22             <input type="button" id="btn13" value="判断正则是否开启多行匹配" />
23             <input type="button" id="btn14" value="获取正则的源字符串" />
24             <br />
25 
26         </div>
27     </form>

  1 <script type="text/javascript">
  2         //Dom元素加载完毕
  3         $(function () {
  4             //使用New方式创建Test的正则表达式
  5             $("#btn").click(function () {
  6                 var pattern = new RegExp("box", "i");
  7                 var str = "Box";
  8                 alert(pattern.test(str));
  9             })
 10 
 11             //一句话创建正则表达式
 12             $("#btn1").click(function () {
 13                 alert(/box/i.test('Box'))
 14             })
 15 
 16             //匹配字符串
 17             $("#btn2").click(function () {
 18                 var reg = /box/i;
 19                 alert(reg.test('This is a Box'));
 20             })
 21 
 22             //匹配字符串并返回数组
 23             $("#btn3").click(function () {
 24                 var reg = /box/ig;
 25                 var str = 'This is a box, I am a Box hahahah';
 26                 alert(str.match(reg));
 27             })
 28 
 29             //匹配字符串并返回匹配的位置
 30             $("#btn4").click(function () {
 31                 var reg = /box/ig;
 32                 var str = 'This is a box, I am a Box hahahah';
 33                 alert(str.search(reg));
 34             })
 35 
 36             //匹配字符串并返回匹配的位置
 37             $("#btn5").click(function () {
 38                 var reg = /box/ig;
 39                 var str = 'This is a box, I am a Box hahahah';
 40                 alert(str.replace(reg, "maomao"));
 41             })
 42 
 43             //匹配字符串并拆分成数组
 44             $("#btn6").click(function () {
 45                 var reg = / /ig;
 46                 var str = 'This is a box, I am a Box hahahah';
 47                 alert(str.split(reg)); //数组
 48                 alert(str.split(reg).length);//数组的长度
 49             })
 50 
 51             //输入当前匹配的字符串
 52             $("#btn7").click(function () {
 53                 var reg = /box/ig;
 54                 var str = 'This is a box, I am a Box hahahah';
 55                 reg.test(str);
 56                 alert(RegExp.input);
 57             })
 58 
 59             //输入当前匹配的字符串的前面字符
 60             $("#btn8").click(function () {
 61                 var reg = /box/ig;
 62                 var str = 'This is a box, I am a Box hahahah';
 63                 reg.test(str);
 64                 alert(RegExp.leftContext);
 65             })
 66 
 67             //输入当前匹配的字符串的右边字符
 68             $("#btn9").click(function () {
 69                 var reg = /box/ig;
 70                 var str = 'This is a box, I am a Box hahahah';
 71                 reg.test(str);
 72                 alert(RegExp.rightContext);
 73             })
 74 
 75             //输入当前匹配的字符串的最后一个字符串
 76             $("#btn10").click(function () {
 77                 var reg = /box/ig;
 78                 var str = 'This is a box, I am a Box hahahah';
 79                 reg.test(str);
 80                 alert(RegExp.lastMatch);
 81             })
 82 
 83             //判断正则是否开启全局匹配
 84             $("#btn11").click(function () {
 85                 var reg = /box/ig;
 86                 var str = 'This is a box, I am a Box hahahah';
 87                 reg.test(str);
 88                 alert(reg.global);
 89             })
 90 
 91             //判断正则是否开启大小写匹配
 92             $("#btn12").click(function () {
 93                 var reg = /box/ig;
 94                 var str = 'This is a box, I am a Box hahahah';
 95                 reg.test(str);
 96                 alert(reg.ignoreCase);
 97             })
 98 
 99             //判断正则是否开启多行匹配
100             $("#btn13").click(function () {
101                 var reg = /box/ig;
102                 var str = 'This is a box, I am a Box hahahah';
103                 reg.test(str);
104                 alert(reg.multiline);
105             })
106 
107             //获取正则的源字符串
108             $("#btn14").click(function () {
109                 var reg = /box/ig;
110                 var str = 'This is a box, I am a Box hahahah';
111                 reg.test(str);
112                 alert(reg.source);
113             })
114         });
115 
116     </script>