精品课程网站建设现状,做的比较好的网站,青岛网站建设模板下载,网页制作素材可爱图片文章目录 #x1f449; 一、正则表达式的概念#x1f449; 二、常见使用正则表达式的方法① RegExp 对象方法1. 创建 RegExp 对象的语法2. RegExp对象方法① compile(value)② exec(value)③ test(value)③ reg.toString() ② 支持正则表达式的 String 对象的方法1. search()… 文章目录 一、正则表达式的概念 二、常见使用正则表达式的方法① RegExp 对象方法1. 创建 RegExp 对象的语法2. RegExp对象方法① compile(value)② exec(value)③ test(value)③ reg.toString() ② 支持正则表达式的 String 对象的方法1. search() 检索正则匹配字符串2. match(pattern) 提取字符串中符合正则匹配的字符3. replace() 根据正则进行字符替换4. split() 根据正则将字符串进行分隔 三、正则修饰符 四、常用正则表达式日常更新1. 匹配ASCII码范围2. 匹配汉字3. 邮政编码4. 电子邮件5. 验证是否含有^%,;?$\等违规字符6. 数值类型筛选7. 仅数字加英文8. 密码校验9. 全正则校验登录10. 强密码正则11. 身份证正则校验加强型12. 域名正则13. 车牌号码正则14. 匹配特定字符 五、正则常用理论知识 参考文献往期内容 ‍ 大家新年好啊 新年第一篇文章主要想跟大家分享一下在Javascript中正则的使用方法以及一些常用的正则表达式希望这篇文章能够帮助到你。 下面我们开始今天的内容吧 一、正则表达式的概念 正则表达式又称规则表达式,Regular Expression在代码中常简写为regex、regexp或RE。是一种文本模式包括普通字符例如a 到 z 之间的字母和特殊字符称为元字符是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串通常被用来检索、替换那些符合某个模式规则的文本。 正则表达式是描述字符模式的对象正则表达式用于对字符串模式匹配及检索替换是对字符串执行模式匹配的强大工具。 有一点需要明确知道正则表达式只能对字符串进行操作。 二、常见使用正则表达式的方法 ① RegExp 对象方法 RegExp对象是原生JavaScript中表示正则表达式的对象是正则表达式regular expression的简写。 1. 创建 RegExp 对象的语法 两种语法方式一是新建RegExp对象另一个直接创建。 // 语法一 var pattnew RegExp(pattern,attributes);// 语法二 var patt/pattern/attributes;// 参数 pattern 是一个字符串指定了正则表达式的模式或其他正则表达式。/* 参数 attributes 是一个可选的字符串包含属性 g、i 和 m分别用于指定全局匹配、区分大小写的匹配和多行匹配 ECMAScript 标准化之前不支持 m 属性。如果 pattern 是正则表达式而不是字符串则必须省略该参数。*/ 2. RegExp对象方法 方法描述compile在 1.5 版本中已废弃。 编译正则表达式。exec检索字符串中指定的值。返回找到的值并确定其位置。test检索字符串中指定的值。返回 true 或 false。toString返回正则表达式的字符串。 ① compile(value) compile() 可以重新指定正则实例的规则与修饰符。 var pattern /e/i; pattern.compile(a,g)规则由大小写检查 e 变为全局搜索 a ② exec(value) 检索字符串中的指定值返回值是被找到的值。如果没有发现匹配则返回 null 。 var patt1new RegExp(e); document.write(patt1.exec(The best things in life are free));由于该字符串中存在字母 “e”以上代码的输出将是e ③ test(value) 检索字符串中的指定值返回值是true或false。 var patt1new RegExp(e); document.write(patt1.test(The best things in life are free));由于该字符串中存在字母 “e”以上代码的输出将是true ③ reg.toString() 返回正则表达式的字符串值。 var patt new RegExp(表达式, g); var res patt.toString(); console.log(res); // “ /表达式/g ”由于该字符串中存在字母 “e”以上代码的输出将是true ② 支持正则表达式的 String 对象的方法 方法描述search检索与正则表达式相匹配的值。match找到一个或多个正则表达式的匹配。replace替换与正则表达式匹配的子串。split把字符串分割为字符串数组。 1. search() 检索正则匹配字符串 search() 方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串。 根绝匹配规则pattern在字符串中检索指定的结果如果检索到则返回该结果首字母在原字符中的索引否则返回-1。其功能类似于indexOf, 只是indexOf并不支持正则匹配。 var str Mr. Blue has a blue house var n str.search(blue); var n1 str.search(Mr); console.log(n, n1); // -- 14, 02. match(pattern) 提取字符串中符合正则匹配的字符 match 在功能上与正则对象自带的方法exec很类似。 match 根据匹配规则pattern匹配指定的字符串str如果匹配成功则返回一个数组格式的结果用于存放匹配文本有关的信息如果没有匹配到则返回null。 var result str.match(pattern);result -- 当前的匹配结果。 result[0] -- 从数组中读取当前的匹配结果。 result[1] .... --- 指定分组中捕获的内容。 result[n1] result.index -- 当前匹配结果的首字母在给定字符串中的索引。 result.input -- 进行匹配操作的给定字符串。如果match的匹配规则是一个正则并且具有全局g属性那么match返回的匹配结果便是一个包含所有匹配结果的纯数组。var str abcdabcda; var result str.match(/a/g); result -- [a,a,a] result.input -- undefined result.index -- undefined 3. replace() 根据正则进行字符替换 replace()方法用于在字符串中用一些字符替换另一些字符或替换一个与正则表达式匹配的子串。 var str blue123blue; var nstr.replace(/blue/gi,red); console.log(n); // red123red4. split() 根据正则将字符串进行分隔 语法str.split(pattern,length) 根据规则pattern将字符串拆分为数组拆分后的数组并不包含作为拆分依据的那个参数。 默认情况下是空字符进行拆分也就是每个任意的字符作为一个数组元素。 pattern参数可以是正则表达式也可以是单纯的字符或字符串。 length参数用于设置拆分数组后数组最大的长度即数组元素的个数。缺省该项表示将字符全部拆分为数组。 var str hellow word!; str.spilit(); // -- 空字符并非空格字符[h, e, l, l, o, w, , w, o, r, l, d, !] str.split(,5) // -- [h, e, l, l, o] str.split(/\o/g) // -- [hell, w w, rld!]三、正则修饰符 “修饰符” 其含义类似于正则实例的附加属性。用于说明正则规则适用匹配的范围。 i : 表示区分大小写字母匹配。m 表示多行匹配。g : 表示全局匹配。 在非全局的情况下正则会根据指定的“规则”从左至右 对字符串进行匹配一旦规则匹配完便会停止匹配操作返回结果。 在全局的的情况下正则会根据指定的“规则” 从左至右 对字符串进行匹配一旦规则匹配完便会在当前字符串匹配位置重新使用“规则”继续向下匹配一直到字符串匹配完成。 注i,g,m三个修饰符可以相互组合同时使用 四、常用正则表达式日常更新 1. 匹配ASCII码范围 \x00 表示十进制0 \xff 表示十进制2550-255 正好是ASCII码表可表示的范围。 正则 /[\x00-\xff]/g 说明同理 /[^\x00-\xff]/g 则表示匹配汉字或者是全角字符。2. 匹配汉字 \u4e00 : 在Unicode码中汉字的开始编码\u9fa5 : 在Unicode码中汉字的结束编码。 正则 /^[\u4e00-\u9fa5]$/ 3. 邮政编码 邮政编码必须为数字长度为6位且第一位不能为0示例224000 正则 /[1-9]\d{5}/ 4. 电子邮件 规则以为上下文表示左侧只能是数字字母及下划线组成。 而右侧又以.符号为上下文左侧与上述一样而右侧只能为字母结尾。 正则 /^([\w\-\.])([\w\-])\.([a-zA-Z]{2,4})$/ 5. 验证是否含有^%,;?$等违规字符 常用于名称和密码筛选特殊字符 正则 /[^%,;?$\x22]/6. 数值类型筛选 ^[1-9]\d*$　 　 //匹配正整数 ^-[1-9]\d*$ 　 //匹配负整数 ^-?[1-9]\d*$　　//匹配整数 ^[1-9]\d*|0$　 //匹配非负整数正整数 0 ^-[1-9]\d*|0$　 //匹配非正整数负整数 0 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0|0)$　 //匹配浮点数 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0|0$　　 //匹配非负浮点数正浮点数 0 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0|0$ //匹配非正浮点数负浮点数 07. 仅数字加英文 正则/^[a-zA-Z0-9]$/8. 密码校验 6-20位英文字母、数字或者符号除空格且字母、数字和标点符号至少包含两种 /^(?![\d]$)(?![a-zA-Z]$)(?![^\da-zA-Z]$)([^\u4e00-\u9fa5\s]){6,20}$/,9. 全正则校验登录 var reg1 /^[\u4e00-\u9fa5_a-zA-Z0-9]$/ if(!reg1.test(this.username)) {this.dialog 用户名/手机号请输入中英文/数字/下划线;return false; }var reg2 /^.{1,50}$/ if(!reg2.test(this.username)) {this.dialog 用户名/手机号长度在 1 到 50 个字符;return false; }var reg3 /^[a-zA-Z0-9_]*$/ if(!reg3.test(this.password)) {this.dialog 密码请输入字母/数字/下划线;return false; }var reg4 /^.{6,24}$/ if(!reg4.test(this.password)) {this.dialog 密码长度在 6 到 24 个字符;return false; } 10. 强密码正则 基础密码正则以字母开头长度在6~18之间只能包含字母、数字和下划线 let isTrue ^[a-zA-Z]\w{5,17}$;中等强度密码必须包含大小写字母和数字的组合不能使用特殊字符长度在8-10之间 let pwd /^(?.\d)(?.[a-z])(?.[A-Z]).{8,10}$/高强度密码正则最少6位包括至少1个大写字母1个小写字母1个数字1个特殊字符 let isTrue /^.*(?.{6,})(?.*\d)(?.*[A-Z])(?.*[a-z])(?.*[!#$%^*? ]).*$/;11. 身份证正则校验加强型 第一代身份证只有15位数第二代身份证有18位数各位按照需求来选择表达式。 //第二代身份证号码正则let isTrue /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//第一代身份证正则表达式(15位)let isTrue/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;12. 域名正则 let reg [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})/.?; 13. 车牌号码正则 let isTrue /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;14. 匹配特定字符 ^[A-Za-z]$　 　//匹配由26个英文字母组成的字符串 ^[A-Z]$　 //匹配由26个英文字母的大写组成的字符串 ^[a-z]$　　 //匹配由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]$　　 //匹配由数字和26个英文字母组成的字符串 ^\w$　　 //匹配由数字、26个英文字母或者下划线组成的字符串 五、正则常用理论知识 贪婪,*,?,{m,n}等默认是贪婪匹配即尽可能多匹配也叫最大匹配 如果后面加上?就转化为非贪婪匹配需要高版本支持获取默认用(x|y)是获取匹配很多时候只是测试不一定要求得到所匹配的数据尤其在嵌套匹配或大数据中就要用非获取匹配 (?:x|y)这样提高了效率优化了程序。消耗默认是消耗匹配一般在预查中是非消耗匹配。 举个例子 2003-2-8要变为2003-02-08 如果用 /-(\d)-/ 第二次匹配将从8开始从而只替换第一个2错误 如果用 /-(\d)(?-)/ 则第二次匹配从第二个-开始即不消耗字符预查js中分为正向预查和负向预查 如上面的(?pattern)是正向预查在任何匹配 pattern 的字符串开始处匹配查找字符串。还有(?!pattern)是负向预查在任何不匹配 pattern 的字符串开始处匹配查找字符串。负向预查有时会用在对[^]的扩充[^]只是一些字符而?!可以使整个字符串。回调一般用在替换上即根据不用的匹配内容返回不用的替换值从而简化了程序需要高版本支持引用\num 对所获取的第num个匹配的引用。 例如‘(.)\1\1’ 匹配AAA型。‘(.)(.)\2\1’ 匹配ABBA型。 参考文献 JavaScript RegExp 正则表达式基础详谈 - Jack_孟 javascript中使用正则的方法有哪些【VUEElemet 】最全正则验证 表单验证 注意事项 往期内容 elementUI组件样式及功能补全 实现点击steps组件跳转对应步骤 vueUse工具集初识 vueUse 和 useIntersectionObserver 响应式监听目标元素的可见性实现组件异步加载 elementUi 组件插件 el-table表格拖拽修改列宽及行高 及 使用注意事项 今日小技巧Axios封装接口请求增加防抖功能