本文详细介绍了JavaScript中的正则表达式，包括如何创建正则对象、正则的作用，以及各种元字符的使用，如点号、范围、反义、空白字符、锚字符和限定符等。同时，文章还提到了正则表达式的修饰符如i、g和m，并给出了实际应用场景，如表单验证、字符串操作等。
正则概念
js 最初就是用来做表单验证的
什么是正则表达式：
regular expression js中RegExp类表示正则表达
式 它是一个描述字符模式的对象
正则作用：
1.用来验证字符串是否符合规则
2.从字符串中获取一部分符合规则的内容
创建正则对象
1.通过new关键字来声明一个正则对象
第一个参数：正则的主体， 字符串
第二个参数 ：修饰符 字符串
var str = new RegExp(“hello”,“ig”);
i 不区分大小写
g 全局匹配
m 换行匹配
2.通过字面量来赋值
var str = /主体/修饰符;
ser.test("hello word you");
test:
格式：正则对象.test(“字符串”)
返回值：布尔值
功能：校验字符串是否复合规则
exec:
格式：正则对象.exec(“字符串”)
功能：在匹配字符串，如果匹配成功，则返回的是一个数组，数组中存放的是第一个符合条件的内容
如果匹配不成功，则返回是null
如果有全局修饰符g，则exec第二次捕获会从
第一次捕获的位置开始向后去查找。
直到找不到了，返回null
再次捕获时，则从头开始。
<script>
var ser = /hello/i;
ser.test("hello word you");
alert(ser.test("hello"));
</script>
返回值为布尔值
exec:
格式：正则对象.exec(“字符串”)
<script>
var cer = /hello/ig;
var dsa = "hello word you"
var arr = cer.exec(dsa);
alert(arr);
</script>
如果匹配成功，则返回的是一个数组，匹配不成功，则返回是null
字符串中使用正则
字符串的函数
- match（）
格式：字符串.match(正则)
功能：在字符串中匹配符合规则的内容
返回值：数组，匹配成功的内容
匹配没有成功，返回null - replace()
格式：字符串.replace(oldStr/正则，newStr)；
功能：将新的字符替换掉旧的字符 - split()
格式：字符串.split(“分割字符”/正则)
功能：用分隔符将字符串进行分割
返回值：分割后的字符串组成的数组 - search()
功能：找到符合条件的第一个字符的位置（下标）
格式：字符串.search(字符串/正则)
返回值：找到则返回下标
未找到则返回-1
<script>
// match()
var str = /are you ok/ig;
var ser = "white are you doing";
console.log(ser.match(/Doing/ig));
</script>
返回值：数组，匹配成功的内容
匹配没有成功，返回null
replace()
<script>
// replace()替换
var ser = "white are you doing";
ser.replace(/are/g, "***");
console.log(ser.replace(/are/g, "***"));
</script>
split()
格式：字符串.split(“分割字符”/正则)
<script>
// split()分割数组/为字符串里面的内容进行分割/
// 分割为数组
var ser = "white are you doing";
ser.split(/ /g);
console.log(ser.split(/ /g));
</script>
search()找到符合条件的第一个字符的位置（下标）
<script>
// search()找到符合条件的第一个字符的位置（下标）
var ser = "white are you doing";
ser.search(/a/g);
console.log(ser.search(/a/g));
</script>
元字符
元字符：
组成正则的基础符号，具有特殊的含义。
.点 匹配单个的任意字符
返回值为布尔值
[范围] 匹配单个范围内的字符
[0-9] 匹配一个数字 范围为 0-9
[0-9a-zA-Z_]
[^范围] 匹配任意一个除了范围内的字符
[^0-9] 匹配任意一个非数字的字符 = [0-9]取反
\w 匹配单个的字母，数字和下划线 = [0-9a-zA-Z_]
\W 匹配单个非字母数字下划线
\d 匹配单个数字 = [0-9]
\D 匹配单个非数字 [^0-9]
空白字符
\s 匹配一个任意的空白字符 空格 /n /t
\S 匹配一个任意的非空白字符
锚字符
^ 行首匹配 必须以它后面字符开头
$ 行尾匹配 必须以它后面字符结尾
- 限定元字符 （x:表示任意的单个字符）
格式：
x? 匹配0个或者1个x
x+ 匹配至少一个x字符
x* 匹配任意一个x字符
x{m,n} 匹配至少m个字符，最多n个 包含n
x{m} 匹配m个字符
x{m,} 匹配m个–多个
() 小括号括起来的字符串会被当成一个字符去处理
| 类似或
修饰符：
i 不区分大小写
g 全文检索
m 换行匹配
在字符串中，如果换行，重新计算行首
补充：
trim() 去除字符串首尾的空格，返回值：去除后的字符串，不会对原有的字符串造成影响
<script>
var str = "wha-t are you do";
// . 匹配单个的任意字符
var aeg = /wha.t/i;
alert(aeg.test(str));
// 0-9的任意数
// var aeg = /wha[0-9]t/i;
// alert(aeg.test(str));
// 匹配单个的字母，数字和下划线
// var aeg = /wha[0-9a-zA-Z_]t/i;
// alert(aeg.test(str));
// [^0-9]匹配任意一个非数字的字符
// 区反
// var aeg = /wha[^0-9]t/ig;
// alert(aeg.test(str));
// \w 匹配单个的字母，数字和下划线 = [0-9a-zA-Z_]
// var aeg = /wha\wt/i;
// alert(aeg.test(str));
// \W 匹配单个非字母数字下划线
// var aeg = /wha\Wt/i;
// alert(aeg.test(str));
// \d 匹配单个数字 = [0-9]
// var aeg = /wha\dt/i;
// alert(aeg.test(str));
//\D 匹配单个非数字 [^0-9]
// var aeg = /wha\Dt/i;
// alert(aeg.test(str));
// x? 匹配0个或者1个x
// x+ 匹配至少一个x字符
// x* 匹配任意一个x字符
// x{m,n} 匹配至少m个字符，最多n个 包含n
// x{m} 匹配m个字符
// x{m,} 匹配m个--多个
// () 小括号括起来的字符串会被当成一个字符去处理
</script>
练习
\为转义字符
- 根据文件名判断文件是否是压缩包
zip,rar,gz,7z
zip|rar|gz|7z
<script>
var fileName = "1-2.rar";
var reg = /\w\.(zip|rar|gz|7z)$/;
alert(reg.test(fileName));
</script>
- 验证手机号
11位数字 1开头
<script>
var phone = "18590555864"
var reg = /^1\d{10}$/
alert(reg.test(phone));
</script>
- 判断输入的年份
四位数
<script>
var year = "1994"
var reg = /^\d{4}$/
alert(reg.test(year));
</script>
- 身份证号码
18位 以1-9开头 16位数字 数字/X
<script>
var idCard = "41142119990929110Y"
var reg = /^[1-9]\d{16}(\d|X)$/;
alert(reg.test(idCard));
</script>
- 校验字符串是否为纯中文
<script>
var idCard = "面对疾风吧"
var reg = /^[\u4e00-\u9fa5]+$/;
alert(reg.test(idCard));
</script>
- 用户名以英文大小写开头，长度为6-11位 （字母，数字，下划线）
<script>
var str = "w123qwer";
var reg = /^[a-zA-Z]\w{5,10}$/
alert(reg.test(str));
</script>
- 匹配整数
true -11 11 +12
false：11.1 -01
<script>
// x* 表示任意位x 0-多位
var str = "0";
var reg = /(^(\+|-)?[1-9]\d*$)|^0$/
alert(reg.test(str));
</script>
注册表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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;
}
#message {
margin-top: 5px;
font-size: 14px;
color: gray;
}
.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>
</html>
扫一扫
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
