<script>
*1.字面量的形式
const reg = /abc/
*2.内置构造函数的形式
const reg1 = new RegExp('abc')
console.log(reg) // /abc/
console.log(reg1) // /abc/
script>
1.匹配(test)
匹配字符串是否符合正则规则
符合—>true
不符合—>false
语法: 正则.test(字符串)
2.捕获
语法:正则.exec(字符串)
组成
1.元字符:正则表达式的规则符号
2.修饰符:修饰整个正则表达式的符号
1.\d
------ 表示一位(一个)数字(0~9)
2. \D
------ 表示 一位 非数字(除了0~9)
3. \w
------ 表示 数字(0~9)字母(a-zA-Z)下划线(_) 其中的 一个
4.\W
------ 表示 除了 数字(0~9)字母(a-zA-Z)下划线 这些的某一个字符
5. \
s ------ 表示 一位 空白字符
6. \S
------ 表示 一位 非空白字符
7..
------ 表示 一位 非换行的任意字符
8.\
------ 表示转义符
有意义的符号, 转为没有意义的文本
没有意义的文本, 转为有意义的符号
<script>
const reg = /\d/ // 表示字符串中 至少包含一个 数字(0~9)
console.log(reg.test('qwertyuiop')) // false
console.log(reg.test('!@#$%^&*')) // false
console.log(reg.test('1000')) // true
const reg1 = /\D/ // 表示字符串中 至少出现一个 非数字的内容
console.log(reg1.test('qwertyuiop')) // true
console.log(reg1.test('!@#$%^&*')) // true
console.log(reg1.test('1000')) // false
const reg = /\w/ // 表示字符串中 至少包含一个 数字(0~9)字母(a-zA-Z)下划线(_) 其中的 一个
console.log(reg.test('@#$%^&*')) // false
console.log(reg.test('@#$%_^&*')) // true
console.log(reg.test('y@#$%^&*')) // true
console.log(reg.test('6@#$%^&*')) // true
console.log(reg.test('abc_123')) // true
const reg1 = /\W/ //表示 字符串中 至少出现一个 数字(0~9)字母(a-zA-Z)下划线(_) 以外的 字符
console.log(reg1.test('@#$%^&*')) // true
console.log(reg1.test('@#$%_^&*')) // true
console.log(reg1.test('y@#$%^&*')) // true
console.log(reg1.test('6@#$%^&*')) // true
console.log(reg1.test('abc_123')) // false
const reg = /\s/ // 表示字符串中 至少出现一个 空白字符
console.log(reg.test('asd')) // false
console.log(reg.test('213')) // false
console.log(reg.test('#$%')) // false
console.log(reg.test('#$ %')) // true
const reg1 = /\S/ // 表示字符串 至少出现一个 非空白字符
console.log(reg1.test('asd')) // true
console.log(reg1.test('213')) // true
console.log(reg1.test('#$%')) // true
console.log(reg1.test('#$ %')) // true
console.log(reg1.test(' ')) // false
const reg = /./ // 表示字符串 至少出现一个 非换行的任意字符
console.log(reg.test('\n')) // false
console.log(reg.test('123\n')) // true
const reg1 = /\./ // 表示字符串中至少出现一个 小数点
console.log(reg1.test('100')) // false
console.log(reg1.test('1.00')) // true
script>
1.^
------ 表示开头
2.$
------ 表示结尾
<script>
const reg1 = /\d/ // 表示字符串至少出现一个数字
console.log(reg1.test('abc123def')) // true
const reg2 = /^\d/ // 表示字符串开头是一个数字
console.log(reg2.test('abc123def')) // false
console.log(reg2.test('123def')) // true
const reg3 = /\d$/ // 表示字符串结尾是一个数字
console.log(reg3.test('abc123def')) // false
console.log(reg3.test('abc123')) // true
const reg4 = /^\d$/ // 表示字符串只能是一个数字
console.log(reg4.test('abc123def')) // false
console.log(reg4.test('123def')) // false
console.log(reg4.test('123')) // false
console.log(reg4.test('1')) // true
script>
表示前边一个符号代表的内容出现多少次
1.*
------ 表示0~正无穷次
2. +
------ 表示 1~正无穷次
3. ?
------ 表示 0~1次
4. {n}
------ 表示 限定 n 次, 不能多也不能少
5. {n,}
------ 表示 最少 n 次
6. {n,m}
------ 表示 最少 n 次, 最多 m 次
<script>
const reg1 = /^\d*$/ // 这个字符串的数字只能出现 0~正无穷次
console.log(reg1.test('1')) // true
console.log(reg1.test('1a')) // false
const reg2 = /^\d+$/ // 这个字符串的数字只能出现1~正无穷
console.log(reg2.test('100')) // true
console.log(reg2.test('qwer')) // false
console.log(reg2.test('999qwer')) // false
const reg3 = /^\d?$/ // 这个字符串的数字只能出现 0~1 次
console.log(reg3.test('666')) // false
console.log(reg3.test('6')) // true
const reg4 = /^\d{2}$/ // 这个字符串的数字只能出现 2 次
console.log(reg4.test('666')) // false
console.log(reg4.test('66')) // true
console.log(reg4.test('6')) // false
const reg5 = /^\d{2,}$/ // 这个字符串的数字最少出现 2 次
console.log(reg5.test('666')) // true
console.log(reg5.test('66')) // true
console.log(reg5.test('6')) // false
const reg6 = /^\d{2,3}$/ // 这个字符串的数字最少出现 2 次 最多出现3次
console.log(reg6.test('6666')) // false
console.log(reg6.test('666')) // true
console.log(reg6.test('66')) // true
console.log(reg6.test('6')) // false
script>
1.()
2.|
3.[ ]
4.[^]
5.-
\d
\D
<script>
const reg = /(abc){2}/ // 表示 abc 这个整体 一定出现 2 次
console.log(reg.test('abcdef')) // false
console.log(reg.test('abcab')) // false
console.log(reg.test('abcabc')) // true
const reg = /(abc|def){2}/ // 这个字符串需要 abc 或者 def 出现两次
console.log(reg.test('abcabc')) // true
console.log(reg.test('abcdef')) // true
console.log(reg.test('defabc')) // true
console.log(reg.test('defdef')) // true
const reg = /^[a-c]$/ // 这个字符串只能是 a-c 其中的任意一个字符
console.log(reg.test('abc')) // false
console.log(reg.test('a')) // true
console.log(reg.test('b')) // true
console.log(reg.test('c')) // true
console.log(reg.test('@')) // false
script>
书写在正则表达式的外面,用于描述整个正则表达式
<script>
const reg = /^[a-c]$/
console.log(reg.test('a')) // true
console.log(reg.test('A')) // false
const reg1 = /^[a-c]$/i // 忽略大小写
console.log(reg1.test('a')) // true
console.log(reg1.test('A')) // true
script>
语法:正则.exec(字符串)
<script>
// 1. 没有捕获到
const reg = /\d{3}/
console.log(reg.exec('zxcvbnm')) // null
// 2.1 没有小括号, 也没有 g
const reg = /\d{3}/
console.log(reg.exec('z123xc456vb789nm000')) //123
console.log(reg.exec('z123xc456vb789nm000')) //123
console.log(reg.exec('z123xc456vb789nm000')) //123
// 2.2 有修饰符 g
const reg = /\d{3}/g
console.log(reg.exec('z123xc456vb789nm000')) // 123
console.log(reg.exec('z123xc456vb789nm000')) // 456
console.log(reg.exec('z123xc456vb789nm000')) // 789
console.log(reg.exec('z123xc456vb789nm000')) // 000
console.log(reg.exec('z123xc456vb789nm000')) // null
console.log(reg.exec('z123xc456vb789nm000')) // 123
// 2.3 有小括号
const reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
const str = '我的身份证号是 411371200411081234'
console.log(reg.exec(str)) //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '34']
const reg1 = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2}|\dx)/
const str1 = '我的身份证号是 41137120041108123x' //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '3x']
console.log(reg1.exec(str1))
script>
1.懒惰
正常捕获字符串的时候, 每次都从下标0开始
解决方式: 给正则添加一个修饰符 g
2.贪婪
每次在捕获的时候, 会尽可能的多捕获一些东西
解决方法: 在原有的修饰符后添加一个 ? 然后相当于开启非贪婪模式
<script>
* 贪婪限定符
* *
* +
* ?
* {n,}
* {n,m}
*
* 非贪婪限定符
* *?
* +?
* ??
* {n,}?
* {n,m}?
const str = ''
const reg = / / // 贪婪模式
console.log(reg.exec(str))
// ['']
const reg1 = / / // 非贪婪模式
console.log(reg1.exec(str))
//['']
script>
正则与字符串方法
<script>
//正则.test(字符串)
//正则。exec(字符串)
//字符串.replace search match
var str = "adearfa"
//var newstr = str.replace("a","*")
//var newstr = str.replace(a/g,"*")
//console.log(newstr)
//search
console.log(str.search("a"))
console.log(str.search(/a/))
console.log(str.search(/ax/))
//match 捕获内容
var datestr = "time is from 2029-01-01 12:20:20 to 2029-11-01 12:20:20"
//console.log(str.match("ad"))
console.log(datestr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/))
script>
好多元字符元字符
密码强度验证案例
<head>
<style>
*{
margin:0;
padding: 0;
}
form{
width:500px;
padding: 20px;
border: 3px solid #333;
margin: 50px auto;
}
form > label{
width: 100%;
height: 70px;
}
form > label > input{
width:100%;
box-sizing: border-box;
padding-left:30px;
font-size: 20px;
height:50px;
}
form > p{
width:100%;
margin-top: 10px;
display: flex;
justify-content: space-between;
}
form > p > span{
width:30%;
background-color: #ccc;
color: #fff;
height:30px;
font-size: 20px;
line-height: 30px;
text-align: center;
}
form > p > span:nth-child(1).active{
background-color: red;
}
form > p > span:nth-child(2).active{
background-color: orange;
}
form > p > span:nth-child(3).active{
background-color: green;
}
style>
head>
<body>
<form>
<label>
<input type="text">
label>
<p>
<span>弱span>
<span>中span>
<span>强span>
p>
form>
<script>
var oinput = document.querySelector("input")
var reg1 = /\d/
var reg2 = /[a-z]/i
var reg3 = /[~@#$%^&*()]/
var ospan=document.querySelectorAll("span")
oinput.oninput = function(evt){
console.log(this.value)
//console.log(evt.target.value)
var level = 0
if(reg1.test(this.value)) level++
if(reg2.test(this.value)) level++
if(reg3.test(this.value)) level++
//console.log(level)
for(var i=0;i<ospan.length;i++){
ospan[i].classList.remove("active")
if(i<level){
ospan[i].classList.add("active")
}
}
}
script>
body>