正则表达式详解

一. 为什么要使用正则表达式呢？

通过使用正则表达式，可以：

1. 测试字符串内的模式。
   例如，可以测试输入字符串，以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证。

2. 替换文本。
   可以使用正则表达式来识别文档中的特定文本，完全删除该文本或者用其他文本替换它。

3. 基于模式匹配从字符串中提取子字符串。
   可以查找文档内或输入域内特定的文本。

正则表达式(regular expression) 描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

例如，创建一个正则表达式：

let re = /ab+c/
// 或者
let re = new RegExp("ab+c", 'g')//ab+c/g
/* 
g 是全局搜索; 
i 不区分大小写;
m 多行搜索; 
s 允许 . 匹配换行符; 
u 使用unicode码的模式进行匹配; 
y 执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。*/

在 JavaScript 中，正则表达式通常用于以下几个字符串方法 : search() 、match() 、replace()和 split()。

• search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。如果没有找到匹配，则返回-1。
• match() 方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。
• replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。
• split() 方法用于把字符串分割为字符串数组

//search():使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);

//match():检索指定的值，或找到一个或多个正则表达式的匹配
var str=" mm -4193 1 with words" 
var n = str.match(/\d+/g) // ["4193", "1"]

//replace():使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

//split():用于把字符串分割为字符串数组
var str="How are you doing today?";
var n=str.split(" ");
//返回How,are,you,doing,today?

二. 正则字符简单介绍

2.1 修饰符介绍

修饰符用于执行区分大小写和全局匹配:
"i" ：执行对大小写不敏感的匹配。

"g" ：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

"m" : 执行多行匹配。

var patt1=/is/i;
var patt1=/is/g;
var patt1=/is/m;
var patt1=/is/gi;  //全局匹配+忽略大小写

2.2 元字符介绍

"^" ：^会匹配行或者字符串的起始位置，有时还会匹配整个文档的起始位置。

"$" ：$会匹配行或字符串的结尾

"\b" : \b不会消耗任何字符只匹配一个位置，常用于匹配单词边界

如 我想从字符串中”This is Regex”匹配单独的单词 “is” 正则就要写成 “\bis\b”
\b 不会匹配is 两边的字符，但它会识别is 两边是否为单词的边界

"\d": 匹配数字

例如要匹配一个固定格式的电话号码以0开头前4位后7位，如0737-5686123 正则:^0\d\d\d-\d\d\d\d\d\d\d$ 这里只是为了介绍”\d”字符，实际上有更好的写法会在 下面介绍。

"\w"：匹配字母，数字，下划线

例如我要匹配”a2345BCD__TTz” 正则：”\w+” 这里的”+”字符为一个量词指重复的次数，稍后会详细介绍。

"\s"：匹配空格

例如字符 “a b c” 正则：”\w\s\w\s\w” 一个字符后跟一个空格，如有字符间有多个空格直接把”\s” 写成 “\s+” 让空格重复

"."：匹配除了换行符以外的任何字符

这个算是”\w”的加强版了”\w”不能匹配 空格 如果把字符串加上空格用”\w”就受限了，看下用 “.”是如何匹配字符”a23 4 5 B C D__TTz” 正则：”.+”

"[abc]": 字符组 匹配包含括号内元素的字符

这个比较简单了只匹配括号内存在的字符，还可以写成[a-z]匹配a至z的所以字母就等于可以用来控制只能输入英文了，

2.3 几种反义

写法很简单改成大写就行了，意思与原来的相反，这里就不举例子了

"\W" 匹配任意不是字母，数字，下划线 的字符

"\S" 匹配任意不是空白符的字符

"\D" 匹配任意非数字的字符

"\B" 匹配不是单词开头或结束的位置

"[^abc]" 匹配除了abc以外的任意字符

2.4 量词

先解释关于量词所涉及到的重要的三个概念

1. 贪婪(贪心) 如”*”字符 贪婪量词会首先匹配整个字符串，尝试匹配时，它会选定尽可能多的内容，如果 失败则回退一个字符，然后再次尝试回退的过程就叫做回溯，它会每次回退一个字符，直到找到匹配的内容或者没有字符可以回退。相比下面两种贪婪量词对资源的消耗是最大的，

2. 懒惰(勉强) 如 “?” 懒惰量词使用另一种方式匹配，它从目标的起始位置开始尝试匹配，每次检查一个字符，并寻找它要匹配的内容，如此循环直到字符结尾处。

3. 占有 如”+” 占有量词会覆盖事个目标字符串，然后尝试寻找匹配内容 ，但它只尝试一次，不会回溯，就好比先抓一把石头，然后从石头中挑出黄金

常用量词举例

"*"(贪婪) 重复零次或更多

例如”aaaaaaaa” 匹配字符串中所有的a 正则： "a*" 会出到所有的字符”a”

"+"(懒惰) 重复一次或更多次

例如”aaaaaaaa” 匹配字符串中所有的a 正则： “a+” 会取到字符中所有的a字符， "a+"与 "a *" 不同在于"+"至少是一次而"*"可以是0次，

稍后会与”?”字符结合来体现这种区别

"?"(占有) 重复零次或一次

例如”aaaaaaaa” 匹配字符串中的a 正则 ： “a?” 只会匹配一次，也就是结果只是单个字符a

"{n}" 重复n次

例如从”aaaaaaaa” 匹配字符串的a 并重复3次 正则： “a{3}” 结果就是取到3个a字符 “aaa”;

"{n,m}" 重复n到m次

例如正则 “a{3,4}” 将a重复匹配3次或者4次 所以供匹配的字符可以是三个”aaa”也可以是四个”aaaa” 正则都可以匹配到

"{n,}" 重复n次或更多次

与{n,m}不同之处就在于匹配的次数将没有上限，但至少要重复n次 如 正则”a{3,}” a至少要重复3次

把量词了解了之后之前匹配电话号码的正则现在就可以改得简单点了^0\d\d\d-\d\d\d\d\d\d\d$ 可以改为”^0\d+-\d{7}$”。

这样写还不够完美如果因为前面的区号没有做限定，以至于可以输入很多们，而通常只能是3位或者4位，现在再改一下 “^0\d{2,3}-\d{7}”如此一来区号部分就可以匹配3位或者4位的了

2.5 懒惰限定符

"*?" 重复任意次，但尽可能少重复

如 “acbacb” 正则 “a.*?b” 只会取到第一个”acb” 原本可以全部取到但加了限定符后，只会匹配尽可能少的字符 ，而”acbacb”最少字符的结果就是”acb”

"+?" 重复1次或更多次，但尽可能少重复

与上面一样，只是至少要重复1次

"??" 重复0次或1次，但尽可能少重复

如 “aaacb” 正则 “a.??b” 只会取到最后的三个字符”acb”

"{n,m}?" 重复n到m次，但尽可能少重复

如 “aaaaaaaa” 正则 “a{0,m}” 因为最少是0次所以取到结果为空

"{n,}?" 重复n次以上，但尽可能少重复

如 “aaaaaaa” 正则 “a{1,}” 最少是1次所以取到结果为 “a”

三. 正则进阶-捕获分组

下面列出捕获分组常有的用法

"(exp)" 匹配exp,并捕获文本到自动命名的组里

"(?<name>exp)" 匹配exp,并捕获文本到名称为name的组里

"(?:exp)" 匹配exp,不捕获匹配的文本，也不给此分组分配组号

以下为零宽断言

"(?=exp)" 匹配exp前面的位置

如 “How are you doing” 正则”(?.+(?=ing))” 这里取ing前所有的字符，并定义了一个捕获分组名字为 “txt” 而”txt”这个组里的值为”How are you do”;

"(?<=exp)" 匹配exp后面的位置

如 “How are you doing” 正则”(?(?<=How).+)” 这里取”How”之后所有的字符，并定义了一个捕获分组名字为 “txt” 而”txt”这个组里的值为” are you doing”;

"(?!exp)" 匹配后面跟的不是exp的位置

如 “123abc” 正则 “\d{3}(?!\d)”匹配3位数字后非数字的结果

"(?<!exp)" 匹配前面不是exp的位置

如 “abc123 “ 正则 “(?<![0-9])123” 匹配”123”前面是非数字的结果也可写成”(?!<\d)123”

四. 使用RegExp 对象

RegExp 对象：是一个预定义了属性和方法的正则表达式对象。

4.1 RegExp 对象方法

4.1.1 test()

test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var str="Hello world!"; 
//查找"Hello" 
var patt=/Hello/g;
var result=patt.test(str); 
document.write("返回值: " + result);
//查找 "Runoob" 
patt=/Runoob/g; 
result=patt.test(str); 
document.write("<br>返回值: " + result);

//返回值: true
//返回值: false

4.1.2 exec()

exec() 方法是一个正则表达式方法。exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

var str="Hello world!";
//查找"Hello" 
var patt=/Hello/g; 
var result=patt.exec(str); 
document.write("返回值: " + result); 
//查找 "RUNOOB" 
patt=/RUNOOB/g; 
result=patt.exec(str); 
document.write("<br>返回值: " + result);

//返回值: Hello
//返回值: null

4.1.3 toString()

toString() 方法返回正则表达式的字符串值。

var patt = new RegExp("RUNOOB", "g"); 
var res = patt.toString();

//返回值：/RUNOOB/g

4.2 RegExp 对象属性

4.2.1 constructor

constructor属性：返回一个函数，该函数是一个创建 RegExp 对象的原型。

在 JavaScript 中, constructor 属性返回对象的构造函数。
返回值是函数的引用，不是函数名：

• JavaScript 正则表达式 constructor 属性返回 function RegExp() { [native code] }
• JavaScript 数组 constructor 属性返回 function Array() { [native code] }
• JavaScript 数字 constructor 属性返回 function Number() { [native code] }
• JavaScript 字符串 constructor 属性返回 returns function String() { [native code] }
• 如果一个变量是数组你可以使用 constructor 属性来定义。

var patt = new RegExp("RUNOOB", "g"); 
var res = patt.constructor;

//返回值：function RegExp() { [native code] }

4.2.2 global属性

global属性：判断是否设置了 “g” 修饰符。如果 g 标志被设置，则该属性为 true，否则为 false。：

var str="Visit RUNOOB!"; 
var patt1=/RUN/g;
if(patt1.global) { 
    document.write("g 模式有设置!"); 
} else { 
    document.write("g 模式有设置!"); 
}

//返回值：g 模式有设置!

4.2.3 ignoreCase属性

ignoreCase属性：判断是否设置了 “i” 修饰符。如果设置了 “i” 标志，则返回 true，否则返回 false。

var str="Visit RUNOOB!";
var patt1=/RUN/i; 
if(patt1.ignoreCase) { 
    document.write("i 模式有设置!"); 
} else { 
    document.write("i 模式没有设置!"); 
}

//返回值：i 模式有设置!

4.2.4 lastIndex属性

lastIndex属性：用于规定下次匹配的起始位置。

注意： 该属性只有设置标志 g 才能使用。
上次匹配的结果是由方法 RegExp.exec() 和 RegExp.test() 找到的，它们都以 lastIndex 属性所指的位置作为下次检索的起始点。这样，就可以通过反复调用这两个方法来遍历一个字符串中的所有匹配文本。
注意：该属性是可读可写的。
只要目标字符串的下一次搜索开始，就可以对它进行设置。当方法 exec() 或 test() 再也找不到可以匹配的文本时，它们会自动把 lastIndex 属性重置为 0。

var str="The rain in Spain stays mainly in the plain"; 
var patt1=/ain/g; 
while (patt1.test(str)==true) { 
    document.write("'ain' found. Index now at: "+patt1.lastIndex); 
    document.write("<br>");
}

//返回值：
'ain' found. Index now at: 8
'ain' found. Index now at: 17
'ain' found. Index now at: 28
'ain' found. Index now at: 43

4.2.5 multiline属性

multiline属性：判断是否设置了 “m” 修饰符。如果 m 标志被设置，则该属性为 true，否则为 false。

var str="Visit RUNOOB!"; 
var patt1=/RUN/gi; 
if(patt1.multiline) { 
    document.write("m 模式有设置!"); 
} else { 
    document.write("m 模式没有设置!"); 
}

//返回值：m 模式没有设置!

4.2.6 source属性

source属性：返回正则表达式的匹配模式，返回模式匹配所用的文本。

var str="Visit RUNOOB";
var patt1=/RUN/g; 
document.write("The text of the RegExp is: "+patt1.source);

//返回值：The text of the RegExp is: RUN

五. 常用正则表达式

了解更多常用正则表达式请参考https://www.jianshu.com/p/4ccc491a571a

5.1 校验数字的表达式

• 数字：^[0-9]*$
• n位的数字：^\d{n}$
• 至少n位的数字：^\d{n,}$
• m-n位的数字：^\d{m,n}$
• 零和非零开头的数字：^(0|[1-9][0-9]*)$
• 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
• 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$
• 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
• 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
• 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
• 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$
• 非零的负整数：^-[1-9][]0-9”$ 或 ^-[1-9]\d$
• 非负整数：^\d+$ 或 ^[1-9]\d*|0$
• 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
• 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
• 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
• 正浮点数：^[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]))$
• 负浮点数：^-([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])))$
• 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$

5.2 校验字符的表达式

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

5.3 特殊需求表达式

• Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
• 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
• InternetURL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$
• 手机号码：^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$ (由于工信部放号段不定时，所以建议使用泛解析 ^([1][3,4,5,6,7,8,9])\d{9}$)
• 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
• 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
• 18位身份证号码(数字、字母x结尾)：^((\d{18})|([0-9x]{18})|([0-9X]{18}))$
• 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
• 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
• 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
• 日期格式：^\d{4}-\d{1,2}-\d{1,2}
• 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
• 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
• xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
• 中文字符的正则表达式：[\u4e00-\u9fa5]
• 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
• 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
• HTML标记的正则表达式：<(\S?)[^>]>.?</\1>|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
• 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
• 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
• 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
• IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)
• IP地址：((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

5.4 钱的输入格式

• 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
• 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
• 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
• 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
• 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
• 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
• 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
• 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

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

详情参考:
https://www.runoob.com/js/js-regexp.html
https://www.cnblogs.com/zery/p/3438845.html
http://tool.oschina.net/uploads/apidocs/jquery/regexp.html
https://www.cnblogs.com/520Girl/p/10031738.html