JS高级（四）：正则表达式、常见的特殊字符、案例、预定义类、正则替换

一、正则表达式

1.它有什么作用？

1、匹配字符，如昵称只可以输入中文
2、替换字符，如过滤敏感词
3、提取字符，如搜索时输入“手机”会出现“手机壳”，“手机充电器”等

实际开发中，一般都是直接复制已经写好的正则表达式，因为不太好写

2.创建正则表达式

正则表达式创建时不要加引号，不管是数字型还是字符串型

（1）利用RegExp对象来创建

let regexp = new RegExp(/123/);
console.log(regexp);
console.log('/123/');
1
2
3

（2）利用字面量创建

let regexp = /123/;
console.log(regexp );
1
2

3.测试正则表达式

使用test()方法来测试字符串是否符合正则表达式

var regexp = /123/;  //是否包含123
console.log(regexp.test(123)); //true
console.log(regexp.test('123'));  //true
console.log(regexp.test(1234567));  //true
console.log(regexp.test(12));  //false
console.log(regexp.test('abc'));  //false
1
2
3
4
5
6

二、特殊字符

可以参考：MDN正则表达式

1.^和$匹配开头和结尾

普通情况：/abc/，只要包含abc返回的都是true

var reg = /abc/;  //只要包含abc返回的都是true
console.log(reg.test('abc')); //true
console.log(reg.test('abcd'));//true
console.log(reg.test('aabcd'));//true
1
2
3
4

/^abc/必须以abc开头才为true：

var reg = /^abc/;  //必须以abc开头才为true
console.log(reg.test('abc')); //true
console.log(reg.test('abcd')); //true
console.log(reg.test('aabcd')); //false
1
2
3
4

/^abc$/精确匹配，必须是abc这三个字符才为true

var reg = /^abc$/;  //精确匹配，必须是abc才为true
console.log(reg.test('abc')); //true
console.log(reg.test('abcd')); //false
console.log(reg.test('aabcd')); //false
console.log(reg.test('abcabc')); //false
1
2
3
4
5

2.[ ]字符类

[ ]表示有一系列字符可供选择，只要匹配其中一个就可以
/[abc]/,只要包含abc其中一个字符，就true

var reg = /[abc]/; //只要包含abc其中一个字符，就true
console.log(reg.test('andy'));//true
console.log(reg.test('baby'));//true
console.log(reg.test('color'));//true
console.log(reg.test('dj'));//false
1
2
3
4
5

/^[abc]$/精确匹配，必须是a或者b或者c其中一个才为true

var reg = /^[abc]$/; //精确匹配，必须是a或者b或者c其中一个才为true
console.log(reg.test('aa')); //false
console.log(reg.test('a')); //true
console.log(reg.test('b')); //true
console.log(reg.test('c')); //true
console.log(reg.test('abc')); //false
1
2
3
4
5
6

/^[a-z]$/精确匹配，必须是26个英文字母其中一个才为true，-可以作为范围限定

var reg = /^[a-z]$/; //精确匹配，必须26个英文字母其中一个才为true
console.log(reg.test('ss')); //false
console.log(reg.test('a')); //true
console.log(reg.test('f')); //true
console.log(reg.test('aafasd')); //false
console.log(reg.test('A')); //false
console.log(reg.test('1')); //false
1
2
3
4
5
6
7

/^[a-zA-Z0-9_-]$/精确匹配，大小写字母，0-9数字，还有后面的字符，只要是其中一个就为true，其中一个噢

var reg = /^[a-zA-Z0-9_-]$/; 
//精确匹配，大小写字母，0-9数字，还有后面的字符，只要是其中一个就为true
console.log(reg.test(7)); //true
console.log(reg.test('F')); //true
console.log(reg.test('t')); //true
console.log(reg.test('-')); //true
console.log(reg.test('34234')); //false
console.log(reg.test('@')); //false
1
2
3
4
5
6
7
8

/^[^a-zA-Z0-9_-]$/如果[]里面的内容前面加了^，那么意思是取反，精确匹配，除了大小写字母，0-9数字，还有后面的字符，其他的其中一个就为true，

var reg = /^[^a-zA-Z0-9_-]$/;
 //如果[]里面的内容前面加了`^`，那么意思是取反
 //精确匹配，除了大小写字母，0-9数字，还有后面的字符，其他的其中一个就为true，
 console.log(reg.test(7)); //false
 console.log(reg.test('F')); //false
 console.log(reg.test('t')); //false
 console.log(reg.test('-')); //false
 console.log(reg.test('34234')); //这个依然是false，因为不是其中一个
 console.log(reg.test('@')); //true
1
2
3
4
5
6
7
8
9

3.量词符

设定某个模式出现的次数

/^a*$/出现>=0个a为true
/^a+$/出现>=1个a为true
/^a?$/出现0或1个a为true

var reg = /^a*$/;  //出现>=0个a为true
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aaaa')); //true

var reg = /^a+$/;  //出现>=1个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //true
console.log(reg.test('aaaa')); //true

var reg = /^a?$/;  //出现1或0个a为true
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aaaa')); //false
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/^a{3}$/出现3个a为true
/^a{3,}$/出现>=3个a为true
/^a{3,6}$/出现3~6个a为true
中间不要有空格

var reg = /^a{3}$/;  //出现3个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aaaa')); //false
console.log(reg.test('aaa')); //true

var reg = /^a{3,}$/;  //出现>=3个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aaaa')); //true
console.log(reg.test('aaa')); //true

var reg = /^a{3,6}$/;  //出现3~6个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aaaa')); //true
console.log(reg.test('aaa')); //true
console.log(reg.test('aaaaaaaaaa')); //false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

设定某个模式出现的次数
/^[a-zA-Z0-9_-]{6,16}$/，在这些东西里面，出现其中的6~16个为true

var reg = /^[a-zA-Z0-9_-]{6,16}$/;
//在这些东西里面，出现其中的6~16个为true
console.log(reg.test('zzy_008'));//true
console.log(reg.test('zzy-007'));//true
console.log(reg.test('zzy!007'));//false
1
2
3
4
5

三、用户名表单验证

这个比较简单，就不解释了

<input type="text"> <span>请输入用户名span>
<script>
    let input = document.querySelector('input');
    let span = document.querySelector('span');
    let reg = /^[a-zA-Z0-9_-]{6,16}$/;
    
    input.onblur = function() {
        let result = reg.test(input.value);
        if(result) {
            span.className = 'right';
            span.innerHTML = '用户名格式正确！'
        }else {
            span.className = 'wrong';
            span.innerHTML = '用户名格式错误！'
        }
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

四、括号总结

中括号：字符集合，匹配方括号中的任意字符

var reg = /^[a-zA-Z0-9_-]$/;
1

大括号：量词符，里面表示重复的次数或范围

var reg = /^abc{3}$/;  只有abccc返回true
var reg = /^[a-zA-Z0-9_-]{3,7}$/;
1
2

小括号：表示优先级

var reg = /^(abc){3}$/;  只有abcabcabc返回true
1

在线测试工具：https://c.runoob.com/front-end/854/

五、预定义类

预定义类就是某些常见模式的语法糖罢了

案例：座机号码验证：010-12345678或0530-1234567
正则中的或用 | 来表示，不能有空格。
有^$时，[0-9]是多选一，长度为3，没有^$就是只要是数字就行，就没有长度限制了

//座机号码验证：010-12345678或0530-1234567
//正则中的或用 | 来表示，不能有空格
let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
//let reg = /^[0-9]{3}-[0-9]{8}|[0-9]{4}-[0-9]{7}$/;
console.log(reg.test('010-123456')); //false
console.log(reg.test('0230-12345678')); //false
console.log(reg.test('0510-1234567')); //true
1
2
3
4
5
6
7

六、正则替换

replace()可以实现字符串替换操作，替换的参数可以是字符串或正则表达式。
但是它有多种玩法，第一个参数可以是字符串或正则表达式；第一个参数如果不写g或gi的话，就只替换第一个，写了就全部替换成第二个参数，第二个参数可以是字符串，也可以是个函数。

let str = 'zzy和dj和dj和djj';
let newStr1 = str.replace('dj', 'beat');//zzy和beat和dj和djj
let newStr2 = str.replace(/dj/g, 'M'); //zzy和M和M和Mj
let newStr3 = str.replace(/[dj]/g, item => `${item}o`);  //zzy和dojo和dojo和dojojo
console.log(newStr1,newStr2); 
1
2
3
4
5

替换正则表达式：

正则表达式参数可以加修饰符：/表达式/g
g(global)：全局匹配
i(ignore)：忽略大小写
gi：全局匹配+忽略大小写

<textarea id="msg">textarea><button>提交button>
<div>div>
<script>
    let msg = document.querySelector('#msg');
    let btn = document.querySelector('button');
    let div = document.querySelector('div');
    btn.onclick = function () {
        //正则表达式参数可以加修饰符
        // g：全局匹配，i：忽略大小写，gi：全局匹配+忽略大小写
        div.innerHTML = msg.value.replace(/我靠|我去/gi, '我*');
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12

js高级到这里就结束了，学习前端半年了，感谢pink老师，不过老师的课可能讲的还是浅了些，后面我会再去搜寻更好的课程，慢慢往里面补充，加油！！