正则表达式
定义：正则表达式用于定义一些字符串的规则
作用：计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则：或者将字符串中符合规则的内容提取出来
创建正则表达式的对象
方式一：使用构造函数创建正则表达式的对象
语法：
var 变量 = new RegExp("正则表达式"); // 注意，参数是字符串
var 变量 = new RegExp("正则表达式", "匹配模式"); // 注意，两个参数都是字符串
创建了正则表达式的对象后，该怎么使用呢？大致分为两个步骤：
-
（1）创建正则表达式的对象 reg。
-
（2）使用 reg 的test() 方法，判断指定字符串是否符合规则。
正则表达式的test()方法
功能:判断参数字符串是否满足该正则格式
参数:目标字符串
返回值:满足返回true,反之false
myReg.test(str); // 判断字符串 str 是否符合 指定的 myReg 这个正则表达式的规则
正则表达式的 exec()方法
功能:返回目标字符串满足正则格式的子串
参数:目标字符串
返回值:返回目标字符串满足正则格式的子串,每次只能返回一个,
并且存储至长度为1的数组
1、传一个参数时：
构造函数 RegExp 中，可以只传一个参数。
var reg = new RegExp("a"); // 定义一个正则表达式：检查一个字符串中是否含有 a
var str1 = "qianguyihao";
var str2 = "smyh";
// 通过 test()方法，判断字符串是否符合 上面定义的 reg 规则
console.log(reg.test(str1)); // 打印结果：true
console.log(reg.test(str2)); // 打印结果：false
2、传两个参数时：匹配模式 【重要】
构造函数 RegExp 中，也可以传两个参数。我们可以传递一个匹配模式作为第二个参数。这个参数可以是：
-
i忽略大小写。这里的 i 指的是 ignore。i:忽略大小写 var arr = ["TMD","傻子","操"]; var str = "今天有个傻子，在旁边，这傻子大喊大家叫，影响了我的操作"; // 今天有个***，在旁边，这傻子大喊大家叫，影响了我的***作 for(var i=0; i<arr.length; i++){ str = str.replace(new RegExp(arr[i],"g"),"***"); } -
g全局匹配模式。这里的 g 指的是 global。全局,会把整个字符串用来判断
var reg = new RegExp('A', 'i');
var str = 'qiangu';
console.log(reg.test(str)); // 打印结果：true
方式二：使用字面量创建正则表达式
语法：
var 变量 = /正则表达式/; // 注意，这个语法里没有引号
var 变量 = /正则表达式/匹配模式; // 注意，这个语法里没有引号
var reg = /A/i; // 定义正则表达式的规则：检查一个字符串中是否含有 a。忽略大小写。
var str = "qiangu";
console.log(typeof reg); // 打印结果：object
console.log(reg.test(str)); // 打印结果：true
字符串相关函数，但是可以把正则对象当做参数
match
功能:返回目标字符串满足正则格式的所有子串
参数:目标字符串
返回值:返回目标字符串满足正则格式的所有子串
var reg = /\d+/g;
var str = "123a456b789";
var arr = str.match(reg);
console.log(arr); //123
//456
//789
serach
search方法 返回与正则表达式查找内容匹配的第一个子字符串的位置
用法:str.search(reg)
// var str = "jin tian SHI xing qi wu hei hei";
// var reg = /sh/i;
// console.log(str.search(reg));
// replace(参数1,参数2):用参数2替换参数1
正则表达式的简单语法
正则中的特殊字符:
单个字符:
^：正则开始
$ : 正则结束
. : 元字符, 表示任意一个字符
. : 表示转义字符 .表示.
+： 表示其前面紧挨着的字符至少出现1次 等价{1,}
* ：表示其前面出现的字符至少出现过0次 等价{0,}
?: 表示其前面出现的字符至少出现过0次，至多1次 等价{0,1}
| : 表示或者
组合字符:
\d : 0-9之间的任意一个数字 \d只占一个位置
\D : 除了\d
\w : 数字，字母 ，下划线 0-9 a-z A-Z _
\W : 除了\w
\s : 空格或者空白等
\S : 除了\s
括号:
{m,n}表示括号前面紧挨着的字符至少出现m个，至多出现n个 : 以b开头 至少3个a 至多5个a /^ba{3,5}&/
{m}表示括号前面紧挨着的字符只能出现m个
{m,}表示括号前面紧挨着的字符至少出现m个
[] 表示括号内的任意一个字符
[wd3h]
[a-z]表示任意一个小写字母 [a-zA-Z0-9]
[^ ]表示非括号内的任意一个字符
()一般与或连用 表示优先级
[\u4e00-\u9fa5] 任意一个中文字符
//至少包含1个a
var reg = /a/;
//至少包含5个a
reg = /aaaaa/;
// ^和$同生共死
reg = /^aaa$/;
//以b开头 至少3个a 至多5个a
reg = /^ba{3,5}$/;
//6个5
reg = /^555555$/;
reg = /^5{6}$/;
//邮编 6位数字
reg = /^\d{6}$/;
//定义一个由字母或数字或下划线组成的用户名
//范围在6,18之间
reg = /^\w{6,18}$/;
// 定义一个由字母或数字或下划线组成的用户名
// 但是首字母不为数字
// 范围在6,18之间
reg = /^\D\w{5,17}$/;
//定义一个密码 至少6位
reg = /^.{6,}$/;
//www.baidu.com
//\转义字符
reg = /www\.baidu\.com/;
reg = /^\\$/;
// 5+3
reg = /^5\+3$/;
//以 13 或 15 开头的手机号
// (字符1|字符2|字符3...)
// reg = /^1(3|5)\d{9}$/;
//[字符1字符2字符3...]
reg = /^1[357]\d{9}$/;
// 只能是a-f之间的数据
reg = /^[a-f]$/;
reg = /^[a-zA-Z0-9_]$/;
// 除了
// [^字符1字符2...]
reg = /[^abc]/;
//空格
reg = /^\s$/;
//中文区间[\u4e00-\u9fa5]
reg = /^[\u4e00-\u9fa5]{2}$/;
案例：判断密码强弱
<!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>
</head>
<body>
<input type="text" name="" id="">
<button>测试</button>
</body>
</html>
<script>
// 由数字，字母，其它字符构成
// 三者都有为强
// 有两个为中
// 只有一个为弱
//至少包含
var regNum = /\d+/;
var regLetter = /[a-zA-Z]+/;
var regChar = /[!@#$%]+/;
//只能
var _regNum = /^\d+$/;
var _regLetter = /^[a-zA-Z]+$/;
var _regChar = /^[!@#$%]+$/;
var oInput = document.querySelector("input");
var oBtn = document.querySelector("button");
oBtn.onclick = function(){
if(_regNum.test(oInput.value) ||
_regLetter.test(oInput.value) ||
_regChar.test(oInput.value)){
console.log("弱");
}else if(regNum.test(oInput.value) &&
regLetter.test(oInput.value) &&
regChar.test(oInput.value)){
console.log("强");
}else{
console.log("中");
}
}
</script>
案例：焦点表单验证：
action:数据提交的服务器地址
method:数据提交的姿势
- get:默认为get,五菱宏光，效率高，安全性低，携带数据量小
- post:武装押运,效率低，安全性高，携带数据量大
<!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>
</head>
<body>
<form action="Ok.html" method="get">
姓名:<input type="text"><span></span><br><br>
密码:<input type="text"><span></span><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
<script>
var oInputs = document.querySelectorAll("input");
var oF = document.querySelector("form");
var oSpans = document.querySelectorAll("span");
var flagId = false;
var flagPwd = false;
// oInputs[0].onfocus = function(){
// console.log("聚焦");
// }
// oInputs[0].onblur = function(){
// console.log("失去焦点");
// }
oInputs[0].onblur = function(){
var regId = /^\w{6,18}$/;
if(regId.test(this.value)){
flagId = true;
oSpans[0].innerHTML = "用户名格式正确";
}else{
flagId = false;
oSpans[0].innerHTML = "用户名格式尿了";
}
}
oInputs[1].onblur = function(){
var regPwd= /^.{6,}$/;
if(regPwd.test(this.value)){
flagPwd = true;
oSpans[1].innerHTML = "密码格式正确";
}else{
flagPwd = false;
oSpans[1].innerHTML = "密码格式尿了";
}
}
oF.onsubmit = function(){
if(flagId && flagPwd){
return true;
}else{
return false;
}
}
</script>