09-正则表达式

一、什么是正则表达式

    <!-- 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式 -->
    <!-- 作用:
      正则表达式被用来检索、替换哪些符合某个模式(规则)的文本 
      例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)
    -->
    <!-- 正则表达式的特点
      1.灵活性、逻辑性和功能性非常的强.
      2.可以迅速地用极简单的方式
      3.对于刚接触的人来说 比较晦涩难懂 比如:^\w+([-+.]\w+)*@\w+([-.\]+)*\.\w
      4.实际开发,一般都是直接复制写好的正则表达式。
      但是要求会使用正则表达式并且根据实际情况修改表达式。比如用户名:/^[a-z0-9_-]{3,16}$/
    -->

二、创建正则表达式

    <script>
        //正则表达式在js中的使用

        //利用RegExp对象来创建正则表达式

        //1.利用字面量创建正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);

        //2.利用字面量创建正则表达式
        var rg = /123/

        //3.test方法用来检测字符串是否符合正则表达式要求的规范 正确true 错误false
        console.log(rg.test(123));
        console.log(rg.test('abc'));
    </script>

三、边界符

    <script>
        //边界符
        var rg = /abc/ //正则表达式里面不需要加引号 不管是数字型还是字符串型

        // /abc/只要包含有abc这个字符串返回的都是true
        console.log(rg.test('abc'));
        console.log(rg.test('abcd'));
        var rg = /123/
        console.log(rg.test(123));

        var rg2 = /^abc/ //必须以abc开头
        console.log(rg2.test('aabc'));
        console.log(rg2.test('abc'));
        console.log('----------');
        var reg3 = /^abc$/ //$结尾  代表必须是abc这个字符串  精确匹配
        console.log(reg3.test('abc'));
    </script>

四、字符类

    <script>
        //字符类:[]表示有一系列字符开供选择 只要匹配其中一个就可以了
        var reg = /[abc]/ //包含abc其中一个就为true
        console.log(reg.test('and'));
        console.log(reg.test('baby'));
        console.log(reg.test('666'));
        console.log('------------');
        var reg1 = /^[abc]$/ //只有 a或b或c 才是true
        console.log(reg1.test('a'));
        console.log(reg1.test('b'));
        console.log(reg1.test('c'));
        console.log(reg1.test('ab'));
        console.log('------------');
        var reg2 = /^[a-z]$/ //26个字母任意一个都为true
        console.log(reg2.test('w'))
        console.log('------------');

        //字符组合
        var reg3 = /^[a-zA-Z0-9]$/ //26个字母大小写都可以和数字
        console.log(reg3.test('W'));
        console.log(reg3.test('5'));

        console.log('------------');
        var reg4 = /^[^a-zA-Z0-9_-]$/ //第一个^表示以..开头 第二个^表示取反 不能包括里面的内容
        console.log(reg4.test('!'));
    </script>

五、量次符

    <script>
        //量词符：用来设定某个模式出现的次数
        //简单理解：就是让下面的a这个字符重复多少次
        var rg = /^a$/;
        //*相当于>=0可以出现0次或者很多次
        var reg = /^a*$/
        console.log(reg.test(''));
        console.log(reg.test('a'));
        console.log(reg.test('aa'));
        console.log(reg.test('aaa'));
        console.log('------------');

        //+相当于>=1可以出现1次或者很多次
        var reg1 = /^a+$/
        console.log(reg1.test(''));
        console.log(reg1.test('a'));
        console.log(reg1.test('aa'));
        console.log('------------');

        //？ 相当于1或0
        var reg2 = /^a?$/
        console.log(reg2.test(''));
        console.log(reg2.test('a'));
        console.log(reg2.test('aa'));
        console.log('------------');


        //{3}就是重复3次
        var reg3 = /^a{3}$/
        console.log(reg3.test('a'));
        console.log(reg3.test('aaa'));
        console.log('------------');

        //{3,}大于等于重复3次
        var reg4 = /^a{3,}$/
        console.log(reg4.test('aa'));
        console.log(reg4.test('aaaaa'));
        console.log('------------');

        //{3,16}大于等于3且小于等于16
        var reg5 = /^a{3,16}$/
        console.log(reg5.test('a'));
        console.log(reg5.test('aaaaaa'));
    </script>

六、用户名验证

    <input type="text" class="name"><span>请输入用户名</span>
    <script>
        //量词是设定某个模式出现的次数
        // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[]这就限定了只能多选1
        var reg = /^[a-zA-Z0-9_-]{6,16}$/

        //{6,16}之间不要有空格
        // console.log(reg.test('aW5666'));
        var ename = document.querySelector('.name')
        var span = document.querySelector('span')
        ename.onblur = function() {
            if (reg.test(this.value)) {
                span.className = 'right'
                span.innerHTML = '正确'
            } else {
                span.className = 'wrong'
                span.innerHTML = '错误'
            }
        }
    </script>

七、括号总结

    <script>
        //中括号 字符集合 匹配方括号中的任意字符
        var reg = /^[abc]$/ //a || b || c

        //大括号 量词符 里面表示重复次数
        var re = /^abc{3}$/ //让c重复3次
        var reg1 = /^[abc]{3}$/

        //小括号 表示优先级
        var reg2 = /^(abc){3}$/ //让abc重复3次
        console.log(reg2.test('abcabcabc'));
    </script>

八、预定义类

    <script>
        //预定义类是某些常见模式的简写
        var reg = /\d/ //匹配0-9之间的任一数字相当于[0-9]
        console.log(reg.test(12));
        console.log('---------');
        var reg2 = /\D/ //匹配所有0-9以外的字符,相当于[^0-9]
        console.log(reg2.test('s'));
        console.log('---------');
        var reg3 = /\w/ //匹配任意的字母、数字和下划线 相当于[A-Za-z0-9_]
        console.log(reg3.test('a_'));
        console.log('---------');
        var reg4 = /\W/ //匹配任意的字母、数字和下划线 相当于[^A-Za-z0-9_]
        console.log(reg4.test('!'));
        console.log('---------');
        var reg5 = /\s/ //匹配空格(包括换行符、制表符、空格符等),相等于[\t\r\n\v\f]
        console.log(reg5.test('  '));
        console.log('---------');
        var reg6 = /\S/ //匹配非空格的字符,相当于[^\t\r\n\v\f]
        console.log(reg6.test(' s'));
        console.log(reg6.test(' '));
        console.log('---------');
        var reg7 = /\d\S/
        console.log(reg7.test('12'));
    </script>

九、座机号验证

    <script>
        //座机号验证: 全国座机号码 两种格式:010-12345678 或 0530-1234567
        var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        var reg1 = /^\d{3,4}-\d{7,8}$/
        console.log(reg.test('010-12345678'));
        console.log(reg1.test('0530-1234567'));
        console.log(reg.test('222'));
    </script>

十、表单验证

    <script>
        //手机号验证
        var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        console.log(reg.test('15250721431'));

        //QQ验证
        var regQQ = /^[1-9]\d{4,}$/

        //昵称验证
        var regName = /^[\u4e00-\u9fa5]{2,8}$/
        console.log(regName.test('你好'));

        //短信验证
        var regmsg = /^\d{6}$/ //6位数字
        console.log(regmsg.test('111111'));

        //密码验证
        var regPwd = /^[\w-]{6,16}$/ //^[a-zA-Z0-9_-]{6,16}$
        console.log(regPwd.test('hzp04551-_'));
    </script>

十一、正则替换

    <textarea name="" id="msg"></textarea>
    <button>提交</button>
    <div></div>
    <!-- <script>
        //替换replace
        var str = 'andy和red'

        //var newStr = str.replace('andy', 'blue')
        var newStr = str.replace(/andy/, 'blue')
        console.log(newStr);
    </script> -->

    <script>
        var text = document.querySelector('textarea')
        var btn = document.querySelector('button')
        var div = document.querySelector('div')

        // /表达式/[switch]
        //switch(也称为修饰符)按照什么样的模式来匹配 有三种值
        //g:全局匹配
        //i:忽略大小写
        //gi:全局匹配 + 忽略大小写
        btn.onclick = function() {
            var str = text.value.replace(/sb|牛马/gi, '***')
            div.innerHTML = str
        }
    </script>