24 Star 19 Fork 0

Janking/Infinite-f2e-club

 / 详情

Js正则表达式

待办的
成员
创建于  
2017-07-24 12:13

正则表达式的作用:

最常用于表单验证。例如输入一个电话号码,测试输入的格式是否正确。
替换文本。正则也可用于匹配相应的文字,用于文本替换或删除。
从某个字符串中取出符合条件的字符串。

正则表达式的语法:

一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

创建正则表达式:

  1. 使用一个正则表达式字面量;
    例如:var reg = /a/gi;
  2. 调用RegExp对象的构造函数,实例化一个对象;
    例如:var reg = new RegExp("a","gi");

RegExp实例对象有五个属性

  • global:是否全局搜索,默认是false
  • ignoreCase:是否大小写敏感,默认是false
  • multiline:多行搜索,默认值是false
  • lastIndex:是当前表达式模式首次匹配内容中最后一个字符的下一个位置,每次正则表达式成功匹配时,lastIndex属性值都会随之改变。
  • source:正则表达式的文本字符串

记住一些常用的字符:

  • ^ :匹配输入的开始。如果多行标志被设置为true,那么也匹配换行符后紧跟的位置。
    例如,/^A/ 并不会匹配 "an A" 中的 'A',但是会匹配 "An E" 中的 'A'
    当 '^' 作为第一个字符出现在一个字符集合模式时,它将会有不同的含义。

  • $ :匹配输入的结束。如果多行标示被设置为true,那么也匹配换行符前的位置。
    例如,/t$/ 并不会匹配 "eater" 中的 't',但是会匹配 "eat" 中的 't'。

  • {n,m} :n 和 m 都是正整数。匹配前面的字符至少n次,最多m次。如果 n 或者 m 的值 是0, 这个值被忽略。
    例如,/a{1, 3}/ 并不匹配“cndy”中得任意字符,匹配“candy”中得a,匹配“caandy” 中得前两个a,也匹配“caaaaaaandy”中得前三个a。注意,当匹配“caaaaaaandy”时, 匹配的值是“aaa”,即使原始的字符串中有更多的a。

  • {n} :n是一个正整数,匹配了前面一个字符刚好发生了n次。
    比如,/a{2}/不会匹配“candy”中的'a',但是会匹配“caandy”中所有的a,以及“caaandy”中的前两个'a'。

  • {n,} :n是一个正整数,匹配了前面一个字符发生了n次或n次以上。

  • + :匹配前面一个表达式1次或者多次。等价于 {1,}。
    例如,/a+/匹配了在 "candy" 中的 'a',和在 "caaaaaaandy" 中所有的 'a'。

  • *:匹配前一个表达式0次或多次。等价于 {0,}。
    例如,/bo*/会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b',但是在 "A goat grunted" 中将不会匹配任何东西。

  • ? :匹配前面一个表达式0次或者1次。等价于 {0,1}。
    例如,/e?le?/ 匹配 "angel" 中的 'el',和 "angle" 中的 'le' 以及"oslo' 中的'l'。
    如果紧跟在任何量词 *、 +、? 或 {} 的后面,将会使量词变为非贪婪的(匹配尽量少 的字符),和缺省使用的贪婪模式(匹配尽可能多的字符)正好相反。
    例如,对 "123abc" 应用 /\d+/ 将会返回 "123",如果使用 /\d+?/,那么就只会匹配到 "1"。

  • | :匹配x或y。例如,“z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。

  • (…) :分组.将几个项目分为一个单元.这个单元可由 *、+、?和|等符号使用,而且还可以记住 和这个组匹配的字符以供此后引用使用。

  • [……] :位于括号之内的任意字符。

  • [^……] :不在括号之中的任意字符。

  • \w :匹配一个单字字符(字母、数字或者下划线)。等价于[A-Za-z0-9_]
    例如, /\w/ 匹配 "apple," 中的 'a'。

  • \W :匹配一个非单字字符。等价于[^A-Za-z0-9_]。
    例如, /\W/ 或者 /[^A-Za-z0-9_]/ 匹配 "50%." 中的 '%'。

  • \s :匹配一个空白字符,包括空格、制表符、换页符和换行符。等价于 [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。
    例如, /\s\w*/ 匹配"foo bar."中的' bar'。

  • \S :匹配一个非空白字符。等价于[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。
    例如, /\S\w*/ 匹配"foo bar."中的'foo'。

  • \d :匹配一个数字。等价于[0-9]。
    例如, /\d/ 或者 /[0-9]/ 匹配"B2 is the suite number."中的'2'。

  • \D :匹配一个非数字字符。等价于[^0-9]。
    例如, /\D/ 或者 /[^0-9]/ 匹配"B2 is the suite number."中的'B' 。

  • [/b] :匹配一个退格(U+0008)。

  • \b :匹配一个词的边界。一个词的边界就是一个词不被另外一个词跟随的位置或者不是另一 个词汇字符前边的位置。注意,一个匹配的词的边界并不包含在匹配的内容中。换句话 说,一个匹配的词的边界的内容的长度是0。(不要和[\b]混淆了)
    例子:
    /\bm/匹配“moon”中得‘m’;
    /oo\b/并不匹配"moon"中得'oo',因为'oo'被一个词汇字符'n'紧跟着。
    /oon\b/匹配"moon"中得'oon',因为'oon'是这个字符串的结束部分。这样他没有被一个词汇字符紧跟着。
    /\w\b\w/将不能匹配任何字符串,因为一个单词中的字符永远也不可能被一个非词汇字 符和一个词汇字符同时紧跟着。

  • \B :匹配一个非单词边界。他匹配一个前后字符都是相同类型的位置:都是单词或者都不是 单词。一个字符串的开始和结尾都被认为是非单词。
    例如,/\B../匹配"noonday"中得'oo', 而/y\B./匹配"possibly yesterday"中得‘ye’。

正则表达式的相关方法:

  1. match() :该方法是检索字符串中与正则匹配出来的值,如果没有则返回null,如果有则返回一个数组。

举个栗子:

var str="1 plus 2 equal 3" ;
console.log(str.match(/\d+/g)) //["1", "2", "3"]
console.log(str.match('1p'))  //null

2、 exec() :这个方法也是用于检索字符串中的正则表达式的匹配,返回值是一个数组,匹配不到返回null,但是此数组的内容和正则对象是否是全局匹配有着很大的关系。

举个栗子:

var str = "1a1b1c";
var reg = new RegExp("1", "");
console.log(reg.exec(str));  // ["1", index: 0, input: "1a1b1c"]

返回的是一个数组,数组还有三个属性:index 当前匹配项的位置;lastIndex 当前匹配项结束的位置(index + 当前匹配项的长度);input 如上示例中 input 就是 str。
exec 方法受参数 g 的影响。若指定了 g,则下次调用 exec 时,会从上个匹配的 lastIndex 开始查找。又是一个栗子:

var str = "1a1b1c";
var reg = new RegExp("1.", "");
console.log(reg.exec(str)[0]);
console.log(reg.exec(str)[0]);
// 上述两个输出都是 1a。现在再看看指定参数 g:
var str = "1a1b1c";
var reg = new RegExp("1.", "g");
console.log(reg.exec(str)[0]);
console.log(reg.exec(str)[0]);
// 上述第一个输出 1a,第二个输出 1b。

3、 compile() :该方法可是编译指定的正则表达式,编译之后的正则表达式执行速度将会提高,如果正则表达式多次被调用,那么调用compile方法可以有效的提高代码的执行速度,如果该正则表达式只能被使用一次,则不会有明显的效果。

举个栗子:

var objStr="我的手机号13522222222,他的手机号码13233333333她的手机号码13988888888"; 
//设置正则表达式匹配以13开头的第三位数是4-9的号码
var reg=new RegExp("13[4-9]\\d{8}","g"); 
//重新编译正则表达式,匹配第三位数是0-3的号码
reg.compile("13[0-3]\\d{8}","g");
objStr.match(reg)  //13233333333

4、 test() :用于测试字符串参数中是否能与正则表达式模式匹配,如果存在返回true,否则返回false。

举个栗子:

var res = /^\d+\.\d{1,2}$/g;
res.test('123.45')//true
res.test('a.12') //false

5、 search() :用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。search() 方法不执行全局匹配,它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置。

举个栗子:

'a1b2c3'.search(/\d/g); //1
'a1b2c3'.search(/\d/); //1

6、 split() :我们经常使用split方法把字符串分割成数组

栗子:

'a,b,c,d'.split(','); //["a", "b", "c", "d"]

7、 replace(regObj,replaceStr) :最常用这个方法替换字符串

栗子:

"abvabcabc".replace('b','D');// aDvabcabc

这样的做法有个缺陷,就是只能替换第一个匹配到的字符,replace方法的第一个参数还可以传入RegExp对象,传入正则表达式可以使replace方法更加强大灵活,比如说栗子二:

"abcabcabc".replace(/b/g,'D')//aDcaDcaDc

如果用replace方法的第一个参数传入的是带分组的正则表达式,我们在第二个参数中可以使用$1...$9来获取相应分组内容,举例。。

'1<2>34agfsfg<567>8a9aa'.replace(/<(\d+)>/g,'#$1#') //1#2#34agfsfg#567#8a9aa

其中$1表示被捕获的分组内容,在一些js模板函数中可以经常见到这种方式替换字符串

replace(regObj,function(){}) :可以通过修改replace方法的第二参数,使replace更加强大

举例把字符串中的数字用括号包起来

'2398rufdjg9w45hgiuerhg83ghvif'.replace(/\d+/g,function(r){
return '('+r+')';

}); //"(2398)rufdjg(9)w(45)hgiuerhg(83)ghvif"

把replace方法的第二个参数传入一个function,这个function会在每次匹配的时候调用,算是每次替换的一个回调函数,我们使用了回调函数的第一个参数,也就是匹配内容,其实回调函数一共有四个参数  

第一个参数:匹配字符串
第二个参数:正则表达式的分组内容,没有分组则没有该参数
第三个参数:匹配项在字符串的index
第四个参数:原字符串

//没有分组的情况

'2398rufdjg9w45hgiuerhg83ghvif'.replace(/\d+/g,function(a,b,c){
console.log(a+'\t'+b+'\t'+c);
return '('+a+')';
})
2398 0 2398rufdjg9w45hgiuerhg83ghvif
9 10 2398rufdjg9w45hgiuerhg83ghvif
45 12 2398rufdjg9w45hgiuerhg83ghvif
83 22 2398rufdjg9w45hgiuerhg83ghvif

//有分组的情况
'2398rufdjg9w45hgiuerhg83ghvif'.replace(/(\d){1}(\D){1,3}/g,function(a,b,c,d,f){
console.log(a+'\t'+b+'\t'+c+'\t'+d+'\t'+f);
return '('+a+')';
});
8ruf 8 f 3 2398rufdjg9w45hgiuerhg83ghvif
9w 9 w 10 2398rufdjg9w45hgiuerhg83ghvif
5hgi 5 i 13 2398rufdjg9w45hgiuerhg83ghvif
3ghv 3 v 23 2398rufdjg9w45hgiuerhg83ghvif

常用的验证的一些栗子

验证是否是邮箱:

var email1 = $('#email1').val(),
res = /(^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/;
res.test(email1)

匹配邮箱是哪一个邮箱qq/163/gmail/,从而实现业务上跳转到登陆邮箱URL地址:

var email2 = $('#email2').val();
var arr=[{em:'@qq.com',url:'https://mail.qq.com/cgi-bin/loginpage'},

{em:'@163.com',url:'http://mail.163.com/'},{em:'@gmail.com',url:'http://www.gmail.com'}];

arr.forEach(function(item,index){
var em = item.em;
var reg = email2.search(eval("/"+em+"/i"));
if(reg != -1){
window.location.href =item.url;
}
});

验证是否是身份证:

var idcard = $('#idcard').val()
res = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9X]$/;
res.test(idcard)

验证是否是手机号:

var phone = $('#phone').val(),
res = /^1[3|4|5|6|7|8][0-9]\d{8}$/;
res.test(phone)

验证密码是否为英文开头且只能含有数字字母下划线的6-10位字符:

var password = $('#password').val(),
res = /^[A-Za-z]\w{5,9}$/;
res.test(password)

评论 (5)

BlackSwan 创建了任务
BlackSwan 添加了标签学习笔记
BlackSwan 添加了标签公会任务
BlackSwan 更新了任务
BlackSwan 更新了任务
BlackSwan 更新了任务
BlackSwan 更新了任务

看完这个就可以去看我的正则实例分析系列了 :laughing:

建议对replace重点分析,它是个非常强大的函数。甚至可以开一个章节来说

BlackSwan 更新了任务
BlackSwan 更新了任务
BlackSwan 更新了任务

好厉害,这么棒的文章才看到...正好需要仔细研究下 :satisfied:

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(4)
104617 janking 1578917672 1368402 whidy 1578949926
JavaScript
1
https://gitee.com/janking/Infinite-f2e.git
git@gitee.com:janking/Infinite-f2e.git
janking
Infinite-f2e
Infinite-f2e-club

搜索帮助

Cb406eda 1850385 E526c682 1850385