正则表达式
// TODO
正则表达式(regular expression)描述了字符串的“构成模式”,经常被用于检查字符串是否符合预定的格式要求
正则表达式“按位”描述规则,是指它是一位一位的描述字符串的构成形式
正则表达式可以调用 test()方法,检查某字符串是否符合正则表达式规定的规则
正则表达式的创建
- 使用
/内容/
的语法形式,可以快速创建正则表达式 - 也可以使用 new RegExp('内容')的形式,创建正则表达式(这种写法有坑!)
警告
如果使用 new RegExp() 写法,反斜杠需要多写一个,比如
/^\d$/
和new RegExp('^\\d$')
是相同的意思 - 使用 typeof 运算符检查正则表达式的类型,结果是 object
元字符
"元字符”是指 一位 指定类型的字符

开头和结尾

元字符:|
正则中使用竖线" | "表示或,表示只匹配指定几项之间的一项
eg:只匹配纯数字或纯字母
var str1 = '1111'
var str2 = 'imooc'
var str3 = '1111imooc'
var reg = /^\d+$|^[a-zA-Z]+$/
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // false
注意
反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。在 JavaScript 中,字符串使用单引号或者双引号来起始或者结束。
var txt="We are the so-called "Vikings" from the north."
console.log(txt)
这意味着上面的字符串将被截为:We are the so-called。要解决这个问题,就必须把在 "Viking" 中的引号前面加上反斜杠。这样就可以把每个双引号转换为字面上的字符串。
下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中:

最佳实践
不管一个符号有没有特殊意义,都可以在其之前加上一个\以确保它表达的是这个符号本身
eg 某产品批号形式为:123.45^67#89,请使用正则表达式检查某字符串是否符合此格式
提示
.(点)必须前加\,因为在正则表达式中元字符.代表匹配任意字符
const reg = /^123\.45\^67\#89$/
const n1 = '123.45^67#19'
console.log(reg.test(n1)) //false
方括号表示法
使用方括号,比如[xyz]
,可以创建个字符集合,表示匹配方括号中的任意字符
eg:比如某学校的学号规定:第 1 位是一个字母,b 表示本科生, y 表示研究生,后面是 7 位数字,用正则表示为:
;/^[by]\d{7}$/ //{7}为量词
提示
可以使用短横-来指定一个字符范围,^表示否定

量词

eg 请验证字符串是否符合手机号码的规则:11 位数字,并且肯定以 1 开头
;/^1\d{10}$/
修饰符
修饰符也叫作标志(flags),用于使用正则表达式实现高级搜索

修饰符的使用:

正则表达式的相关方法

.png)
注意
只有一个结果原因:没有加 g 修饰符
exec()方法最有趣的是,有"g′修饰符的正则表达式将自动成为“有状态”的,这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历

字符串的相关方法

var str = 'abc123def4567ghi89'
// search()方法,很像indexOf(),返回查找到的第一个下标,如果找不到就是-1
var result1 = str.search(/\d+/g)
var result2 = str.search(/m/g)
console.log(result1) // 3
console.log(result2) // -1
// match()方法,返回查找到的数组,找不到就是null
var result3 = str.match(/\d+/g)
console.log(result3) // ["123", "4567", "89"]
// replace()方法,进行替换
var result4 = str.replace(/[a-z]+/g, '*') // 注意+表示贪婪的,尽可能多的连续匹配小写字母
console.log(result4) // *123*4567*89
// split()方法,进行字符串拆为数组
var result5 = str.split(/\d+/g)
console.log(result5) // ["abc", "def", "ghi", ""]
正则的应用
实际上,很多正则表达式不需要我们自己写,可以通过搜索引擎查找,可以拿来即用
表单验证 DEMO
<!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>demo</title>
<style>
body {
font-size: 13px;
}
.form {
width: 520px;
padding: 20px 50px;
margin: 50px auto;
border: 2px solid orange;
border-radius: 10px;
}
.form p {
margin-bottom: 30px;
}
.form input {
width: 180px;
margin-right: 15px;
}
.form .required {
color: red;
}
.form .nameField {
margin-left: 5px;
}
.form .tips {
color: orange;
}
.form .strength {
width: 35px;
height: 5px;
background-color: rgb(209, 207, 207);
display: inline-block;
}
.form .warning {
color: red;
margin-left: 10px;
display: none;
}
.form .submit {
width: 200px;
height: 35px;
margin-left: 160px;
border: none;
outline: none;
background-color: #ff6500;
color: white;
border-radius: 6px;
cursor: pointer;
}
.form .submit:hover {
background-color: #ff9900;
}
</style>
</head>
<body>
<div class="form">
<p>
<span class="required">*</span>用 户 名:
<input
type="text"
class="nameField"
id="nameField"
placeholder="用户名设置成功后不可修改"
/>
<span class="tips" id="tips">6-30位字母、数字或“_”,字母开头</span>
</p>
<p>
<span class="required">*</span>登陆密码:
<input type="password" id="passWord" placeholder="6-20位字母或数字" />
<span class="strength" id="level1"></span>
<span class="strength" id="level2"></span>
<span class="strength" id="level3"></span>
<span class="warning" id="warning">6-20位字母或数字</span>
</p>
<p>
<span class="required">*</span>确认密码:
<input
type="password"
id="confirmPsw"
placeholder="再次输入您的登录密码"
/>
<span id="dif"></span>
</p>
<button class="submit" id="submit">注册</button>
</div>
<script>
// 用户名输入框
var nameField = document.getElementById('nameField')
var tips = document.getElementById('tips')
var verifyName = false
nameField.onblur = function () {
if (/^[a-zA-Z]\w{5,29}$/.test(nameField.value)) {
// 正确
tips.innerText = '用户名输入正确'
tips.style.color = 'green'
verifyName = true
} else {
// 错误
tips.innerText = '6-30位字母、数字或“_”,字母开头'
tips.style.color = 'red'
verifyName = false
}
}
// 密码输入框
var passWord = document.getElementById('passWord')
var level1 = document.getElementById('level1')
var level2 = document.getElementById('level2')
var level3 = document.getElementById('level3')
var warning = document.getElementById('warning')
var verifyPsw = false
passWord.onblur = function () {
if (/^[a-zA-Z0-9]{6,20}$/.test(passWord.value)) {
// 正确
warning.style.display = 'none'
verifyPsw = true
if (
/^[0-9]{6,20}$/.test(passWord.value) ||
/^[a-z]{6,20}$/.test(passWord.value) ||
/^[A-Z]{6,20}$/.test(passWord.value)
) {
// 密码强度低
level1.style.backgroundColor = 'red'
level2.style.backgroundColor = 'rgb(209, 207, 207)'
level3.style.backgroundColor = 'rgb(209, 207, 207)'
} else if (
/^[0-9a-z]{6,20}$/.test(passWord.value) ||
/^[0-9A-Z]{6,20}$/.test(passWord.value) ||
/^[a-zA-Z]{6,20}$/.test(passWord.value)
) {
// 密码强度一般
level1.style.backgroundColor = 'red'
level2.style.backgroundColor = 'orange'
level3.style.backgroundColor = 'rgb(209, 207, 207)'
} else {
// 密码强度高
level1.style.backgroundColor = 'red'
level2.style.backgroundColor = 'orange'
level3.style.backgroundColor = 'green'
}
} else {
// 错误
verifyPsw = false
warning.style.display = 'inline'
level1.style.backgroundColor = 'rgb(209, 207, 207)'
level2.style.backgroundColor = 'rgb(209, 207, 207)'
level3.style.backgroundColor = 'rgb(209, 207, 207)'
}
}
// 密码确认框
var confirmPsw = document.getElementById('confirmPsw')
var dif = document.getElementById('dif')
var verifyConfirm = false
confirmPsw.onblur = function () {
if (!confirmPsw.value) {
// 空
dif.innerText = '输入框不能为空'
dif.style.color = 'red'
verifyConfirm = false
} else if (confirmPsw.value != passWord.value) {
// 不一致
dif.innerText = '两次密码输入不一致,请重新输入'
dif.style.color = 'red'
verifyConfirm = false
} else {
// 一致
dif.innerText = '两次输入一致'
dif.style.color = 'green'
verifyConfirm = true
}
}
// 注册按钮
var submit = document.getElementById('submit')
submit.onclick = function () {
if (verifyName && verifyPsw && verifyConfirm) {
// 满足条件
alert('信息填写正确')
} else {
// 不满足条件
alert('请填写正确的信息')
}
}
</script>
</body>
</html>
一些用过的正则
2022 手机号校验正则
;/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/