文章目录
目标
- 能够说出正则表达式的作用
- 能够写出简单的正则表达式
- 能够用正则表达式对表单进行验证
- 能够使用正则表达式替换内容
1. 正则表达式的概述
1.1 什么是正则表达式
正则表达式(Regular Expression)是用于匹配字符组合的模式,在JavaScript中,正则表达式也是对象。
正则表达式通常被用来检索,替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母,数字或者下划线,昵称输入框中输入中文(匹配),此外,正则表达式还常用于过滤掉页面中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等
其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript正则表达式完成表单验证
1.2 正则表达式的特点
- 灵活性,逻辑性和功能性非常强
- 可以迅速的用极简单的方式达到字符串的控制
- 对于刚接触的人来说,比较晦涩难懂,比如:
//关于邮箱的正则表达式
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
- 实际开发,一般都是直接复制写好的正则表达式。但是要求对使用正则表达式根据实际情况修改正则表达式,比如用户名:
/^[a-z0-9_-]{3,16}$/
2. 正则表达式在JavaScript中的使用
2.1 创建正则表达式
在JavaScript中,可以通过两种方式创建一个正则表达式
- 通过RegExp对象的构造函数创建
var 变量名 = new RegExp(/表达式/);
- 通过字面量创建
var 变量名 = /表达式/;
// 正则表达式在js中的使用
// 创建时不能加引号
// 1.利用RegExp对象来创建 正则表达式
var regexp = new RegExp(/123/);
console.log(regexp);
// 2. 利用字面量创建正则表达式
var rg = /123/;
console.log(rg.test(123)); //判断123是否符合正则规范
2.2 测试正则表达式test
test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其中是测试字符串。
regexObj.test(str)
- regexObj 是写的正则表达式
- str 我们要测试的文本
- 就是检测str文本是否符合我们写的正则表达式规范
<script>
// 正则表达式在js中的使用
// 1.利用RegExp对象来创建 正则表达式
var regexp = new RegExp(/123/);
console.log(regexp);
// 2. 利用字面量创建正则表达式
var rg = /123/;
//用来检查字符串是否符合正则表达式要求的规范
console.log(rg.test(123)); //true//判断123是否符合正则规范
console.log(rg.test(231)); //flase
console.log(rg.test('abc123')); //true//判断abc123是否符合正则规范
console.log(rg.test('231abc')); //false//231abc必须要有连续的123
</script>
3. 正则表达式的组成
3.1 概述
一个正则表达式可以由简单的字符构成,比入/abc/
,也可以是简单和特殊字符的组合,比如/ab*c/
,其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号如^, $, +
3.2 边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
边界符 | 说明 |
---|---|
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
如果^和$在一起,表示必须是精确匹配
<script>
var rg = /abc/; //正则表达式中无需加引号,不管是数字还是字符串
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);
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
</script>
3.3 字符类
- 字符类表示有一系列字符可供选择,只要匹配其中一个就可以了,所有可供选择的字符都放在方括号内
- [-]方括号内部范围符
<script>
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('-------------------------');
var rg1 = /^[abc]$/; //只有a 或者b 或者c 返回true
console.log(rg1.test('a')); // true
console.log(rg1.test('b')); // true
console.log(rg1.test('c')); // true
console.log(rg1.test('aa')); // false
console.log('-------------------------');
var rg2 = /^[a-z]$/; // 26个英文字母都可以
console.log(rg2.test('a')); //true
console.log(rg2.test('A')); //false
console.log('-------------------------');
var rg3 = /^[a-zA-Z0-9_-]$/; // 26个英文字母都可以(大小写) + 数字 + '_' + '-'
console.log(rg3.test('a')); // true
console.log(rg3.test('A')); // true
console.log(rg3.test('0')); // true
console.log(rg3.test('_')); // true
console.log(rg3.test('-')); // true
console.log('-------------------------');
var rg4 = /^[^a-zA-Z0-9_-]$/; // 取反中括号内有^那么取反 26个英文字母都可以(大小写) + 数字 + '_' + '-'
console.log(rg4.test('a')); // false
console.log(rg4.test('A')); // false
console.log(rg4.test('0')); // false
console.log(rg4.test('_')); // false
console.log(rg4.test('-')); // false
</script>
3.4 量词符
量词符用来设定某个模式出现的次数
量词 | 说明 |
---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
<script>
var reg0 = /^a*$/;
console.log(reg0.test("")); // true
console.log(reg0.test("a")); // true
console.log(reg0.test("aaaa")); // true
console.log('------------------');
var reg1 = /^a+$/;
console.log(reg1.test("")); //false
console.log(reg1.test("a")); // true
console.log(reg1.test("aaaa")); // true
console.log('------------------');
var reg2 = /^a?$/;
console.log(reg2.test("")); // true
console.log(reg2.test("a")); // true
console.log(reg2.test("aaaa")); //false
console.log('------------------');
// {3}就是重复3次
var reg3 = /^a{3}$/;
console.log(reg3.test("")); // false
console.log(reg3.test("a")); // false
console.log(reg3.test("aaaa")); //false
console.log(reg3.test("aaa")); //true
console.log('------------------');
// {3,} 大于等于3
var reg4 = /^a{3,}$/;
console.log(reg4.test("")); // false
console.log(reg4.test("a")); // false
console.log(reg4.test("aaaa")); //true
console.log(reg4.test("aaa")); //true
console.log('------------------');
// {3,16}大于等于3 并且 小于等于16
var reg5 = /^a{3,16}$/;
console.log(reg5.test("")); // false
console.log(reg5.test("a")); // false
console.log(reg5.test("aaaa")); //true
console.log(reg5.test("aaa")); //true
</script>
一个合格的表单验证
<script>
var reg = /^[0-9a-zA-Z]{6,16}$/
console.log(reg.test("aa")); //false
console.log(reg.test("1234SsdfS")); //true
</script>
案例:表单验证
https://blog.csdn.net/weixin_45773503/article/details/107647647
3.5 括号总结
- 大括号 量词符,表示重复次数
- 中括号 字符集合。匹配方括号中的任意字符
- 小括号表示优先级
在线测试:http://c.runoob.com/
var reg = /^[abc]$/;
var reg = /^abc{3}$/; //只是让c重复三次 只有 abccc 是 true
var reg = /^(abc){3}$/; // ()表示优先级
3.6 预定类
预定类是指某些常见模式的简写方法。
预定类 | 说明 |
---|---|
\d | 匹配0-9之间的任一数字,相当于[0-9] |
\D | 匹配所有0-9以外的字符,相当于[^0-9] |
\w | 匹配任意的字母,数字下划线,相当于[A-Za-z+0-9_] |
\W | 匹配任意的字母,数字下划线以外的字符,相当于[^A-Za-z+0-9_] |
\s | 匹配空格(包括换行符,制表符,空格符等,相当于[\t\r\n\v\f] |
\S | 匹配空格(匹配非空格的字符,相当于[^\t\r\n\v\f] |