【JavaScript】正则表达式-元字符-字符类_javascript 的元字符我们可以分为什么-CSDN博客

本文链接：https://blog.csdn.net/JackCao_Grass/article/details/129999537

元字符

为了方便记忆和学习，我们对众多的元字符进行了分类：

边界符（表示位置，开头和结尾，必须用说明开头，用什么结尾）
量词（表示重复次数）
字符类（比如 \d 表示0 ~9）

(1) [ ] 匹配字符集合

后面的字符串中只要包含 abc 中任意一个字符，都返回 true。

// 只要中括号里面的任意字符出现都返回为true
console.log(/[abc]/.test('andy')) // true
console.log(/[abc]/.test('baby')) // true
console.log(/[abc]/.test('cry')) // true
console.log(/[abc]/.test('die')) // false

（1）[ ] 里面加上 - 连字符

使用连字符 - 表示一个范围

console.log(/^[a-z]$/.test('c')) // true

比如
- [a-z] 表示 a 到 z 26个英文字母都可以
- [a-zA-Z] 表示大小写都可以
- [0-9] 表示 0~9 的数字都可以
认识下：

腾讯QQ号： ^[1-9][0-9]{4,}$  (腾讯QQ号从10000开始)

(1) [ ] 里面加上 ^ 取反符号

比如：
- [^a-z] 匹配除了小写字母以外的字符
- 注意要写到中括号里面

（2）. 匹配换行符之外的任何单个字符

总结：

1.字符类 .（点）代表什么意思？

匹配除换行符之外的任何单个字符

2.字符类 [] 有若干代表什么意思？

[abc] 匹配abc其中的任何单个字符
[a-z] 匹配26个小写英文字母其中的任何单个字符
[^a-z] 匹配除了26个小写英文字母之外的其他任何单个字符

案例

需求：用户名要求用户输入英文字母，数字，下划线或者短横线组成，并且用户名长度为 6~16位
分析：
（1）首先准备号这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
（2）当表单失去焦点就开始验证
（3）如果符合正则规范，则让后面的span标签添加 right 类
（3）如果不符合正则规范，则让后面的span标签添加 error 类

<!DOCTYPE html>
<html lang="zh-CN">

<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>03-验证用户名案例</title>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<!-- 需求：用户名要求用户输入英文字母，数字，下划线 或者 短横线 组成，并且用户名长度为 6~16位
分析：
（1）首先准备号这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
（2）当表单失去焦点就开始验证
（3）如果符合正则规范，则让后面的span标签添加 right 类
（3）如果不符合正则规范，则让后面的span标签添加 error 类 -->

<body>
    <input type="text" />
    <span></span>

    <script>
        const reg = /^[a-zA-Z0-9-_]{6,16}$/
        const input = document.querySelector('input')
        const span = document.querySelector('span')
        input.addEventListener('blur', function () {
            // console.log(reg.test(this.value))
            if (reg.test(this.value)) {
                span.innerHTML = '输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '请输入6~16位的英文数字下划线'
                span.className = 'error'
            }
        })
    </script>
</body>

</html>