一、正则表达式概念
js 最初就是用来做表单验证的
- 什么是正则表达式：
regular expression
js中RegExp类表示正则表达式 它是一个描述字符模式的对象 - 正则作用：
1.用来验证字符串是否符合规则
2.从字符串中获取一部分符合规则的内容
二、创建正则对象
- 1.通过new关键字来声明一个正则对象
第一个参数：正则的主体， 字符串
第二个参数 ：修饰符 字符串
var str = new RegExp("hello", "ig");
i 不区分大小写
g 全局匹配
m 换行匹配
- 2.通过字面量来赋值
var str = /主体/修饰符;
var str = /Hello/gi;
test:
格式：正则对象.test(“字符串”)
返回值：布尔值
功能：校验字符串是否符合规则
var str = new RegExp("hello", "ig");
// var str = /Hello/;
// alert(str); // /hello/gi
// alert(str.test("Hello")); // 不写gi时为false
// alert(str.test("hello1")); // true
exec:
格式：正则对象.exec(“字符串”)
功能：在匹配字符串，如果匹配成功，则返回的是一个数组，数组中存放的是第一个符合条件的内容
如果匹配不成功，则返回是null
var str = "are you ok";
var reg = /Are/ig;
var arr = reg.exec(str);
alert(arr); //are
alert(arr.length); //1
三、字符串中使用正则
字符串的函数：
1.match（）
格式：字符串.match(正则)
功能：在字符串中匹配符合规则的内容
返回值：数组，匹配成功的内容
匹配没有成功，返回null
var str = "my name is XXX my";
console.log(str.match(/my/ig));
2.replace()
格式：字符串.replace(oldStr/正则，newStr)；
功能：将新的字符替换掉旧的字符
var str = "my name is XXX my";
console.log(str.replace("XXX", "***")); // my name is *** my
正则写法
console.log(str.replace(/X/ig, "*")); //my name is *** my
3.split()
格式：字符串.split(“分割字符”/正则)
功能：用分隔符将字符串进行分割
返回值：分割后的字符串组成的数组
var str = "my,name,is,XXX";
var result = str.split(/,/g);
console.log(result);
var str = "my name is XXX my";
var result = str.split(/ /);
console.log(result);
4.search()
功能：找到符合条件的第一个字符的位置（下标）
格式：字符串.search(字符串/正则)
返回值：找到则返回下标
未找到则返回-1
var result = str.search(/L/g); //-1，未找到
var result1 = str.search(/m/g); //0,只返回符合条件的第一位下标
console.log(result);
console.log(result1);
四、元字符
正则表达式语言由两种基本字符类型组成：原义（正常）文本字符和元字符。元字符使正则表达式具有处理能力。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符，可以用来规定其前导字符（即位于元字符前面的字符）在目标对象中的出现模式。
- 元字符：
组成正则的基础符号，具有特殊的含义。
. 匹配单个的任意字符
[范围] 匹配单个范围内的字符
[0-9] 匹配一个数字 范围为 0-9
[0-9a-zA-Z_]
[^范围] 匹配任意一个除了范围内的字符
[^0-9] 匹配任意一个非数字的字符 = [0-9]取反
\w 匹配单个的字母，数字和下划线 = [0-9a-zA-Z_]
\W 匹配单个非字母数字下划线
\d 匹配单个数字 = [0-9]
\D 匹配单个非数字 [^0-9]
var str = "Lolita";
\w 匹配单个的字母，数字和下划线
var reg = /Loli\wa/;
alert(reg.test(str)); //true
空白字符
\s 匹配一个任意的空白字符 空格 /n /t
\S 匹配一个任意的非空白字符
锚字符
^ 行首匹配 必须以它后面字符开头
$ 行尾匹配 必须以它后面字符结尾
var str = "Lolita";
var reg = /Loli\Sa/;
alert(reg.test(str)); //true
var str = "Lolita";
var reg = /^l/i;
alert(reg.test(str));
限定元字符 （x:表示任意的单个字符）
格式：
x? 匹配0个或者1个x
x+ 匹配至少一个x字符
x* 匹配任意一个x字符
x{m,n} 匹配至少m个字符，最多n个 包含n
x{m} 匹配m个字符
x{m,} 匹配m个--多个
() 小括号括起来的字符串会被当成一个字符去处理
x* 匹配任意一个x字符
var reg = /m*/ig;
var str = "Lol";
// 匹配3个字符,可以是数字字母下划线
var reg = /^\w{3}$/;
alert(reg.test(str));//true
var str = "mymy";
var reg = /(my){2}/;//需要连起来
alert(reg.test(str));
补充：
trim() 去除字符串首尾的空格，返回值：去除后的字符串，不会对原有的字符串造成影响
五、练习
-
1.根据文件名判断文件是否是压缩包
zip,rar,gz,7z
zip|rar|gz|7z -
2.验证手机号
11位数字 1开头
转义：
\ -
3.判断输入的年份
4位 数字 -
4.身份证号码
18位 以1-9开头 16位数字 数字/X
-
5.校验字符串是否为纯中文
-
6.用户名以英文大小写开头，长度为6-11位 （字母，数字，下划线）
-
7.匹配整数
0
-11
11
+12
false：
11.1
-01
var fileName = "1-2.rar";
var reg = /\w\.(zip|rar|gz|7z)$/;
alert(reg.test(fileName)); //true
var phone = "18393020789";
var reg = /^1\d{10}$/;
alert(reg.test(phone)); //true
var year = "1999";
var reg = /^\d{4}$/;
alert(reg.test(year)); //true
var idCard = "41234567890123456X";
var reg = /^[1-9]\d{16}(\d|X)$/;
alert(reg.test(idCard)); //true
var text = "面对疾风吧";
var reg = /^[\u4e00-\u9fa5]/;
alert(reg.test(text)); //true
var userName = "Xhih657_";
var reg = /^[a-zA-Z]\w{5,10}$/;
alert(reg.test(userName));
var integer = "0";
var reg = /(^(-|\+)?[1-9]\d*$)|^0$/;
alert(reg.test(integer));
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 250px;
border: 1px solid;
padding: 50px;
text-align: center;
background-color: #ccc;
margin: 100px auto;
}
.box input {
width: 250px;
height: 30px;
font-size: 18px;
margin-top: 20px;
outline: none;
}
#message {
margin-top: 5px;
font-size: 14px;
color: gray;
display: block;
height: 50px;
}
.strongLevel {
width: 70px;
height: 30px;
line-height: 30px;
background-color: gray;
color: #fff;
float: left;
margin-left: 12px;
margin-top: 10px;
}
</style>
<script>
window.onload = function () {
// 1.校验是在 输入框失去焦点的时候
var userName = document.getElementById("userName");
//放置提示信息
var message = document.getElementById("message");
//添加失去焦点的事件
userName.onblur = function () {
// 1.获取输入的内容
var nameValue = userName.value;
//2.用户长度是否符合要求
if (nameValue.length < 6 || nameValue.length > 18) {
message.innerHTML = "长度应为6~18位字符";
message.style.color = "red";
} //判断首位是否为字母
else if (!/[a-zA-Z]/.test(nameValue[0])) {
message.innerHTML = "用户名必须以字母开头";
message.style.color = "red";
} //判断必须以字母下划线数字组成
else if (!/^\w*$/.test(nameValue)) {
message.innerHTML = "用户名必须以字母下划线数字组成";
message.style.color = "red";
} else {
message.innerHTML = "该用户名可注册";
message.style.color = "green";
}
}
/**
*
* 密码强度：
* 弱：纯数字 纯小写 纯大写
* 强：三种都有+下划线
* 中：两两混合
*
* 给密码框绑定键盘事件
* keyup
*
*/
//1.获取密码框和下面的div
var passWord = document.getElementById("passWord");
var levels = document.querySelectorAll(".strongLevel");
//2.给密码框绑定keyup事件
passWord.onkeyup = function () {
var psw = passWord.value;
for (var i = 0; i < levels.length; i++) {
levels[i].style.backgroundColor = "gray";
}
if (psw.length >= 6) {
//3.强度判断
//3.1 弱判断 纯数字， 纯小写 纯大写
if (/^\d+$/.test(psw) || /^[a-z]+$/.test(psw) || /^[A-Z]+$/.test(psw)) {
levels[0].style.backgroundColor = "#e67e22";
}else if (/\d/.test(psw) && /[a-z]/.test(psw) && /[A-Z]/.test(psw)&&/_/.test(psw)) {
levels[2].style.backgroundColor = "#e67e22";
}else{
levels[1].style.backgroundColor = "#e67e22";
}
}
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" id="userName" placeholder="请输入用户名">
<span id="message">6~18位字符，可使用字母、数字、下划线、需以字母开头</span>
<input type="text" id="passWord" placeholder="请输入密码">
<div class="strongLevel">弱</div>
<div class="strongLevel">中</div>
<div class="strongLevel">强</div>
</div>
</body>
扫一扫
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
