前端小白成长史

正则表达式

2017-05-19  本文已影响75人  浅茉Sara

tags: 正则表达式
categories: JavaScript
欢迎点击我的博客原文

前端会遇到很多字符串验证问题，正则表达式是一个强大的字符串匹配工具，今天就来总结一下正则表达式。

（一）工具

Regexper：正则表达式可视化工具，看不懂的表达式放进去，帮助理解

（二）理论部分

一、正则表达式简介

正则表达式是一个强大的字符串匹配工具。

1.匹配模式标志flags

3 个匹配模式标志flags：标明正则表达式的行为

一个正则表达式就是一个模式与3 个标志的组合体

字 符 含 义
g 执行一个全局匹配，简言之，就是要找到所有的匹配，而不是在找到一个之后就停止
m 多行匹配模式，^匹配一行的开头和字符串的开头，$匹配行的结束和字符串的结束
i 执行不区分大小写的匹配 
var pattern1 = /at/g; // 匹配字符串中所有"at"的实例
var pattern2 = /[bc]at/i; // 匹配第一个"bat"或"cat"，不区分大小写
var pattern3 = /.at/gi; // 匹配所有以"at"结尾的3 个字符的组合，不区分大小写

2.元字符

与其他语言中的正则表达式类似，匹配字符串中的元字符必须转义。

正则表达式中的元字符包括：( [ { \ ^ $ | ) ? * + . ] }

var pattern1 = /[bc]at/i; // 匹配第一个"bat"或"cat"，不区分大小写
var pattern2 = /\[bc\]at/i; // 匹配第一个" [bc]at"，不区分大小写
var pattern3 = /.at/gi; // 匹配所有以"at"结尾的3 个字符的组合，不区分大小写
var pattern4 = /\.at/gi; // 匹配所有".at"，不区分大小写

3.创建正则表达式

有两种方法，这两种方法完全等价。

<法一> 对象字面量

var expression = / pattern / flags ;

<法二> 使用RegExp()构造函数

var pattern1 = /[bc]at/i; // 匹配第一个"bat"或"cat"，不区分大小写
var pattern2 = new RegExp("[bc]at", "i"); // 与pattern1 相同，只不过是使用构造函数创建的

注意！

  1. 传递给RegExp 构造函数的2个参数都是字符串（不能把正则表达式字面量传递给RegExp 构造函数）
  2. 由于RegExp 构造函数的模式参数是字符串，所以在某些情况下要对字符进行双重转义：

字面量模式 | 等价的字符串 |
----|------|----
/\[bc\]at/ | "\\[bc\\]at"
/\.at/ | "\\.at"
/name\/age/ | "name\\/age"
/\d.\d{1,2}/ | "\\d.\\d{1,2}"
/\w\\hello\\123/ | "\\w\\\\hello\\\\123"

二、RegExp类型

EMCAScript通过RegExp类型来支持正则表达式。

    var reg = new RegExp("\\d{5}","g");//匹配全局模式下的5个数字
    alert(reg.test("1J2a35786"));//true
    alert(reg.test("1J2a356"));//false

局限性

要了解更多相关信息，请访问www.regular-expressions.info

尽管ECMAScript 中的正则表达式功能还是比较完备的，但仍然缺少某些语言（特别是Perl）所支
持的高级正则表达式特性。下面列出了ECMAScript 正则表达式不支持的特性:

即使存在这些限制，ECMAScript 正则表达式仍然是非常强大的，能够帮我们完成绝大多数模式匹
配任务。

1. RegExp构造函数属性

适用于作用域中的所有正则表达式，并且基于所执行的最近一次正则表达式操作而变化。

可以通过两种方式访问：长属性名、短属性名（Opera 是例外，它不支持短属性名）

长属性名 短属性名 说 明
input $_ 原始字符串。Opera未实现此属性
lastMatch $& 最近一次与整个正则表达式匹配的项。Opera未实现此属性
lastParen $+ 最近一次匹配的捕获组。Opera未实现此属性
leftContext $' input字符串中lastMatch之前的文本
multiline $* 布尔值，表示是否所有表达式都使用多行模式。IE和Opera未实现此属性
rightContext $' Input字符串中lastMatch之后的文本
RegExp.$n（1<=n<=9） 存储第n个匹配的捕获组

短属性名大多不是有效的ECMAScript 标识符，必须通过方括号语法来访问。

使用这些属性可以从exec()或test()执行的操作中提取出更具体的信息：

var text = "this has been a short summer";
var pattern = /(..)or(.)/g;
if (pattern.test(text)){
alert(RegExp.$1); //sh
alert(RegExp.$2); //t
}

var text = "this has been a short summer";
var pattern = /(.)hort/g;
/*
* 注意：Opera 不支持input、lastMatch、lastParen 和multiline 属性
* Internet Explorer 不支持multiline 属性
*/
if (pattern.test(text)){
alert(RegExp.input); // this has been a short summer
alert(RegExp.leftContext); // this has been a
alert(RegExp.rightContext); // summer
alert(RegExp.lastMatch); // short
alert(RegExp.lastParen); // s
alert(RegExp.multiline); // false
}

var text = "this has been a short summer";
var pattern = /(.)hort/g;
/*
* 注意：Opera 不支持input、lastMatch、lastParen 和multiline 属性
* Internet Explorer 不支持multiline 属性
*/
if (pattern.test(text)){
alert(RegExp.$_); // this has been a short summer
alert(RegExp["$`"]); // this has been a
alert(RegExp["$'"]); // summer
alert(RegExp["$&"]); // short
alert(RegExp["$+"]); // s
alert(RegExp["$*"]); // false
}

2. RegExp实例属性

通过这些属性可以获知一个正则表达式的各方面信息，但却没有多大用处，因为这些信息全都包含在模式声明中。

属性名 类型 属性 含义
global 布尔值 只读 是否设置了g标志
multiline 布尔值 只读 是否设置了m标志
ignoreCase 布尔值 只读 是否设置了i标志
source 字符串 只读 规范形式的字符串，即字面量形式所用的字符串，而非传入构造函数中的字符串模式
lastIndex 整数 只读 继续下一次检索的开始位置 
var pattern1 = /\[bc\]at/i;
alert(pattern1.global); //false
alert(pattern1.ignoreCase); //true
alert(pattern1.multiline); //false
alert(pattern1.lastIndex); //0
alert(pattern1.source); //"\[bc\]at"

var pattern2 = new RegExp("\\[bc\\]at", "i");
alert(pattern2.global); //false
alert(pattern2.ignoreCase); //true
alert(pattern2.multiline); //false
alert(pattern2.lastIndex); //0
alert(pattern2.source); //"\[bc\]at"

3. RegExp实例方法

a. exec()：查找匹配字符串和捕获组

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;
var matches = pattern.exec(text);
alert(matches.index); // 0
alert(matches.input); // "mom and dad and baby"
alert(matches[0]); // "mom and dad and baby"
alert(matches[1]); // " and dad and baby"
alert(matches[2]); // " and baby"

说明

exec()方法：即使在模式中设置了全局标志g，它每次也只会返回一个匹配项：

b. test()：判断待解析字符串是否与此模式匹配

在只想知道目标字符串与某个模式是否匹配，但不需要知道其文本内容时，使用这个方法非常方便。因此，test()方法经常被用在if 语句中：

var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;
if (pattern.test(text)){
alert("The pattern was matched.");
}

c. 继承的方法

var pattern = new RegExp("\\[bc\\]at", "gi");
alert(pattern.toString()); // /\[bc\]at/gi
alert(pattern.toLocaleString()); // /\[bc\]at/gi

三、待解析字符串的string方法

1. search()：查找匹配字符串位置

说明：search()方法不支持全局属性检索，所以会忽略匹配模式标志g

2. replace()：替换

text.replace(/javascript/gi,"JavaScript");//将所有不区分大小写的javascript都替换成大小写正确的JavaScript
//一段引用文本起始于引号，结束与引号
//中间的内容区域，不能包含引号
var quote = /"([^"]*)"/g;
//引用中文半角引号替换英文引号，同时要保持引号之间的内容(储存在$1中)没有被修改
text.replace(quote,'“$1”');

3. match()：查找匹配字符串和捕获组

"1 plus 2 equals 3".match(/\d+/g);//返回["1","2","3"]

说明

var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
var text = "Visit my blog at http://www.example.com/~david";
var result = text.match(url);
if (result != null) {
    var fullurl = result[0]; //包含 "http://www.example.com/"
    var protocol = result[1]; //包含 "http"
    var host = result[2]; //包含 "www.example.com"
    var path = result[3]; //包含~david
}

4. split()：分隔

// 参数为字符串
"123,456,789".split(",");//返回["123","456","789"]
// 参数为正则表达式
"1,2, 3,4 ,5".split(/\s*,\s*/)//返回["1","2"," 3","4 ","5"]，指定分隔符”,”，允许两边留有任意多的空白符

四、正则表达式语法

1.转义字符

非字母的字符匹配，这些字符需要通过反斜线（\）作前缀进行转义.

字 符 匹 配 举 例
字母和数字字符 自身
\o NUL字符
\t 制表符
\n 换行符
\v 垂直制表符
\f 换页符
\r 回车符
\xnn 由十六进制数nn指定的拉丁字符 \x0A等价于\n
\uxxxx 由十六进制数xxxx指定的unicode字符 \u0009等价于\t
\cX 控制字符^X \cJ等价于换行符\n

具有特殊含义的符号（元字符）

| \ / ( ) [ ] { }  . : ! * + = ^ ? $

想要在正则表达式中对这些字符进行匹配，必须使用前缀”\”

其他标点符号（比如@和引号）无特殊含义，无需转义，直接使用即可。

2.字符类

方括号：或/范围

将直接量字符单独放进方括号内就组成了字符类。一个字符类可以匹配它包含的任意字符。字符类可以使用连字符来表示字符范围。

字 符 含 义
. 除换行符和unicode行终止符之外的任意字符
[...] 方括号内的任意字符，“或”的关系
[^...] 不在方括号内的任意字符
\w 任何ASCII符组成的单词，等同[a-zA-Z0-9]
\W 任何不是ASCII符组成的的单词，等同[^a-zA-Z0-9]
\s 任何unicode空白字符
\S 任何非unicode空白符的字符，注意\W与\s不同
\d 任何ASCII数字等价于[0-9]
\D 除了ASCII数字之外的任何字符,等价于[^0-9]
[\b] 退格直接量（特例）

3.重复

用以指定字符重复的标记

字 符 含 义
{n,m} 匹配前一项至少n次，但不能超过m次
{n,} 匹配前一项n次，或者更多次
{n} 匹配前一项n次
? 匹配前一项0次或者1次，也就是前一项是可选的，等价于{0,1}
* 匹配前一项0次或者多次，等价于{0,}
+ 匹配前一项1次或者多次看，等价于{1,}

注意！

a. *和?能匹配0个字符。因此可以什么都不匹配

b. 上表中列出的匹配字符为”贪婪的”匹配

贪婪匹配 ：尽可能多地匹配，且允许后续的正则表达式继续匹配

非贪婪匹配 ：只匹配一次，在待匹配的字符后跟随一个问号即可，?，+?，*?或{1,5}?

4.选择-分组和引用

包括：指定选择项，自表达式分组，引用前一子表达式的特殊字符

字 符 含 义
| 选择：匹配该符号左/右的子表达式
(...) 组合+记忆：将几个项组合成为一个单元，该单元可通过| * + ?等符号加以修饰，且可以记住和这个相匹配的字符串，供以后的引用使用
(?:..) 只组合不记忆：把项组合到一个单元，但不记忆与该组相匹配的字符
\n 和第n个分组第一次匹配的字符相匹配，组是圆括号中的子表达式（也有可能嵌套的），组索引是从左到右的左括号数,”(?:形式的分组不编码”

5.指定匹配位置

正则表达式的锚，将模式定位在搜索字符串的特定位置上

字 符 含 义
^ 匹配字符串的开头，在多行检索中，匹配一行的开头
$ 匹配字符串的结尾，在多行检索中，匹配一行的结尾
\b 匹配一个单词边界，简言之，就是位于字符\w和\W之间的位置，或位于字符\w和字符串的开头或结尾之间的位置(需要注意:[\b]匹配的是退格符)
\B 匹配非单词边界的位置

（三）常用的正则表达式

以下内容转载自：http://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html

一、校验数字的表达式

  1. 数字：^[0-9]*$
  2. n位的数字：^\d{n}$
  3. 至少n位的数字：^\d{n,}$
  4. m-n位的数字：^\d{m,n}$
  5. 零和非零开头的数字：^(0|[1-9][0-9]*)$
  6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
  7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
  8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
  9. 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
  10. 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
  11. 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
  12. 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
  13. 非负整数：^\d+$ 或 ^[1-9]\d*|0$
  14. 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
  15. 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
  16. 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
  17. 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
  18. 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
  19. 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

二、校验字符的表达式

  1. 汉字：^[\u4e00-\u9fa5]{0,}$
  2. 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
  3. 长度为3-20的所有字符：^.{3,20}$
  4. 由26个英文字母组成的字符串：^[A-Za-z]+$
  5. 由26个大写英文字母组成的字符串：^[A-Z]+$
  6. 由26个小写英文字母组成的字符串：^[a-z]+$
  7. 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
  8. 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
  9. 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
  10. 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
  11. 可以输入含有^%&',;=?$"等字符：[^%&',;=?$\x22]+
  12. 禁止输入含有~的字符：[^~\x22]+

三、特殊需求表达式

  1. Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

  2. 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

  3. InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

  4. 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

  5. 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

  6. 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}

  7. 身份证号(15位、18位数字)：^\d{15}|\d{18}$

  8. 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$

  9. 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

  10. 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

  11. 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

  12. 日期格式：^\d{4}-\d{1,2}-\d{1,2}

  13. 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$

  14. 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$

  15. 钱的输入格式：

备注：这就是最终结果了,别忘了"+"可以用"* "替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里

  1. xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
  2. 中文字符的正则表达式：[\u4e00-\u9fa5]
  3. 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
  4. 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
  5. HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
  6. 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
  7. 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
  8. 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
  9. IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
  10. IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

（四）参考资料

JavaScript高级程序设计
正则表达式-理论基础篇
最全的常用正则表达式大全

上一篇 下一篇

猜你喜欢

热点阅读