什么是正则
正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则 创建正则表达式(two way)
字面量的形式内置构造函数的形式
*1.字面量的形式
const reg = /abc/
*2.内置构造函数的形式
const reg1 = new RegExp('abc')
console.log(reg) // /abc/
console.log(reg1) // /abc/
正则的常用方法
1.匹配(test) 匹配字符串是否符合正则规则 符合—>true 不符合—>false 语法: 正则.test(字符串) 2.捕获 语法:正则.exec(字符串)
元字符
组成 1.元字符:正则表达式的规则符号 2.修饰符:修饰整个正则表达式的符号
1.普通元字符
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.\------ 表示转义符 有意义的符号, 转为没有意义的文本 没有意义的文本, 转为有意义的符号
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
2.边界元字符
1.^ ------ 表示开头 2.$ ------ 表示结尾
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
3.限定元字符
表示前边一个符号代表的内容出现多少次 1.* ------ 表示0~正无穷次 2. +------ 表示 1~正无穷次 3. ? ------ 表示 0~1次 4. {n} ------ 表示 限定 n 次, 不能多也不能少 5. {n,} ------ 表示 最少 n 次 6. {n,m} ------ 表示 最少 n 次, 最多 m 次
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
4.特殊符号
1.()
当成一个整体单独捕获(欠着)
2.|
或 字符为 或 左右两边的 都行
3.[ ]
包含 注意: [abcd] 包含其中一个即可 [] 实际代表的就是 一位字符
4.[^]
非 注意: [^abcd] 只要不是他们四个中的一个即可 [^] 实际代表的就是 一位字符
5.-
到(至) 通常与 包含 和 非 一起使用 [0-9] 数字 0~9 中的一个 \d [^0-9] 不是数字 0~9 中的 一个 \D [a-z] 小写 字母a~z [A-Z] 大写 字母A~Z
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
修饰符
书写在正则表达式的外面,用于描述整个正则表达式
i 忽略大小写g 全局
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
正则表达式----捕获exec
语法:正则.exec(字符串)
没有捕获到: 直接返回一个 null捕获到 2.1 没有小括号也没g 的情况, 永远捕获的都是下标0开始的第一个符合条件的 2.2 没有小括号, 但是有修饰符g 的情况 第一次捕获完成后, 第二次开始的时候, 会从第一次捕获结束的位置开始 第三次开始的时候, 会从第二次捕获结束的位置开始 当所有的匹配项都匹配完成后, 会返回一个 null 当再次捕获的时候, 就从下标0重新开始 2.3有小括号,下标0 还是我们正常捕获到的内容,从 下标1开始, 就是每个小括号捕获到的内容
// 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))
正则的两大特性
1.懒惰 正常捕获字符串的时候, 每次都从下标0开始 解决方式: 给正则添加一个修饰符 g 2.贪婪 每次在捕获的时候, 会尽可能的多捕获一些东西 解决方法: 在原有的修饰符后添加一个 ? 然后相当于开启非贪婪模式
* 贪婪限定符
* *
* +
* ?
* {n,}
* {n,m}
*
* 非贪婪限定符
* *?
* +?
* ??
* {n,}?
* {n,m}?
const str = '
const reg = /
console.log(reg.exec(str))
// ['
const reg1 = /
console.log(reg1.exec(str))
//['
正则与字符串方法
//正则.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})/))
好多元字符元字符
密码强度验证案例
*{
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;
}
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[i].classList.remove("active") if(i ospan[i].classList.add("active") } } } 好文推荐
本文由 用户 于 2024-05-18 发布在 金钥匙,如有疑问,请联系我们。
本文链接:https://www.51969.com/post/18113123.html
发表评论