1.概述
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式是一个对象，它可以用来进行文本搜索和文本替换等操作。
例如，我们想要检查一个字符串是否包含某个特定的单词，或者验证用户输入的电话号码、电子邮件地址等是否符合特定的格式，正则表达式就可以发挥很大的作用。
此外正则表达式还可以替换一些敏感词，或者从字符串中获取我们想要的特点部分（字符串内容提取）等。
2.特点
- 灵活性、逻辑性和功能性强
- 可以迅速地用极简单地方式达到字符串地复杂控制
- 上手容易
3.正则表达式在js中的使用
3.1正则表达式的创建
方式一
利用RegEXP对象创建
var reg = new RegExp(规则)
方式二
字面量方法
var reg = /正则表达式/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01正则表达式的创建方式</title>
</head>
<body><script>//1.利用RegExp对象来创建正则表达式var reg1 = new RegExp(/123/);console.log(reg1);//2.利用字面量的方式创建正则表达式var reg2 = /123/console.log(reg2);//3. 在正则表达式中有一个test方法可以用来检测字符串是否符合正则表达式console.log(reg1.test(123));console.log(reg1.test('abc'));</script>
</body>
</html>
3.2正则表达式的特殊字符
3.2.1正则表达式的组成
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions
正则表达式中的边界符（位置符），用来提示字符所在的位置，主要有两个字符
| 正则表达式 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $` | 表示匹配行尾的文本（以谁结束） |
如果上面的两个在一起，表示必须是精确匹配
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02边界符</title>
</head>
<body><script>//正则表达式里面不需要加引号，不管是数字型还是字符串型// /abc/ 表达的意思是含有abc这个字符串都返回truevar reg = /abc/; console.log(reg.test('abc')); //trueconsole.log(reg.test('abcd')); //trueconsole.log(reg.test('aabcd')); //true//^表示匹配行首的文本（以谁开始）var reg1 = /^abc/console.log(reg1.test('abc')); //trueconsole.log(reg1.test('abcd')); //trueconsole.log(reg1.test('aabcd')); //false//$表示匹配行尾的文本（以谁结束）var reg1 = /abc$/console.log(reg1.test('abc')); //trueconsole.log(reg1.test('abcd')); //falseconsole.log(reg1.test('aabcd')); //falseconsole.log(reg1.test('aabc')); //true</script>
</body>
</html>
3.3字符串类
字符串类有一系列的字符串可以选择，只用匹配其中一个就可以了，所有可供选择的字符都放在方括号内
3.3.1[]方括号
表示一系列字符可供选择，只要匹配其中的一个就可以了
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03方括号</title>
</head>
<body><script>// var reg = /abc/ 只要包含abc就可以了// 字符类： [] 表示有一系列字符可供选择，只要匹配其中的一个就可以了返回truevar reg = /[abc]/console.log(reg.test('admin')); //trueconsole.log(reg.test('baby')); //trueconsole.log(reg.test('color')); //trueconsole.log(reg.test('red')); //falseconsole.log('==========================================');// 三选一， 开始字符是三选一，结束的字符也是三选一 // 如果加了^ 和 $ 则限制了待校验的字符串的长度var reg1 = /^[abc]$/console.log(reg1.test('aa')); //falseconsole.log(reg1.test('a')); //trueconsole.log(reg1.test('b'));//trueconsole.log(reg1.test('c'));//trueconsole.log(reg1.test('abc'));//falseconsole.log('==========================================');// 26个英文字母任何一个就可以用 a-z A-Z 0-9var reg2 = /^[a-z]$/console.log(reg2.test('a')); //trueconsole.log(reg2.test('B')); //falseconsole.log(reg2.test(8)); //falseconsole.log(reg2.test('-')); //falseconsole.log(reg2.test(' ')); //falseconsole.log(reg2.test('!')); //falseconsole.log('==========================================');//字符串组合var reg3 = /^[a-zA-Z0-9_-]$/console.log(reg3.test('a')); //trueconsole.log(reg3.test('B')); //trueconsole.log(reg3.test(8)); //trueconsole.log(reg3.test('-')); //trueconsole.log(reg3.test(' ')); //falseconsole.log(reg3.test('!')); //falseconsole.log('==========================================');//如果括号中出现了多个^,表示取反的意思，千万不要和边界符 ^混淆var reg4 = /^[^a-zA-Z0-9_-]$/console.log(reg4.test('a')); //falseconsole.log(reg4.test('B')); //falseconsole.log(reg4.test(8)); //falseconsole.log(reg4.test('-')); //falseconsole.log(reg4.test(' ')); //trueconsole.log(reg4.test('!')); //true</script>
</body>
</html>
3.4量词符
设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 0-n次 |
| + | 1-n次 |
| ？ | 0次或1次 |
| {n} | n次 |
| {n,} | n次或n次以上 |
| {n,m} | n到m次 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04量词</title>
</head>
<body><script>//量词作用：用来确定某个模式出现的次数// var reg = /^a$/;// console.log(reg.test('a'));// console.log(reg.test('aa'));//1. * 相当于 >= 0 (可以出现0次或者是多次)// var reg = /^a*$/;// console.log(reg.test('a')); //true// console.log(reg.test('aa')); //true// console.log(reg.test('aaaaaa')); //true// console.log(reg.test('')); //true//2. + 相当于 >= 1 (可以出现1次或者是很多次)// var reg = /^a+$/;// console.log(reg.test('a')); //true// console.log(reg.test('aa')); //true// console.log(reg.test('aaaaaa')); //true// console.log(reg.test('')); //false//3. ? 相当于 0 || 1//var reg = /^a?$/;// console.log(reg.test('a')); //true// console.log(reg.test('aa')); //false// console.log(reg.test('aaaaaa')); //false// console.log(reg.test('')); //true//4. {n} 就表示重复n次// var reg = /^a{3}$/; //必须重复3次// console.log(reg.test('a')); //false// console.log(reg.test('aa')); //false// console.log(reg.test('aaa')); //true// console.log(reg.test('aaaaaa')); //false// console.log(reg.test('')); //false//5. {n,} 相当于 >= n 表示重复次数是n次或更多次// var reg = /^a{3,}$/; //必须重复3次或以上// console.log(reg.test('a')); //false// console.log(reg.test('aa')); //false// console.log(reg.test('aaa')); //true// console.log(reg.test('aaaaaa')); //true// console.log(reg.test('')); //false//6. {n,m} 表达式大于等于n，并且小于或等于mvar reg = /^a{3,6}$/; //必须重复6次到6次console.log(reg.test('a')); //falseconsole.log(reg.test('aa')); //falseconsole.log(reg.test('aaa')); //trueconsole.log(reg.test('aaaaaa')); //trueconsole.log(reg.test('aaaaaaaaa')); //falseconsole.log(reg.test('')); //false</script>
</body>
</html>
3.5案例（用户名校验）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05用户户名校验</title><style>span{color: #aaa;font-size: 14px;}.right {color:green;}.wrong {color:red;}</style>
</head>
<body><input type="text" class="username"><span>请输入用户名</span><script>//正则表达式：只能是字母（大小写）数字或下划线，重复次数为6次到16次var reg = /^[a-zA-Z0-9_]{6,16}$/;//1.获取用户输入的用户名var username = document.querySelector('.username');var span = document.querySelector('span');//输入完后，失去焦点(blur)触发事件username.onblur = function(){if(this.value == ''){span.className = ''span.innerHTML = '请输入用户名'return false;}if(reg.test(this.value)){span.className = 'right'span.innerHTML = '用户名格式输入正确'} else {span.className = 'wrong'span.innerHTML = '用户名格式输入错误'}}</script>
</body>
</html>
3.6 括号总结
- 大括号：量词符，表示重复次数
- 中括号：字符集合，匹配方括号中的任意一个字符
- 小括号：表示优先级
工具大全[https://www.jyshare.com/]
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//小括号表示优先级var reg = /^(abc){3}$/ // 表示abc重复3次console.log(reg.test('abc'));console.log(reg.test('abcabcabc'));console.log(reg.test('abccc'));</script>
</body>
</html>
3.7 预定义类
预定义类指的是某些常见的模式的简写方式
| 预定义类 | 说明 |
|---|---|
\d | 匹配 0-9 之间的任意一个数字，相当于[0-9] |
\D | 匹配 0-9 之外的字符，相当于[^0-9] |
\w | 匹配任意的字母，数字和下划线，相当于[a-zA-Z0-9_] |
\W | 匹配除了任意的字母，数字和下划线，相当于[^a-zA-Z0-9_] |
\s | 匹配空格（包含了换行符、制表符、空格符等等）相当于[\t\r\n\v\f] |
\S | 除了匹配空格（包含了换行符、制表符、空格符等等）相当于[^\t\r\n\v\f] |
座机号校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//小括号表示优先级// var reg = /^(abc){3}$/ // 表示abc重复3次// console.log(reg.test('abc'));// console.log(reg.test('abcabcabc'));// console.log(reg.test('abccc'));//校验座机号：全国的做记号有两种格式：//1）010-12345678//2）0710-1234567//var reg = /^[0-9]{3}-[0-9]{8}|[0-9]{4}-[0-9]{7}$///var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/var reg = /^(\d{3}-\d{8})|(\d{4}-\d{7})$///var reg = /^\d{3,4}-\d{7,8}$/console.log(reg.test('0710-8237789'));console.log(reg.test('0710-12345678'));console.log(reg.test('027-83891595'));</script>
</body>
</html>
3.8.表单校验案例
看代码，js部分
window.onload = function(){var tel = document.querySelector('#tel'); //手机号var qq = document.querySelector('#qq'); //qq号var nc = document.querySelector('#nc'); //昵称var msg = document.querySelector('#msg'); //短信验证码var pwd = document.querySelector('#pwd'); //登录密码var surepwd = document.querySelector('#surepwd'); //确认密码var regtel = /^1[3456789]\d{9}$/ //手机号正则表达式var regqq = /^[1-9]\d{3,}$/ //qq正则表达式var regnc = /^[\u4e00-\u9fa5]{2,8}$/ //昵称var regmsg = /^\d{4}$/ //短信验证码var regpwd = /^\w{6,11}$/ //密码regex(tel,regtel); //手机号校验regex(qq,regqq); //qq号校验regex(nc,regnc); //昵称校验regex(msg,regmsg); //验证码校验regex(pwd,regpwd); //密码校验// 表单校验函数function regex(ele,reg){ele.onblur = function(){if(reg.test(this.value)){this.nextElementSibling.className = 'success'this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜您输入正确'}else{this.nextElementSibling.className = 'error'this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确，请重新输入'}}}surepwd.onblur = function(){if(regpwd.test(pwd.value) == false){ //密码校验不通过pwd.nextElementSibling.className = 'error'pwd.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确，请重新输入'pwd.focus();return false;}if(this.value == pwd.value){this.nextElementSibling.className = 'success'this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜您输入正确'}else{this.nextElementSibling.className = 'error'this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确，请重新输入'}}}
3.9 正则替换replace
replace方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或者是一个正则表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09replace</title>
</head>
<body><script>// var str = 'pink和redpink';// //replace对str这个字符串是没有做修改的// var newStr = str.replace('pink','blue');// console.log(newStr);// //等同于此处的pin可以写在正则表达式里// var newStr2 = str.replace(/pink/,'blue');// console.log(newStr2);//全部替换 var str = 'abcabc';var newStr = str.replace(/a/g,'哈哈');console.log(newStr);//忽略大小写 ivar str2 = 'abcAbc';var newStr2 = str.replace(/a/gi,'哈哈');console.log(newStr2);</script>
</body>
</html>
3.10 过滤敏感词汇
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10过滤敏感词汇</title>
</head>
<body><textarea name="" id="message"></textarea><button>提交</button><div></div><script>var btn = document.querySelector('button');var message = document.querySelector('#message');var div = document.querySelector('div');btn.onclick = function(){div.innerHTML = message.value.replace(/蔡徐坤|鸡哥/g,'**');}</script>
</body>
</html>