JavaScript 正则表达式入门学习一

<form id="form1" runat="server">
        <div>
            <input type="button" id="btn" value="使用New方式创建Test的正则表达式" />
            <input type="button" id="btn1" value="一句话创建正则表达式" />
            <input type="button" id="btn2" value="匹配字符串" />
            <input type="button" id="btn3" value="匹配字符串并返回数组" />
            <input type="button" id="btn4" value="匹配字符串并返回匹配的位置" />
            <input type="button" id="btn5" value="匹配字符串并并替换成指定的字符串并返回字符串" />
            <input type="button" id="btn6" value="匹配字符串并拆分成数组" />

            <span>正则表达式的静态属性</span>
            <br />
            <input type="button" id="btn7" value="输入当前匹配的字符串" />
            <input type="button" id="btn8" value="输入当前匹配的字符串的左边字符串" />
            <input type="button" id="btn9" value="输入当前匹配的字符串的右边字符串" />
            <input type="button" id="btn10" value="输入当前匹配的字符串的最后一个字符串" />

            <br />
            <span>正则表达式的实例属性</span><br />
            <input type="button" id="btn11" value="判断正则是否开启全局" />
            <input type="button" id="btn12" value="判断正则是否开启大小写" />
            <input type="button" id="btn13" value="判断正则是否开启多行匹配" />
            <input type="button" id="btn14" value="获取正则的源字符串" />
            <br />

        </div>
    </form>

<script type="text/javascript">
        //Dom元素加载完毕
        $(function () {
            //使用New方式创建Test的正则表达式
            $("#btn").click(function () {
                var pattern = new RegExp("box", "i");
                var str = "Box";
                alert(pattern.test(str));
            })

            //一句话创建正则表达式
            $("#btn1").click(function () {
                alert(/box/i.test('Box'))
            })

            //匹配字符串
            $("#btn2").click(function () {
                var reg = /box/i;
                alert(reg.test('This is a Box'));
            })

            //匹配字符串并返回数组
            $("#btn3").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                alert(str.match(reg));
            })

            //匹配字符串并返回匹配的位置
            $("#btn4").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                alert(str.search(reg));
            })

            //匹配字符串并返回匹配的位置
            $("#btn5").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                alert(str.replace(reg, "maomao"));
            })

            //匹配字符串并拆分成数组
            $("#btn6").click(function () {
                var reg = / /ig;
                var str = 'This is a box, I am a Box hahahah';
                alert(str.split(reg)); //数组
                alert(str.split(reg).length);//数组的长度
            })

            //输入当前匹配的字符串
            $("#btn7").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(RegExp.input);
            })

            //输入当前匹配的字符串的前面字符
            $("#btn8").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(RegExp.leftContext);
            })

            //输入当前匹配的字符串的右边字符
            $("#btn9").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(RegExp.rightContext);
            })

            //输入当前匹配的字符串的最后一个字符串
            $("#btn10").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(RegExp.lastMatch);
            })

            //判断正则是否开启全局匹配
            $("#btn11").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(reg.global);
            })

            //判断正则是否开启大小写匹配
            $("#btn12").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(reg.ignoreCase);
            })

            //判断正则是否开启多行匹配
            $("#btn13").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(reg.multiline);
            })

            //获取正则的源字符串
            $("#btn14").click(function () {
                var reg = /box/ig;
                var str = 'This is a box, I am a Box hahahah';
                reg.test(str);
                alert(reg.source);
            })
        });

    </script>