1. 概述
正则表达式 是用于匹配字符串中字符组合的模式。在 Js中，正则表达式也是 对象
正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。
特点👇 
2. 创建正则表达式
1. 通过调用 EegExp 对象的构造函数创建
var 变量名 = new RegExp(/表达式/)；
2. 通过字面量创建
var 变量名 = /表达式/;
正则表达式里面不需要加引号 不管是数字型还是字符串型
3. 测试正则表达式 test
test()正则对象方法，用于检测字符串是否复合该规则，该对象会返回 true 或 fasle，其参数是测试字符串。
regexObj.test(str)
1. regexObj 是写的正则表达式
2. str 我们要测试的文本
3. 就是检测 str 文本是否符合我们写的正则表达式规范
var rg = /123/; //只要包含有 123即可
console.log(rg.test(1234)); //输出为 true
console.log(rg.test('abc')); //输出为 false4. 正则表达式的组成
一个正则表达式 可以由简单的字符构成，比如 /abc/， 也可以是简单和特殊字符的组合， 比如 /ab*c/。 其中特殊字符也被称为 元字符， 在正则表达式中是具有 特殊 意义的专用 符号， 如 ^ 、$、+等
5. 边界符
正则表达式中的边界符（位置符） 用来 提示字符所处的位置，主要有两个字符
边界符 说明 ^ 表示匹配行首的文本（以谁开始） $ 表示匹配行尾的文本（以谁结束） 如果 ^ 和 $ 在一起，表示必须是精确匹配
var rg = /^abc/; //要以 abc开头
console.log(reg.test('abc')); //true
console.log(reg.test('abcd')); //true
console.log(reg.test('aabcd')); //falsevar rg = /^abc$/; //精准匹配 要求必须是 abc字符串才能符合规范
console.log(reg.test('abc')); //true
console.log(reg.test('abcd')); //false
console.log(reg.test('aabcd')); //false6. 字符类
字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。 所有可供选择的字符都放在方括号内
[-] 方括号内部 范围 符 -
字符组合
/^[a-z0-9]$/.test('a') //true
意思是 a-z或0-9里面选择一个都可以
[^]方括号内部 取反符^
/^[^abc]$/.test('a') //fasle
意思是 除了填单个abc，其他都可以
var rg = /abc/; //只要包含abc就可以
//字符类：[] 表示有一系列的字符可供选择，只要匹配其中一个就可以了
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("----------------------------");
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("-----------------------------");
var reg = /^[a-z]$/; //26个英文字母任何一个字母 返回 true
console.log(reg.test('a')); //true
console.log(reg.test('z')); //true
console.log(reg.test(1)); //false
console.log(reg.test('A')); //false
//-----------------------------------------------------------------------------
var reg1 = /^[a-zA-Z0-9_-]$/;//26个英文字母（大写和小写都可以）任何一个字母返回 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('-------------------------------');
var reg1 = /^[^a-zA-Z0-9_-]$/;//如果中括号里面有 ^ 表示取反的意思 和 我们边界符 ^ 别混淆
console.log(reg1.test('a')); //false
console.log(reg1.test('B')); //false
console.log(reg1.test(8)); //false
console.log(reg1.test('-')); //false
console.log(reg1.test('_')); //false
console.log(reg1.test('!')); //true7. 量词符
量词符用来 设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复 n 次 |
| {n,} | 重复 n 次或更多次 |
| {n,m} | 重复 n 到 m 次 |
注意❗ 写重复次数的时候中间不能有空格！ {6,16}
var reg = /^[a-zA-Z0-9_-]{6,16}$/; //这个模式用户只能输入英文字母 数字 下划线 短横线
console.log(reg.test('andy-red')); //true
console.log(reg.test('a')); //false
console.log(reg.test('andy!007')); //false8. 括号总结
大括号 量词符 里面表示重复次数
中括号 字符集合 匹配方括号中的任意字符（多选一）
小括号 表示优先级
/^(abc){3}$/; 表示 abc重复三次才是正确
9. 预定义类
预定义类指的是 某些常见模式的简写方式
是[]，多选一的情况
正则表达式里面的 或者 符号是 |
| 预定类 | 说明 |
|---|---|
| \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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 50px;
}
input {
margin-bottom: 20px;
}
span {
font-size: 12px;
margin-left: 5px;
}
.right {
color: green;
}
.wrong {
color: red;
}
</style>
</head>
<body>
<div class="box">
手机号： <input type="phone" id="pho"><span></span>
<br>
QQ号： <input type="text" id="qq"><span></span>
<br>
昵称： <input type="text" id="uname"><span></span>
<br>
密码： <input type="password" id="pas"><span></span>
<br>
密码确认： <input type="password" id="pas2"><span></span>
</div>
<script>
var pho = document.querySelector('#pho');
var regp = /^1[3|4|5|7|8][0-9]{9}$/; //必须以1开头，第二位可以是34578，最后再写9位
var qq = document.querySelector('#qq');
var regq = /^[1-9]\d{4,}$/; //以1-9任意的开头，再加0-9的数字四位以上，QQ从10000开始
var uname = document.querySelector('#uname');
var regu = /^[\u4e00-\u9fa5]{2,8}$/;//用户名 2-8 位中文
var pas = document.querySelector('#pas');
var regs = /^[a-zA-Z0-9_-]{6,16}$/; //密码a-zA-Z0-9_任意 6-16位
var pas2 = document.querySelector('#pas2');
function getP(item,rg) {
item.onblur = function() {
if(rg.test(this.value)) {
this.nextElementSibling.className = 'right';
this.nextElementSibling.innerHTML = '内容格式正确';
} else {
this.nextElementSibling.className = 'wrong';
this.nextElementSibling.innerHTML = '内容格式错误';
}
}
};
getP(pho,regp);
getP(qq,regq);
getP(uname,regu);
getP(pas,regs);
pas2.onblur = function() {
if(this.value == pas.value) {
this.nextElementSibling.className = 'right';
this.nextElementSibling.innerHTML = '密码正确';
} else {
this.nextElementSibling.className = 'wrong';
this.nextElementSibling.innerHTML = '密码错误';
}
}
</script>
</body>
</html>10. 正则替换 （replace 替换）
正则表达式参数：
/表达式/[switch]
switch(也称为修饰符) 按照什么样的模式来匹配，有三种值：
g : 全局匹配
i : 忽略大小写
gi : 全局匹配 + 忽略大小写
replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式
stringObject.replace(regexp/substr,replacement)
1. 第一个参数： 被替换的字符串 或者 正则表达式
2. 第二个参数： 替换为的字符串
3. 返回值是一个替换完毕的新字符串
案例：替换掉违规文字
var text = '这个老师上课很有激情，我们喜欢她的激情，我们也喜欢她的大嗓门';
var later = text.replace(/激情|大嗓门/g, '**');
console.log(later);以上就是正则表达式的内容啦，学会正则表达式用于表单的验证能省事不少呢~😀
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
