-
76~90(正则表达式)
1 正则表达式
1.1 什么是正则表达式
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也
是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(
匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript正则表达式完成表单验证。
1.2 正则表达式的特点
- 灵活性、逻辑性和功能性非常的强。
- 可以迅速地用极简单的方达到字符串的复杂控制。
- 对于刚接触的人来说,比较晦涩难懂。比如: ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
- 实际开发一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式 比如用户名: /1{3,16}$/
2 正则表达式在Javascript中的使用
2.1 创建正则表达式
- 通过调用RegExp对象的构造函数
var 变量名 = new RegExp(/表达式/);
- 通过字面量创建
var 变量名 = ‘/表达式/’;
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>Documenttitle> head> <body> <script> // 1. 利用RegExp对象来创建 正则表达式 var regexp = new RegExp(/123/); console.log(regexp); // 2. 利用字面量创建 正则表达式 var rg = /123/; // 3. test方法用来检测字符串是否符合正则表达式要求的规范 console.log(rg.test(123)); console.log(rg.test('abc')); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3 正则表达式中的特殊字符
3.1 正则表达式的组成
一个正则表达式
可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,比如/ab*c/。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如^、$、+等。特殊字符非常多,可以参考:
- MDN : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- jQuery手册:正则表达式部分
- 正则测试工具: http://tool.oschina.net/regex
3.2 边界符
正表达式中的边界符(位置符)用来
提示字符所在的位置,主要有两个字符
如果^和$在一起,表示必须是精确匹配
eg:
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>Documenttitle> head> <body> <script> // 边界符 ^ $ var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型 // /abc/只要包含有abc这个字符串返回的都是true console.log(rg.test('abc')); console.log(rg.test('abcd')); console.log(rg.test('aabcd')); console.log('------------------------'); var reg = /^abc/; console.log(reg.test('abc')); // true console.log(reg.test('abcd')); // true console.log(reg.test('aabcd')); // false console.log('------------------------'); var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范 console.log(reg1.test('abc')); // true console.log(reg1.test('abcd')); // false console.log(reg1.test('aabcd')); // false console.log(reg1.test('abcabc')); // false script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
3.3 字符类
字符类表示有一系列字符可供选择 ,只要匹配其中一个就可以了。
所有可供选择的字符都放在方括号内。- [-]方括号内部范围符-
- 字符组合
/2$/.test(‘a’); // true
- [^]方括号内部 取反符^
/[abc]$/.test(‘a’)/ // false
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>Documenttitle> head> <body> <script> // 字符类: []表示有一系列字符可供选择 只要匹配其中一个就行了 var rg = /[abc]/; // 只要包含有a或者包含有b 或者包含有c 都返回为true console.log(rg.test('andy')); console.log(rg.test('baby')); console.log(rg.test('color')); console.log(rg.test('red')); var reg = /^[abc]$/; // 三选一 只有是a 或者是b 或者是c 这三个字母才返回 true console.log(reg.test('aa')); console.log(reg.test('a')); console.log(reg.test('b')); console.log(reg.test('c')); console.log('----------------------'); var rg1 = /^[a-z]$/; // 26个英文字母任何一个字母返回 true 表示的是a到z的范围 console.log(rg1.test('a')); console.log(rg1.test('z')); console.log(rg1.test(1)); console.log(rg1.test('A')); // 字符组合 var rg2 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回true console.log(rg2.test('a')); console.log(rg2.test('B')); console.log(rg2.test('8')); console.log(rg2.test('-')); console.log(rg2.test('_')); console.log(rg2.test('!')); console.log('-------------------------'); // 如果中括号里面有^表示取反的意思 千万和边界符^别混淆 var rg3 = /^[^a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回true console.log(rg3.test('a')); console.log(rg3.test('B')); console.log(rg3.test('8')); console.log(rg3.test('-')); console.log(rg3.test('_')); console.log(rg3.test('!')); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
3.4 量词符
量词符用来
设定某个模式出现的次数
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>Documenttitle> head> <body> <script> // 量词符 // 简单理解: 就是让下面的a这个字符重复多少次 // * 相当于 >= 0 可以出现0次或者很多次 var reg = /^a*$/; console.log(reg.test('')); console.log(reg.test('a')); console.log(reg.test('aaaa')); // + 相当于 >= 1 可以出现1次或者很多次 var reg = /^a+$/; console.log(reg.test('')); // false console.log(reg.test('a')); // true console.log(reg.test('aaaa')); // true // ? 相当于 1 || 0 var reg = /^a?$/; console.log(reg.test('')); // true console.log(reg.test('a')); // true console.log(reg.test('aaaa')); // false // {3} 就是重复3次 var reg = /^a{3}$/; console.log(reg.test('')); // false console.log(reg.test('a')); // false console.log(reg.test('aaaa')); // false console.log(reg.test('aaa')); // true // {3, } 大于等于3 var reg = /^a{3,}$/; console.log(reg.test('')); // false console.log(reg.test('a')); // false console.log(reg.test('aaaa')); // true console.log(reg.test('aaa')); // true // {3, 16} 大于等于3 并且小于等于16 var reg = /^a{3,6}$/; console.log(reg.test('')); // false console.log(reg.test('a')); // false console.log(reg.test('aaaa')); // true console.log(reg.test('aaa')); // true console.log(reg.test('aaaaaaa')); // false script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
案例: 用户名验证
功能需求:
- 如果用户名输入合法,则后面提示信息为:用户名合法，并且颜色为绿色
- 如果用户名输入不合法,则后面提示信息为:用户名不符合规范，并且颜色为红色
分析:
- 用户名只能为英文字母,数字,下划线或者短横线组成，并且用户名长度为6~16位
- 首先准备好这种正则表达式模式/$[a-zA-Z0-9-_]{6,16}^/
- 当表单失焦点就开始验证.
- 如果符合正则规范,则让后面的span标签添加right类.
- 如果不符合正则规范, 则让后面的span标签添加wrong类
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>Documenttitle> <style> span { color: #aaa; font-size: 14px; } .right { color: green; } .wrong { color: red; } style> head> <body> <input type="text" class="uname"><span class="message">请输入用户名span> <script> // 量词是设定某个模式出现的次数 var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线 但是有边界符和[] 这就限定了只能多选一 // {6,16}中间不要有空格 // console.log(reg.test('a')); // console.log(reg.test('8')); // console.log(reg.test('18')); // console.log(reg.test('aa')); // console.log('------------------'); // console.log(reg.test('andy-red')); // console.log(reg.test('andy_red')); // console.log(reg.test('andy007')); // console.log(reg.test('andy!007')); var uname = document.querySelector('.uname'); var span = document.querySelector('span'); uname.onblur = function() { if (reg.test(this.value)) { span.className = 'right'; span.innerHTML = '用户名输入正确'; } else { span.className = 'wrong'; span.innerHTML = '用户名输入错误'; } } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
3.5 括号总结
- 大括号量词符.里面表示重复次数
- 中括号字符集合。匹配方括号中的任意字符.
- 小括号表示优先级
可以在线测试: https://c.runoob.com/
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>Documenttitle> head> <body> <script> // 中括号 字符集合 匹配方括号中的任意字符 var reg = /^[abc]$/; // a也可以 b也可以 c也可以 a || b || c // 大括号 量词符 里面表示重复次数 var reg = /^abc{3}$/; // 它只是让c重复三次 abccc console.log(reg.test('abc')); console.log(reg.test('abcabcabc')); console.log(reg.test('abccc')); // 小括号 表示优先级 var reg = /^(abc){3}$/; // 让abc重复三次 abcabcabc console.log(reg.test('abc')); console.log(reg.test('abcabcabc')); console.log(reg.test('abccc')); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
3.6 预定义类
预定义类指的是
某些常见模式的简写方式
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>Documenttitle> head> <body> <script> // 座机号码验证: 全国座机号码 两种格式: 010-12345678 或者 0530-1234567 // 正则里面的或者符号 | // var reg = /^\d{3}-\d{8} | \d{4}-\d{7}$/; var reg = /^\d{3,4}-\d{7,8}$/ script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
案例:表单验证
分析:
- 手机号码: /^1[3|4|5|7|8][0-9]{9}$/
- QQ: [1-9][0-9]{4,}(腾讯QQ从10000开始)
- 昵称是中文:3{2,8}$
- 短信验证码:^\d{6}$
- 验证密码
window.onload = function () { var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式 var regqq = /[1-9]\d{4,}/; var regnc = /^[\u4e00-\u9fa5]{2,8}$/; var regmsg = /^\d{6}$/; var regpwd = /^[a-zA-Z0-9_-]{6,16}$/; var surepwd = document.querySelector('#surepwd'); var tel = document.querySelector('#tel'); var qq = document.querySelector('#qq'); var nc = document.querySelector('#nc'); var msg = document.querySelector('#msg'); var pwd = document.querySelector('#pwd'); regexp(tel, regtel); // 手机号码 regexp(qq, regqq); // qq号码 // 表单验证的函数 regexp(nc, regnc); // 昵称 regexp(msg, regmsg); // 短信验证 regexp(pwd, regpwd); // 密码框 function regexp(ele, reg) { ele.onblur = function () { if (reg.test(this.value)) { this.nextElementSibling.className = 'success'; this.nextElementSibling.innerHTML = '恭喜您输入正确'; } else { this.nextElementSibling.className = 'error'; this.nextElementSibling.innerHTML = '格式不正确,请重新输入'; } } }; surepwd.onblur = function () { if (this.value === pwd.value && this.value != '') { this.nextElementSibling.className = 'success'; this.nextElementSibling.innerHTML = '恭喜您输入正确'; } else { this.nextElementSibling.className = 'error'; this.nextElementSibling.innerHTML = '两次密码输入不一致'; } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
4 正则表达式中的替换
4.1 replace替换
replace()方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp/substr.replacement)
- 第一个参数:被替换的字符串或者则表达式
- 第二个参数:替换为的字符串
- 返回值是一个替换完毕的新字符串
4.2 正则表达式参数
/表达式/[switch]
switch(也称为修饰符)按照什么样的模式来匹配,有三种值:
- g(global):全局匹配
- i:忽略大小写
- gi:全局匹配 + 忽略大小写
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>Documenttitle> head> <body> <textarea name="" id="message" cols="30" rows="10">textarea> <button>提交button> <div>div> <script> // 替换replace // var str = 'yaya和pink'; // // var newStr = str.replace('yaya', 'baby'); // var newStr = str.replace(/yaya/, 'baby'); // console.log(newStr); var text = document.querySelector('textarea'); var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.onclick = function() { div.innerHTML = text.value.replace(/激情|gay/g, '**'); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
-
相关阅读:
解释器模式简介
渗透测试漏洞挖掘技巧
model.fit回调函数使用
详解利用高斯混合模型拆解多模态分布 + 精美可视化
LeetCode 189. 轮转数组
四川众佰诚：抖音开店后怎么运营的
更改 Eclipse 软件源（配置镜像）
转转集团宣布品牌焕新背后：黄炜继续模仿爱回收，公司多次被处罚
JD-H5开发
关于反向竞价的6个常见误解，采购一定要知道
- 原文地址：https://blog.csdn.net/m0_57809042/article/details/127454245
