正则表达式与边界符、字符类及量词符详解-CSDN博客

1.创建正则表达式：

//1.通过调用RegExp对象的构造函数
var regexp = new RegExp(/123/);
console.log(regexp);
//2.利用字面量
var rg = /123/;

// rg.test() 检测字符串是否符合该规则
console.log(rg.test(123));    //true
console.log(rg.test('abc'));     //false

2.边界符

边界符	说明
^	匹配行首的文本
$	匹配行尾的文本

ps: 如果 ^和 $ 在一起，表示必须是精确匹配。

var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));// true
console.log(rg.test('abcd'));// true
console.log(rg.test('aabcd'));// true
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false

3.字符类
（1）[]
表示有一系列字符可供选择，只要匹配其中一个。

var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy')); //true
console.log(rg.test('baby')); //true
console.log(rg.test('color')); //true
console.log(rg.test('red')); //false
console.log('---------第一组end---------');

var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
console.log(rg1.test('aa')); //false
console.log(rg1.test('a')); //true
console.log(rg1.test('b')); //true
console.log(rg1.test('c')); //true
console.log(rg1.test('abc')); //false
console.log('--------第二组end----------');

var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  -表示的是a 到z 的范围  
console.log(reg.test('a')); //true
console.log(reg.test('z')); //true
console.log(reg.test(1)); //false
console.log(reg.test('A')); //false
console.log('--------第三组end----------');


// 字符组合
var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)，10个数字，-，_ 任何一个字母返回 true  
console.log(reg1.test('a')); //true
console.log(reg1.test('B')); //true
console.log(reg1.test(8)); //true
console.log(reg1.test('-')); //true
console.log(reg1.test('_')); //true
console.log(reg1.test('!')); //false
console.log('--------第四组end--------');


// 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
var reg2 = /^[^a-zA-Z0-9_-]$/;
console.log(reg2.test('a')); //false
console.log(reg2.test('B')); //false
console.log(reg2.test(8)); //false
console.log(reg2.test('-')); //false
console.log(reg2.test('_')); //false
console.log(reg2.test('!')); //true
console.log('--------第五组end--------');

（2）量词符
用来设定某个模式出现的次数。

量词	说明
*	重复0次或更多次
+	重复1次或更多次
？	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

 // 1. * 相当于 >= 0 可以出现0次或者很多次 
var reg = /^a*$/;
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aa')); //true
console.log(reg.test('aaaaaa')); //true
console.log('-------1end-------');

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

// 3. ?  相当于 1 || 0
var reg3 = /^a?$/;
console.log(reg3.test('')); //true
console.log(reg3.test('a')); //true
console.log(reg3.test('aa')); //false
console.log(reg3.test('aaaaaa')); //false
console.log('-------3end-------');

// 4. {3} 就是重复3次
var reg4 = /^a{3}$/;
console.log(reg4.test('')); //false
console.log(reg4.test('a')); //false
console.log(reg4.test('aa')); //false
console.log(reg4.test('aaaaaa')); //false
console.log(reg4.test('aaa')); //true
console.log('-------4end-------');

// 5. {3,}  >=3
var reg5 = /^a{3,}$/;
console.log(reg5.test('')); //false
console.log(reg5.test('a')); //false
console.log(reg5.test('aa')); //false
console.log(reg5.test('aaaaaa')); //true
console.log(reg5.test('aaa')); //true
console.log('-------5end-------');

// 6. {3, 16}  大于等于3 并且 小于等于16
var reg6 = /^a{3,16}$/;
console.log(reg6.test('')); //false
console.log(reg6.test('a')); //false
console.log(reg6.test('aa')); //false
console.log(reg6.test('aaaaaa')); //true
console.log(reg6.test('aaa')); //true
console.log('-------6end-------');

Demo:简单的用户名验证
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: #aaa;
            font-size: 10px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    用户名：<input type="text" id="uname"><span id="tip"></span>

    <script>
        var ipt = document.querySelector('#uname');
        var tip = document.querySelector('#tip');

        //由a-z或A-Z或0-9或_或-组成的6~16位字符
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;
        ipt.onblur = function() {
            if (reg.test(this.value)) {
                tip.className = 'right';
                tip.innerHTML = '输入格式正确！';
            } else {
                tip.className = 'wrong';
                tip.innerHTML = '输入格式错误！';
            }
        }
    </script>
</body>

</html>

总结：

{} 量词符，表示重复次数
[] 多选一
() 表示优先级

var reg1 = /^abc{3}$/; // 它只是让c重复三次   abccc
console.log(reg1.test('abc')); //false
console.log(reg1.test('abcabcabc')); //false
console.log(reg1.test('abccc')); //true

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

js---正则表达式