正则表达式

假设用户需要在 HTML 表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前,JavaScript 程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的。 


一. 什么是正则表达式 

正则表达式( ular expression)是一个描述字符模式的对象。ECMAScript 的 RegExp 类表示正则表达式,而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。 

正则表达式主要用来验证客户端的输入数据。 用户填写完表单单击按钮之后, 表单就会被发送到服务器,在服务器端通常会用 PHP、ASP.NET 等服务器脚本对其进行进一步处理 。因为客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。 


二. 创建正则表达式 

创建正则表达式和创建字符串类似,创建正则表达式提供了两种方法,一种是采用 new运算符,另一个是采用字面量方式。 

1.两种创建方式 

var box = new RegExp('box'); //第一个参数字符串 

var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符 


var box = /box/; //直接用两个反斜杠 

var box = /box/ig; //在第二个斜杠后面加上模式修饰符 



2.测试正则表达式 

RegExp 对象包含两个方法:test()和 exec(),功能基本相似,用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值,如果存在则返回 true,不存在则返回 false。exec()方法也用于在字符串中查找指定正则表达式,如果 exec()方法执行成功,则返回包含该查找字符串的相关信息数组。如果执行失败,则返回 null。 

/*使用 new 运算符的 test 方法示例*/ 

var pattern = new RegExp('box', 'i'); //创建正则模式,不区分大小写 

var str = 'This is a Box!'; //创建要比对的字符串 

alert(pattern.test(str)); //通过 test()方法验证是否匹配 

/*使用字面量方式的 test 方法示例*/ 

var pattern = /box/i; //创建正则模式,不区分大小写 

var str = 'This is a Box!'; 

alert(pattern.test(str)); 

/*使用一条语句实现正则匹配*/ 

alert(/box/i.test('This is a Box!')); //模式和字符串替换掉了两个变量 

/*使用 exec 返回匹配数组*/ 

var pattern = /box/i; 

var str = 'This is a Box!'; 

alert(pattern.exec(str)); //匹配了返回数组,否则返回 null 

PS:exec 方法还有其他具体应用,我们在获取控制学完后再看。 


3.使用字符串的正则表达式方法 

除了 test()和 exec()方法,String 对象也提供了 4 个使用正则表达式的方法。 



/*使用 match 方法获取获取匹配数组*/ 

var pattern = /box/ig; //全局搜索 

var str = 'This is a Box!,That is a Box too'; 

alert(str.match(pattern)); //匹配到两个 Box,Box 

alert(str.match(pattern).length); //获取数组的长度 

/*使用 search 来查找匹配数据*/ 

var pattern = /box/ig; 

var str = 'This is a Box!,That is a Box too'; 

alert(str.search(pattern)); //查找到返回位置,否则返回-1; 

PS:因为 search 方法查找到即返回,也就是说无需 g 全局 

/*使用 replace 替换匹配到的数据*/ 

var pattern = /box/ig; 

var str = 'This is a Box!,That is a Box too'; 

alert(str.replace(pattern, 'Tom')); //将 Box 替换成了 Tom 

/*使用 split 拆分成字符串数组*/ 

var pattern = / /ig; 

var str = 'This is a Box!,That is a Box too'; 

alert(str.split(pattern)); //将空格拆开分组成数组 



  次獒             二狗子 

 RegExp; 

RegExp.input                        RegExp['$_'] 



 /* 使用静态属性/ */ 

var pattern = /(g)oogle/; 

var str = 'This is google!'; 

pattern.test(str); //执行一下 

alert(RegExp.input); //This is google! 

alert(RegExp.leftContext); //This is 

alert(RegExp.rightContext); //! 

alert(RegExp.lastMatch); //google 

alert(RegExp.lastParen); //g 

alert(RegExp.multiline); //false 

PS:Opera 不支持 input、lastMatch、lastParen 和 multiline 属性。IE 不支持 multiline 属 

性。 

所有的属性可以使用短名来操作 

RegExp.input 可以改写成 RegExp['$_'],依次类推。但 RegExp.input 比较特殊,它还可 

以写成 RegExp.$_。 


/*使用实例属性*/ 

var pattern = /google/ig; 

alert(pattern.global); //true,是否全局了 

alert(pattern.ignoreCase); //true,是否忽略大小写 

alert(pattern.multiline); //false,是否支持换行 

alert(pattern.lastIndex); //0,下次的匹配位置 

alert(pattern.source); //google,正则表达式的源字符串 

var pattern = /google/g; 

var str = 'google google google'; 

pattern.test(str); //google,匹配第一次 

alert(pattern.lastIndex); //6,第二次匹配的位 

PS: 以上基本没什么用。 并且 lastIndex 在获取下次匹配位置上 IE 和其他浏览器有偏差 , 

主要表现在非全局匹配上。lastIndex 还支持手动设置,直接赋值操作。 


三. 获取控制 

正则表达式元字符是包含特殊含义的字符。 它们有一些特殊功能, 可以控制匹配模式的 

方式。反斜杠后的元字符将失去其特殊含义。 






/*使用点元字符*/ 

var pattern = /g..gle/; //.匹配一个任意字符 

var str = 'google'; 

alert(pattern.test(str)); 


/*重复匹配*/ 

var pattern = /g.*gle/; //.匹配 0 个一个或多个 

var str = 'google'; //*,?,+,{n,m} 

alert(pattern.test(str)); 


/*使用字符类匹配*/ 

var pattern = /g[a-zA-Z_]*gle/; //[a-z]*表示任意个 a-z 中的字符 

var str = 'google'; 

alert(pattern.test(str)); 


var pattern = /g[^0-9]*gle/; //[^0-9]*表示任意个非 0-9 的字符 

var str = 'google'; 

alert(pattern.test(str)); 


var pattern = /[a-z][A-Z]+/; //[A-Z]+表示 A-Z 一次或多次 

var str = 'gOOGLE'; 

alert(pattern.test(str)); 


/*使用元符号匹配*/ 

var pattern = /g\w*gle/; //\w*匹配任意多个所有字母数字_ 

var str = 'google'; 

alert(pattern.test(str)); 

var pattern = /google\d*/; //\d*匹配任意多个数字 

var str = 'google444'; 

alert(pattern.test(str)); 

var pattern = /\D{7,}/; //\D{7,}匹配至少 7 个非数字 

var str = 'google8'; 

alert(pattern.test(str)); 

/*使用锚元字符匹配*/ 

var pattern = /^google$/; //^从开头匹配,$从结尾开始匹配 

var str = 'google'; 

alert(pattern.test(str)); 


var pattern = /goo\sgle/; //\s 可以匹配到空格 

var str = 'goo gle'; 

alert(pattern.test(str)); 


var pattern = /google\b/; //\b 可以匹配是否到了边界 

var str = 'google'; 

alert(pattern.test(str)); 


/*使用或模式匹配*/ 

var pattern = /google|baidu|bing/; //匹配三种其中一种字符串 

var str = 'google'; 

alert(pattern.test(str)); 


/*使用分组模式匹配*/ 

var pattern = /(google){4,8}/; //匹配分组里的字符串 4-8 次 

var str = 'googlegoogle';//只有两次,所以不行. 

alert(pattern.test(str)); 


var pattern = /8(.*)8/; //获取 8..8 之间的任意字符 

var str = 'This is 8google8'; 

str.match(pattern); 

alert(RegExp.$1); //得到第一个分组里的字符串内容 


var pattern = /8(.*)8/; 

var str = 'This is 8google8'; 

var result = str.replace(pattern,'$1'); //得到替换的字符串输出 

document.write(result); 

var pattern = /(.*)\s(.*)/; 

var str = 'google baidu'; 

var result = str.replace(pattern, '$2 $1'); //将两个分组的值替换输出 

document.write(result); 




/*关于贪婪和惰性*/ 

var pattern = /[a-z]+?/; //?号关闭了贪婪匹配,只替换了第一个 

var str = 'abcdefjhijklmnopqrstuvwxyz'; 

var result = str.replace(pattern, 'xxx'); 

alert(result); 

var pattern = /8(.+?)8/g; //禁止了贪婪,开启的全局 

var str = 'This is 8google8, That is 8google8, There is 8google8'; 

var result = str.replace(pattern,'$1'); 

document.write(result); 

var pattern = /8([^8]*)8/g; //另一种禁止贪婪 

var str = 'This is 8google8, That is 8google8, There is 8google8'; 

var result = str.replace(pattern,'$1'); 

document.write(result); 


/*使用 exec 返回数组*/ 

var pattern = /^[a-z]+\s[0-9]{4}$/i; 

var str = 'google 2012'; 

alert(pattern.exec(str)); //返回整个字符串 

var pattern = /^[a-z]+/i; //只匹配字母 

var str = 'google 2012'; 

alert(pattern.exec(str)); //返回 google 

var pattern = /^([a-z]+)\s([0-9]{4})$/i; //使用分组 

var str = 'google 2012'; 

alert(pattern.exec(str)[0]); //google 2012 

alert(pattern.exec(str)[1]); //google 

alert(pattern.exec(str)[2]); //2012 


/*捕获性分组和非捕获性分组*/ 

var pattern = /(\d+)([a-z])/; //捕获性分组 

var str = '123abc'; 

alert(pattern.exec(str)); 

var pattern = /(\d+)(?:[a-z])/; //非捕获性分组 

var str = '123abc'; 

alert(pattern.exec(str)); 


/*使用分组嵌套*/ 

var pattern = /(A?(B?(C?)))/; //从外往内获取 

var str = 'ABC'; 

alert(pattern.exec(str)); 


/*使用前瞻捕获*/ 

var pattern = /(goo(?=gle))/; //goo 后面必须跟着 gle 才能捕获 

var str = 'google'; 

alert(pattern.exec(str)); 


/*使用特殊字符匹配*/ 

var pattern = /\.\[\/b\]/; //特殊字符,用\符号转义即可 

var str = '.[/b]'; 

alert(pattern.test(str)); 


/*使用换行模式*/ 

var pattern = /^\d+/mg; //启用了换行模式 

var str = '1.baidu\n2.google\n3.bing'; 

var result = str.replace(pattern, '#'); 

alert(result); 


四. 常用的正则 

1.检查邮政编码 

var pattern = /[1-9][0-9]{5}/; //共 6 位数字,第一位不能为 0 

var str = '224000'; 

alert(pattern.test(str)); 

2.检查文件压缩包 

var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有数字和字母加下划线 

var str = '123.zip'; //\.表示匹配.,后面是一个选择 

alert(pattern.test(str)); 

3.删除多余空格 

var pattern = /\s/g; //g 必须全局,才能全部匹配 

var str = '111 222 333'; 

var result = str.replace(pattern,''); //把空格匹配成无空格 

alert(result); 

4.删除首尾空格 

var pattern = /^\s+/; //强制首 

var str = ' goo gle '; 

var result = str.replace(pattern, ''); 

pattern = /\s+$/; //强制尾 

result = result.replace(pattern, ''); 

alert('|' + result + '|'); 

var pattern = /^\s*(.+?)\s*$/; //使用了非贪婪捕获 

var str = ' google '; 

alert('|' + pattern.exec(str)[1] + '|'); 

var pattern = /^\s*(.+?)\s*$/; 

var str = ' google '; 

alert('|' + str.replace(pattern, '$1') + '|'); //使用了分组获取 

5.简单的电子邮件验证 

var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/; 

var str = 'yc60.com@gmail.com'; 

alert(pattern.test(str)); 

var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/; 

var str = 'yc60.com@gmail.com'; 

alert(pattern.test(str)); 

PS:以上是简单电子邮件验证,复杂的要比这个复杂很多,大家可以搜一下。 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • 正则表达式是一个描述字符模式的对象,ECMAScript的RegExp类表示正则表达式。String与RegExp...
    Miss____Du阅读 780评论 0 4
  • 什么是正则表达式?如何创建正则表达式正则表达式常用的方法字符串中的正则表达式常用的正则表达式假设用户需要在HTML...
    greenlift阅读 799评论 0 0
  • 正则表达式的元字符是包含特殊含义的字符,它们有一些特殊的功能,可以控制匹配模式的方式,反斜杠后的元字符失去其特殊含...
    Miss____Du阅读 1,571评论 0 6
  • RegExp 三大方法本文的RegExp采用直接量语法表示:/pattern/attributes。attribu...
    恩德_b0c2阅读 446评论 0 0
  • 假如不经常写正则表达式的话,真是学一遍忘一遍。自己再复习一遍正则表达式。另外,归纳篇会持续更新文章,但更新的目录可...
    Maxine708阅读 360评论 0 0