zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    关于权限控制
    关于<!DOCTYPE>
    Oracle恢复目录的管理使用简要
    绑定变量介绍
    重做日志时间戳说明
    UNDO表空间监控说明
    Oracle rac进阶管理专家指导系列文档
    延迟块清除介绍
    ORA12500内存耗尽一例
    undo自动调优介绍
  • 原文地址:https://www.cnblogs.com/sgll-290494386/p/4000331.html
Copyright © 2011-2022 走看看