正则表达式

// 正则表达式也是对象 作用： 提取、替换、匹配
        // 1、利用RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/) // 以//开始和结尾
        console.log(regexp);
        // 2、利用字面量创建
        var re = /777/
        console.log(re);
        // 3、 test用于测试正则表达式 返回true false
        console.log(re.test(777))
        console.log(re.test(123));

 var re = /abc/
            // 只要包含就是true
        console.log(re.test('abc')); // true
        console.log(re.test('aabc')); //true
        console.log(re.test('abcdef')); //true
        //  ^ 开头 必须以abc开头
        var reg = /^abc/
        console.log(reg.test('abc')); //true
        console.log(reg.test('abcd')); //true
        console.log(reg.test('cabc')); //false
        // 以abc开头且是结尾
        var rega = /^abc$/
        console.log('---------------');
        console.log(rega.test('abc')); //true
        console.log(rega.test('aabc')); //false
        console.log(rega.test('abcd')); //false

// [] 表示只要包含其中一个就行了
        var reg = /[abc]/ // ⚠️//里面不能有空格
        console.log(reg.test('aaauio'));
        console.log(reg.test('bnme'));
        console.log(reg.test('abmkdc'));
        console.log(reg.test('abc'));

var reg = /^[a-z]$/ //26个字母任何一个 返回true
        console.log(reg.test('a')); //true
        console.log(reg.test('p')); //true
        console.log(reg.test('1')); //false
        console.log(reg.test('G')); //false

var reg = /^[123]$/ //以123 其中一个数字为开始切未结束
        console.log(reg.test('123')); //false
        console.log(reg.test('456')); //false
        console.log(reg.test('231')); //false
        console.log(reg.test('3111')); //false
        console.log(reg.test('123')); //false

        console.log(reg.test('1')); //true
        console.log(reg.test('2')); //true
        console.log(reg.test('3')); //true
        console.log(reg.test('123')); //false
        console.log(reg.test('321')); //false 
        console.log(reg.test('213')); //false
        console.log(reg.test('111')); //false
        console.log(reg.test('222')); //false
        console.log(reg.test('333')); //false

var reg = /^[^a-zA-Z0-9]$/ // []里面的^表示取反
console.log(reg.test('!')); //true
        console.log(reg.test('a')); //false
        console.log(reg.test('8')); //false

 // * 相当于 >=0 可以出现0次或者多次
        var reg = /^a*$/
        console.log(reg.test('a')); // true
        console.log(reg.test('aaaaa')); // true
        console.log(reg.test('abcd')); // false
        console.log(reg.test('cbh')); // false
// + 相当于 >=1 可以出现1次或者多次
        var reg1 = /^a+$/
        console.log(reg1.test('bgfd')); // false
        console.log(reg1.test('aaa')); //true
        console.log(reg1.test('')); //false
// ？ 相当于 1 || 0
        var reg1 = /^a?$/
        console.log(reg1.test('bgfd')); // false
        console.log(reg1.test('aaa')); //false
        console.log(reg1.test('')); //true
// {3} 就是重复3次
        var reg1 = /^a{3}$/
        console.log(reg1.test('bgfd')); // false
        console.log(reg1.test('aaa')); //true
        console.log(reg1.test('a')); //false
        console.log(reg1.test('')); //false
 // {3,} 大于等于3
        var reg1 = /^a{3,}$/
        console.log(reg1.test('bgfd')); // false
        console.log(reg1.test('aaa')); //true
        console.log(reg1.test('a')); //false
        console.log(reg1.test('')); //false
// {3,16} 大于等于3 并且 小于等于5
        var reg1 = /^a{3,16}$/
        console.log(reg1.test('bgfd')); // false
        console.log(reg1.test('aaa')); //true
        console.log(reg1.test('a')); //false
        console.log(reg1.test('')); //false
        console.log(reg1.test('aaaaaaaaaaa')); //false

 // 量词是设定某个模式出现的次数
        var reg = /^[a-zA-Z0-9_-]{6,16}$/ //这个模式用户只能输入英文字母、数字、下划线 但是有边界符和[] 就限定了只能多选一 只能出现一个 {6,16} 多次
        console.log(reg.test('!'));
        console.log(reg.test('_-'));
        console.log(reg.test('ajasdfgtre'));
        console.log(reg.test('19'));
        console.log(reg.test('9'));

<style>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="uname">
    <span>请输入用户名</span>
    <script>
        var reg = /^[a-zA-Z0-9_-]{6,16}$/
        var uname = document.querySelector('.uname')
        var span = document.querySelector('span')
        uname.onblur = function() {
            if (reg.test(this.value)) {
                span.className = 'right'
                span.innerHTML = '用户名输入正确'
                console.log('正确的');
            } else {
                span.className = 'wrong'
                span.innerHTML = '用户名输入错误'

                console.log('输入错误');
            }
        }
    </script>
</body>

var reg = /^[abc]$/ //a || b || c
        console.log(reg.test('a')); // true
        console.log(reg.test('b')); // true
        console.log(reg.test('c')); // true
        console.log(reg.test('ab')); //false
        console.log(reg.test('abc')); //false

 var reg = /^abc{3}$/ //c重复3次
        console.log(reg.test('ccc')); //false
        console.log(reg.test('abccc')); //true
        console.log(reg.test('abc')); //false

 //小括号表示优先级 表示abc重复三次
        var reg = /^(abc){3}$/
        console.log(reg.test('abcabcabc')); //true
        console.log(reg.test('abccaacbb')); //false

正则表达式在线测试 | 菜鸟工具