●正则也叫正则表达式，又名 “规则表达式”
●正则是JS中的数据类型, 是一个复杂数据类型
●由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的
●我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格
var reg = /\d+/var str1 = '123'var str2 = 'abc'console.log(reg.test(str1)) // trueconsole.log(reg.test(str2)) // false●上面的变量 reg 就是定制好的规则
●检测 str1 这个字符串的时候，符合规则
●检测 str2 这个字符串的时候，不符合规则
创建一个正则表达式
●想制定 “规则”，必须要按照人家要求的方式来制定
●把一些字母和符号写在 // 中间的东西，叫做正则表达式，比如 /abcdefg/
●创建正则表达式有两个方式 字面量 和 构造函数创建
字面量创建
// 下面就是字面量创建一个正则表达式var reg = /abcdefg/●这个正则表达式就可以去检测字符串了
●这个正则表达式的意义是字符串中的必须要包含'abcdefg'这个片段
构造函数创建
// 下面就是构造函数创建一个正则表达式var reg = new RegExp('abcdefg')console.log(reg) // /abcdefg/●使用构造函数方式创建的和字面量创建的，得到的结果一样
两种创建方式的区别
●语法不一样
●书写标识符的时候
○字面量方式直接书写在正则的后面
○内置构造函数, 以第二个参数的方式传递
●拼接字符串
○字面量方式不接受拼接字符串
○内置构造函数方式, 可以拼接字符串
●基本元字符书写
○字面量方式的时候, 直接书写 \s\d\w
○内置构造函数书写的时候, 需要书写 \s\d\w
<!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>Document</title></head><body> <script> //书写标识符的区别 var reg = /abcd/gi console.log(reg) var reg2 = new RegExp('abcd', 'gi') console.log(reg2) // 拼接字符串的区别 var s = 'HH' var s2 = 'MM' // 不能解析变量 var reg = /(s|s2)/ //会报错 不能解析变量 // var reg = /(HH|MM)/ console.log(reg) // 因为第一个参数就是需要你以 字符串 的形式传递 所以可以拼接字符串 var reg2 = new RegExp('(' + s + '|' + s2 + ')') console.log(reg2) // 基本元字符的书写的区别 var reg = /\s\d\w/ console.log(reg) var reg2 = new RegExp('\s\d\w') console.log(reg2) </script></body></html>正则表达式的方法
●正则提供了一些方法给我们使用
●用来检测和捕获字符串中的内容的
test()方法——匹配
●作用：test方法是用来检测字符串是否符合我们正则的标准
●语法： 正则.test(字符串)
●返回值： boolean
○如果该字符串符合正则的规则, 那么就是 true
○如果该字符串不符合正则的规则, 那么就是 false
console.log(/\d+/.test('123')) // trueconsole.log(/\d+/.test('abc')) // falseexec()方法——捕获
●作用：exec方法是把字符串中满足条件的内容捕获出来
●语法： 正则.exec(字符串)
●返回值： 把字符串中符合正则要求的第一项以及一些其他信息，以数组的形式返回
○原始字符串中没有符合正则要求的字符串片段
■null
○原始字符串中有符合正则要求的片段
■正则没有 () 也没有 全局标识符g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 不管捕获多少次, 每次都是从原始字符串的索引 0 开始检索
■正则有全局标识符 g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 第二次捕获是从第一次的结束位置开始向后查询, 直到最后捕获不到为止, 再下一次的时候, 又从字符串的 索引0 开始检索
■有 ()
●返回的是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●从索引 1 开始, 依次是每一个小括号的单独内容
●注意: 按照小括号的开始标志, 来数是第几个小括号
<!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>Document</title></head><body> <script> //1. 没有符合要求的片段 var str = 'vgfdrtyuijkhvgfrtyu' var reg = /\d解析/ var res = reg.exec(str) console.log(res) //2. 有符合要求的片段 //2-1. 没有 () 没有 g var str = 'tfyu123gvh456gfh789gyhj' var reg = /\d解析/ var res = reg.exec(str) console.log(res) //2-2. 有全局标识符 g var str = 'tfyu123gvh456gfh789gyhj' var reg = /\d解析/g var res = reg.exec(str) console.log(res) console.log(reg.exec(str)) console.log(reg.exec(str)) console.log(reg.exec(str)) console.log(reg.exec(str)) //2-3. 有 () var str = '11010820030223001x' var reg = /(\d构造函数)(\d构造函数)(\d构造函数)((\d{4})(\d构造函数)(\d构造函数))\d构造函数(\d)(?:\d|x)/ var res = reg.exec(str) console.log(res) </script></body></html>●扩展: () 有两个意义
○一个整体
○单独捕获
○如果你想只使用一个意义, 整体的所用, 不想在捕获的时候单独捕获出来
○你可以写成 (?:)表示匹配但不捕获
// 单独捕获var reg = /(\d构造函数)(\d构造函数)(\d构造函数)(\d{4})(\d构造函数)(\d构造函数)\d构造函数(\d)(\d|x)/var res = reg.exec('13072220041010301x')console.log(res);正则表达式里面的符号
●知道了怎么创建一个正则表达式以后，我们就来详细的说一下正则表达式里面涉及到的一些符号了
元字符
基本元字符
●. ： 匹配非换行的任意字符 表示字符串中至少要有一个非换行的内容
●\ ： 转译符号，把有意义的 符号 转换成没有意义的 字符，把没有意义的 字符 转换成有意义的 符号
●\s ： 匹配空白字符（空格/缩进/制表符/...）表示字符串中至少包含一位 空白 内容
●\S ： 匹配非空白字符
●\d ： 匹配数字 表示字符串中至少包含一位 数字(0-9)
●\D ： 匹配非数字 表示字符串中至少包含一位 非数字 内容
●\w ： 匹配数字字母下划线 表示 一位 数字(0-9)字母(a-zA-Z)下划线(_) 中的任意一个
●\W ： 匹配非数字字母下划线 表示 一位 非数字字母下划线 中的任意一个
●有了元字符我们就可以简单的制定一些规则了
// 基本元字符// \d// 表示验证的字符串内必须包含一位数字var reg = /\d/console.log(reg.test('sfdgdfgfdhfgh'));console.log(reg.test('sfdgdfgfg4dhfgh7'));console.log(reg.test('123sfdgdfgfg4dhfgh7'));// \D// 表示验证的字符串中必须包含一位非数字var reg = /\D/console.log(reg.test('45613165465'));console.log(reg.test('45613 165465'));console.log(reg.test('45613d165465'));console.log(reg.test('45613%165465'));// \s// 表示验证的字符串中必须要包含一位空白内容var reg = /\s/console.log(reg.test('sgsdfhfgh'));console.log(reg.test('sgsdf hfgh'));console.log(reg.test('sgsdf hfgh'));console.log(reg.test(`sdgsdfg`));// \S// 表示验证的字符串中必须要包含一位非空白内容var reg = /\S/console.log(reg.test(' '));console.log(reg.test(' d '));console.log(reg.test(' # '));console.log(reg.test(' . '));// \w// 表示验证的字符船串中必须要包含一位数字字母和下划线var reg = /\w/console.log(reg.test('@#%#$%&^*&(*'));console.log(reg.test('@#%#$%&^2*&(*'));console.log(reg.test('@#%#$%&^b*&(*'));console.log(reg.test('@#%#$%&^_*&(*'));// \W// 表示验证的字符串中必须要包含一位非数字字母和下划线var reg = /\W/console.log(reg.test('asgd353454__'));console.log(reg.test('asgd353 454__'));console.log(reg.test('asgd3534__'));// .// 表示验证的字符串中必须要包含一位非换行以外的内容var reg = /./console.log(reg.test('\n'));console.log(reg.test('\ns'));console.log(reg.test('\n '));console.log(reg.test('\n@'));// \// 表示把有意义的点转成了没有意义的点var reg = /\d\.\d/console.log(reg.test('1.5'));console.log(reg.test('1#5'));限定符
注意: 一个限定符只能修饰符号前面的一个内容的出现次数
●* ： 前一个内容重复至少 0 次，也就是可以出现 0 ～ 正无穷 次
●+ ： 前一个内容重复至少 1 次，也就是可以出现 1 ～ 正无穷 次
●? ： 前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次
●{n} ： 前一个内容重复 n 次，也就是必须出现 n 次
●{n,} ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次
●{n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次
●限定符是配合元字符使用的
// 下面正则表示验证数字出现 0 ～ 正无穷次都可以var reg = /\d*/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // trueconsole.log(reg.test(str3)) // true// 下面正则表示验证数字出现 1 ～ 正无穷次都可以var reg = /\d+/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // trueconsole.log(reg.test(str3)) // true// 下面正则表示验证数字出现 0 ~ 1 次都可以var reg = /\d?/var str = 'abc'var str2 = 'abc1'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // true// 下面正则表示验证数字必须出现 3 次var reg = /\d解析/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // true// 下面正则表示验证数字出现 3 ～ 正无穷次var reg = /\d{3,}/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'var str4 = 'abcd1234567'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // trueconsole.log(reg.test(str4)) // true// 下面正则表示验证数字只能出现 3 ～ 5 次var reg = /\d{3,5}/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'var str4 = 'abc12345'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // trueconsole.log(reg.test(str4)) // true边界符
●^ ： 表示开头
●$ ： 表示结尾
●边界符是限定字符串的开始和结束的
// 下面表示从开头到结尾只能有数字，并且出现 3 ～ 5 次var reg = /^\d{3,5}$/var str = 'abc'var str2 = 'abc123'var str3 = '1'var str4 = '1234567'var str5 = '123'var str6 = '12345'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // falseconsole.log(reg.test(str4)) // falseconsole.log(reg.test(str5)) // trueconsole.log(reg.test(str6)) // true特殊符号
●() ： 限定一组元素
●[] ： 字符集合，表示写在 [] 里面的任意一个都行
●[^] ： 反字符集合，表示写在 [^] 里面之外的任意一个都行
●- ： 范围，比如 a-z 表示从字母 a 到字母 z 都可以
●| ： 或，正则里面的或 a|b 表示字母 a 或者 b 都可以
●现在我们就可以把若干符号组合在一起使用了
// () var reg = /^(abc)构造函数$/ console.log(reg.test('abcabc')); console.log(reg.test('aabbcc')); console.log(reg.test('abcc')); // | var reg = /^abc|def$/ console.log(reg.test('abcabc')); console.log(reg.test('abc')); console.log(reg.test('def')); console.log(reg.test('abcdef')); console.log(reg.test('defdef')); console.log(reg.test('sddhdggfhdgsf')); var reg = /^(abc|def)$/ console.log(reg.test('abcabc')); console.log(reg.test('abcdef')); console.log(reg.test('defdef')); console.log(reg.test('abcsddhdggfhdgsf')); console.log(reg.test('sddhdggfhdgsdef')); console.log(reg.test('abc')); console.log(reg.test('def')); // [] var reg = /^[abcd]$/ console.log(reg.test('a')); console.log(reg.test('b')); console.log(reg.test('c')); console.log(reg.test('d')); console.log(reg.test('e')); // [^] var reg = /^[^abcd]$/ console.log(reg.test('a')); console.log(reg.test('b')); console.log(reg.test('c')); console.log(reg.test('d')); console.log(reg.test('e')); // - var reg = /^[0-9]$/ console.log(reg.test('01')); console.log(reg.test('1')); console.log(reg.test('2')); console.log(reg.test('3')); console.log(reg.test('4')); console.log(reg.test('5')); console.log(reg.test('6')); console.log(reg.test('7')); console.log(reg.test('8')); console.log(reg.test('9'));标识符(修饰符)
●书写在正则表达式的外面, 专门用来修饰整个正则表达式的符号
●i ：ignore的简写 表示忽略大小写
○这个 i 是写在正则的最后面的
○/\w/i
○就是在正则匹配的时候不去区分大小写
●g ： global的简写 表示全局匹配
○这个 g 是写在正则的最后面的
○/\w/g
○就是全局匹配字母数字下划线
var reg = /^[a-z]$/iconsole.log(reg.test('s'));console.log(reg.test('g'));console.log(reg.test('y'));console.log(reg.test('u'));console.log(reg.test('A'));// 有全局修饰符 gvar str = 'sda123fdhm456fnbvb789gdghj345khmgn666bxcvxb'var reg = /\d解析/gconsole.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));字符串和正则合用的方法
●字符串中有一些方法也是可以和正则一起使用的
search
●作用：search 是查找字符串中是否有满足正则条件的内容
●语法：
○字符串.search(正则)
○字符串.search(字符串片段)
●返回值 ： 有的话返回开始索引，没有返回 -1
var reg = /\d解析/var str = 'hello123'var str2 = 'hello'console.log(str.search(reg)) // 5console.log(str2.search(reg)) // -1match
●作用：match 找到字符串中符合正则条件的内容返回
●语法：
○字符串.match(正则)
○字符串.match(字符串片段)
●返回值 ：
○没有标示符 g 的时候，是和 exec 方法一样
○有标示符 g 的时候，是返回一个数组，里面是匹配到的每一项
var reg = /\d解析/var str = 'hello123world456'var str2 = 'hello'console.log(str.match(reg))// ["123", index: 5, input: "hello123wor456", groups: undefined]console.log(str2.match(reg)) // nullvar reg = /\d解析/gvar str = 'hello123world456'var str2 = 'hello'console.log(str.match(reg))// ["123", "456"]console.log(str2.match(reg)) // nullreplace
●作用：replace 是将字符串中满足正则条件的字符串替换掉
●语法：
○字符串.replace('换下字符', '换上字符')
○字符串.replace(正则表达式, '换上字符')
●返回值 ： 替换后的字符串
○当你的第一个参数传递字符串的时候, 只能替换一个
○当你的第一个参数传递正则表达式的时候, 只能替换一个
○但是如果你的正则表达式有全局标识符 g, 那么有多少替换多少
<script> var str = 'fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf' console.log(str) //fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf var r1 = str.replace('HH', '**') console.log(r1) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf var r2 = str.replace(/HH/, '**') console.log(r2) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf var r3 = str.replace(/HH/g, '**') console.log(r3) //fcty**gu**ij**kn**jg**hfMMctMMdrMMf</script>案例——密码强度校验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 200px; border: 10px solid pink; margin: 20px auto; padding: 20px; } input { width: 100%; height: 50px; font-size: 24px; padding-left: 20px; box-sizing: border-box; } p { width: 100%; height: 30px; display: flex; justify-content: space-between; margin-top: 20px; } p>span { width: 30%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #ccc; color: #fff; font-size: 24px; } p>span:nth-child(1).active { background-color: red; } p>span:nth-child(2).active { background-color: orange; } p>span:nth-child(3).active { background-color: green; } </style></head><body> <div> <input type="text"> <p> <span>弱</span> <span>中</span> <span>强</span> </p> </div> <script> // 密码强度校验 // + 规则: // => 密码的规则: 数字 字母 符号(@#%&) // => 强度的规则: // -> 弱: 有一类 // -> 中: 有两类 // -> 强: 全包含 // 获取元素 var inp = document.querySelector('input') var spans = document.querySelectorAll('span') // 准备正则 // 只要包含一位数字就可以 var r1 = /\d/ // 只要包含一位字母就可以 var r2 = /[a-z]/i // 只要包含一位符号就可以 var r3 = /[@#%&]/ // 1. 给 inp 绑定 input 事件 // 随着输入或者删除内容实时触发 inp.oninput = function() { // 2. 拿到 inp 内输入的内容 var text = inp.value // 3. 准备一个表示级别的变量, 默认是 0 var level = 0 // 3-1. 依次使用正则校验 if (r1.test(text)) level++ if (r2.test(text)) level++ if (r3.test(text)) level++ // 在每一次添加类型之前, 给所有 span 清除掉类名 for (var i = 0; i < spans.length; i++) { spans[i].classList.remove('active') if (i < level) spans[i].classList.add('active') } } </script></body></html>案例——表单验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> form { width: 400px; border: 10px solid pink; padding: 20px; } label { display: block; height: 80px; position: relative; } input { height: 30px; font-size: 24px; padding-left: 20px; } label>span { position: absolute; left: 0; top: 35px; font-size: 20px; color: red; display: none; } </style></head><body> <form> <label> 用户名: <input class="username" type="text"> <span>请按照规则填写用户名</span> </label> <label> 密码: <input class="password" type="text"> <span>请按照规则填写密码</span> </label> <label> 手机号: <input class="phone" type="text"> <span>请按照规则填写手机号</span> </label> <label> 邮箱: <input class="email" type="text"> <span>请按照规则填写邮箱</span> </label> <input type="button" value="完善资料"> </form> <script> // 方案2: 统一验证 // 1. 给每一个 input 起一个单独的类名(或者标识, 用来区分) // 2. 准备正则, 以对象的形式准备正则, 对象的 键就使用 文本框的独立标识, 值就使用 正则 // 当你的文本框 className === 'username' 的时候, 就使用 regObj 内的一个叫做 username 对应的正则去验证 var regObj = { username: /^[0-9a-z]\w{5,11}$/i, password: /^\w{6,12}$/, phone: /^\d{11}$/, email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/ } // 3. 获取到所有的文本框 var inps = document.querySelectorAll('form input') // 3-2. 给每一个 input 绑定 表单输入 事件 inps.forEach(function(item) { item.oninput = function() { // 4-1. 拿到你正在输入的这个 input 文本框内的文本 var text = item.value // 4-2. 拿到验证该文本框需要使用的正则 var reg = regObj[item.className] // 4-3. 拿到应该显示的那个对应的 span 标签 var span = item.nextElementSibling // 4-4. 操作显示和隐藏 span.style.display = reg.test(text) ? 'none' : 'block' // if (reg.test(text)) { // span.style.display = 'none' // } else { // span.style.display = 'block' // } } }) </script></body></html>正则预查(扩展)
正向预查
●正向肯定预查:(?=)
●正向否定预查:(?!)
负向预查
●负向肯定预查:(?<=)
●负向否定预查:(?<!)
var str = 'windows2012windows2000windowsXPwindowsVistawindows98windows'// 1. 正向肯定预查// 需求: 我需要的是 windows, 但是是后面带有数字的 widnows// var reg = /windows(?=\d+)/g// 2. 正向否定预查// 需求: 我需要的是 windows, 但是后面不是数字的 windows// var reg = /windows(?!\d+)/g// 3. 负向肯定预查// 需求: 我需要的是 windows, 但是前面是数字的 windowsvar reg = /(?<=\d+)windows/g// 4. 负向否定预查// 需求: 我需要的是 windows, 但是前面不是数字的 windowsvar reg = /(?<!\d+)windows/g声明：本站内容部分源于网络转载，出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。文章内容仅供参考，请咨询相关专业人士。
如果无意之中侵犯了您的版权，或有意见、反馈或投诉等情况, 请联系本站，[qq:]
Copyright ©2024 编程密语 All rights reserved 版权所有 鲁ICP备09004228号-12
鲁公网安备37020202000738号