JS正则表达式

1 正则表达式

案例1

    <script>
        // 1.利用RegExp对象来创建正则表达式！！！
        var regexp = new RegExp(/abc/) // 实例化出来了一个正则对象！！！

        // 2.字面量方式直接创建
        var rg = /abc/;

        // 怎么使用正则对象！！！
        // test进行搜索，搜索abc，里面是否包含（abc）
        console.log(regexp.test('abcd'))
        console.log(rg.test('abc'))
    </script>

案例 2

    <script>
        // var rg = /abc/;
        // console.log(rg.test('abc')) // true
        // console.log(rg.test('abcd')) // true
        // console.log(rg.test('adbcd')) // false
        // console.log(rg.test('aabcd')) // true

        // 边界符  ^ (以..开头)
        // var reg = /^abc/
        // console.log(reg.test('abc'));  // true
        // console.log(reg.test('abcd')); // true
        // console.log(reg.test('dabc')) // false
        // console.log(reg.test('aabc'));  // false

        // 边界符号 $(以..结尾)
        var reg1 = /abc$/;
        console.log(reg1.test('abcd')) // false
        console.log(reg1.test('abc')) // true
        console.log(reg1.test('abcc')) // false
    </script>

案例 3

    <script>
        // var reg = /abc/  []
        // var reg = /[abc]/  // 只要包含a 或者 包含b 或者包含c，都会返回true
        // console.log(reg.test('a'))
        // console.log(reg.test('b'))
        // console.log(reg.test('c'))
        // console.log(reg.test('boy'))
        // console.log(reg.test('angel'))
        // console.log(reg.test('baby'))

        // var reg1 = /^[abc]$/;  // 只有a 或者 b 或者c
        // console.log(reg1.test('aa')) // false
        // console.log(reg1.test('bb'))
        // console.log(reg1.test('a'))
        // console.log(reg1.test('b'))
        // console.log(reg1.test('c'))
        // console.log(reg1.test('abc'))

        // 只能是26个应为字母，并且是小写的！！！
        // var reg1 = /^[a-z]$/ ; // 只能是26个英文字母中某一个字母，并且是小写，才能返回true
        // console.log(reg1.test('1'))

        // var reg2 = /^[a-zA-Z0-9_-]$/ // 26个大小写英文字母，数字，_-
        // console.log(reg2.test('a'))
        // console.log(reg2.test('A'))
        // console.log(reg2.test(8))
        // console.log(reg2.test('-')) // true
        // console.log(reg2.test('!')) // false

        // 需要特别注意，如果^符号写到了[],就是取反的意思，已经不是在以。。。开头的意思了！！！
        var reg2 = /^[^a-zA-Z0-9_-]$/ // 26个大小写英文字母，数字，_-。。需要
        
        console.log(reg2.test('a'))//false
        console.log(reg2.test('A'))//false
        console.log(reg2.test(8))   //false
        console.log(reg2.test('-')) // false
        console.log(reg2.test('!')) // true
    </script>

用户输入验证案例

    <label for="username">请输入用户名:</label>
      <input type="text" id="username">
      <script>
        var reg = /^[a-zA-Z0-9_-]{6,10}$/;
        var input = document.querySelector("input");
        var label = document.querySelector("label");
        input.onblur=function(){
          if(reg.test(input.value)){
            label.innerHTML="您输入格式符合规范"
          }
          else{
            label.innerHTML="您输入的长度不符合规范"
          }
        }
      </script>