现在很多做前端的同学对于正则已经远远的抛于脑后,这篇文章简单写一下正则,帮助大家回顾,同时也是小白学习的好地方。
^ // 说明字符串的开始 $ // 说明字符串的结束 \b // 表示一个单词的开始或结束 \w // 表示:数字、字母、下划线 \s // 表示任意一个空白字符 \d // 可以代表任意一个数字 . // 点代表一个非换行的任意字符 [] // 字符类 ,例如[a-z],注意:反过来[z-a]会报错 * // 表示0~无穷多次 {n} // 表示重复n次 {n,m} // 表示重复n~m次 {n,} // 表示重复n~无穷多次 + // 代表重复1~无穷多次 ? // 代表重复0或1次 ,可用于懒惰匹配 | // 或 () // 分组
1. 放在/ /之中来书写 2. var regExp = new RegExp(‘正则表达式‘) 两种方法一样,本次先用第一种方法举例 例如:var num = /^\d{3}$/num值验证的是三位数字,^代表字符串开始$代表字符串结束,\d代表数字,{3}重复3次。 验证正则test():可用test()方法来验证是否含有符合要求的字符,返回值为布尔值(true/false),如:num.test(123)
可以写成:/^1[345678]\d{9}$/[]是字符类,可以验证是否存在[]中所拥有的字符。
<input type="number" id="tel"><span>请输入正确的手机号码</span>
// 取到input输入的值,丢失焦点后,开始验证手机号码,用onblur document.querySelector(#tel).onblur = function() { var val = this.value // 取到input输入的value值 var mobileReg = /^1[345678]\d{9}$/ //验证手机号正则 if(mobileReg.test(val)){ // 此时验证成功,写下想要执行的方法 }else{ // 此时验证失败,写下要执行的方法 } }
以上就是简单的正则表达式,如果你有兴趣可以简单的进阶一下:
刚才的例子是判断一个字符串是否符合要求,但正则不仅仅这么简单,还可以进行分组提取。
正则给我们提供了一个exec()方法,如果匹配成功,返回一个数组Array,匹配失败会返回null
我们可以利用此方法提取电话号的区号和本地号码,如:
var tel = ‘0434-123456‘; // 简单写一个电话号 var reg = /^(\d{3}|\d{4})-(\d{0,})$/ // 用()进行分组,区号可以是3位或4位,号码0~n个数值 var resule = reg.exec(tel) // 结果赋值 上述的reg所包含的正则带有(),可以为其分组,(\d{3}|\d{4})为一组,(\d{0,})为一组。 成功打印出来,返回数组格式,这样我们就可以轻松拿到想要的号段。 console.log(resule) // ["0434-123456", "0434", "123456"]
正则捕获
正则表达式中如果有分组,那么分组匹配的内容,就会被保存到RegExp.$1-RegExp.$99中,这种现象叫做正则表达式的捕获。
可能会有些不清楚,解释一下:RegExp代表的就是正则,$1-$99代表的是捕获到的每个字段,存在1-99当中。
那么RegExp.$1代表的就是第一个字段,RegExp.$2代表的是第二个字段。
举个例子,还拿刚才的电话号来说,他有分组,一个是区号,一个是本地号码,打印出来是一个数组,那么我们就可以通过RegExp.$1和RegExp.$2捕获到这两个分组的值。
var tel = ‘0434-123456‘; // 简单写一个电话号 var reg = /^(\d{3}|\d{4})-(\d{0,})$/ // 用()进行分组,区号可以是3位或4位,号码0~n个数值 reg.exec(tel) console.log(RegExp.$1) // "0434" console.log(RegExp.$2) // "123456"
正则修饰符
常用的修饰符有三个,分别为
i:忽略大小写 m:执行多次 g:全局匹配
用法:
如:
var num = /\d{3}/g var num = new RegExp(‘\\d{3}‘, ‘g‘); 这三个修饰符放在后边就可以。 仔细看会发现new构造出的正则中,\b,写成了\\b,这个不是错误,编辑器会转义成 用g举例说明: var str = ‘小白,13987654321234567;小林,13898765433;小张,13798765432!!!‘; var reg = /1\d{10}/g; var arr = str.match(reg) console.log(arr); // ["13987654321", "13898765433", "13798765432"]
此时会打印出三个数值,如果不加全局修饰符g,会打印出一条。
举例中的match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
上述例子全局找到符合正则reg的的字段。
与此类似的方法还有:
普通js方法
‘a b c‘.split(‘ ‘); // [‘a‘, ‘b‘, ‘‘, ‘‘, ‘c‘]
空格也会打印出来,加正则看一下:
‘a b c‘.split(/\s+/); // [‘a‘, ‘b‘, ‘c‘]
再例如:
‘a,b, c d‘.split(/[\s\,]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]
以上就是今天介绍的正则验证,如果能帮助你的话,记得点赞哦!
原文:https://www.cnblogs.com/xsd1/p/13066608.html