JS正则表达式

Posted 2020-10-04 歆轶

　　JS通过RegExp类型来支持正则表达式，使用类似Perl的语法可以创建一个正则表达式，另一种方式是通过RegExp构造函数来创建：

　　　　var pattern1 = / pattern / flags;//Perl语法

　　　　var pattern2 = new RegExp("pattern","flags");//RegExp构造函数

　　其中pattern部分是正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用；flags部分支持3个标志，可以写一个或者多个。

　　在html5中的表单属性中，也能够使用正则表达式，语法如下：<input pattern="regexp">。

1.RegExp匹配标志

g(global)	全局模式，被应用于所有字符串，而非遇到即停止 例：var pattern1=/a/g
i(case-insensitive)	不区分大小写模式，忽略大小写 例：var pattern2=/a/ig
m(multiline)	多行模式，到达一行文本的末尾还会继续向下一行查找 ：var pattern3=/a/mi

2.RegExp元字符

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

　　以上这些元字符在使用的过程中都是需要转义的，如果遇到类似“\d”的元字符，同样是在前边加一个“\”，即“\\d”；但是，如果是使用构造函数形式使用正则表达式，那么转义需要使用双重转义，例如：\d->\\d。

匹配符

.	匹配除 \n 以外的任何字符
^	匹配字符串开头
$	匹配字符串结束
[^x]	匹配除x字符以外的任何字符
\b	匹配单词边界
\B	与\b相反
\d	匹配任何 0 到 9 之间的单个数字 [0-9]
\D	与\d相反 [^0-9]
\s	匹配任何空白字符 [ \f\n\r\t\v]
\S	与\s相反 [^\s]
\w	匹配大小写英文字符及数字 0 到 9 之间的任意一个及下划线  [a-zA-Z0-9_]
\W	与\w相反 [^a-zA-Z0-9_]
[\u4e00-\u9fa5]	匹配任意单个汉字
a|b	匹配a或b
?=x	匹配其后紧接x的字符串
?!=x	匹配其后不紧接x的字符串

限定符

*	[0,)
+	[1,)
?	[0,1]
{n}	重复n次
{n,}	重复n次或更多
{n,m}	重复n到m次

3.RegExp实例属性

　　(1)global：布尔值，g标志

　　(2)ignoreCase：布尔值，i标志

　　(3)multiline：布尔值，m标志

　　(4)lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从原字符串0算起；此属性须配合exec()或者test()，且在全局模式下有意义，非全局模式值恒为0

　　(5)source：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回

　　　　var pattern1 = /\[bc\]at/i;

　　　　var pattern2 = /\\[bc\\]at/i;

　　　　pattern1.source与pattern2.source值是相同的：\[bc\]at

4.RegExp实例方法

　　(1)exec()　　RegExp的主要方法，专为捕获组而设计，接受一个字符串参数，然后返回包含匹配项的数组，没有匹配项返回null；

　　　　　　　　返回的数组包含额外的两个属性：index(匹配项在字符串中的位置)和input(正则表达式字符串)，且数组中的第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串。

 1 <script>
 2     var text = "mom and dad and baby";
 3     var pattern = /mom( and dad( and baby)?)?/gi;
 4     var matches = pattern.exec(text);
 5     console.log(matches.index);//0
 6     console.log(matches.input);//mom and dad and baby
 7     console.log(matches[0]);//mom and dad and baby
 8     console.log(matches[1]);//and dad and baby
 9     console.log(matches[2]);//and baby
10 </script>

 

　　　对于exec()方法，设置全局标志，也仅会返回一个匹配项；如果不设置全局标志，那么每次调用exec()方法，都会从头开始。此外，正则表达式的lastIndex属性在非全局模式下，调用exec()方法不会改变。

　　　注意：IE的JS实现在lastIndex上有偏差，即使在非全局模式下，它的值也会变化。

 1 <script>
 2     var text = "cat,bat,sat";
 3     var pattern1 = /.at/;
 4     
 5     var matches = pattern1.exec(text);
 6     console.log(matches.index);//0
 7     console.log(matches[0]);//cat
 8     console.log(pattern1.lastIndex);//0
 9     
10     var matches = pattern1.exec(text);
11     console.log(matches.index);//0
12     console.log(matches[0]);//cat
13     console.log(pattern1.lastIndex);//0
14     
15     var text = "cat,bat,sat";
16     var pattern1 = /.at/g;//全局匹配
17     
18     var matches = pattern1.exec(text);
19     console.log(matches.index);//0
20     console.log(matches[0]);//cat
21     console.log(pattern1.lastIndex);//3
22     
23     var matches = pattern1.exec(text);
24     console.log(matches.index);//4
25     console.log(matches[0]);//bat
26     console.log(pattern1.lastIndex);//7
27 </script>

 

　　(3)三种输出方式：1)toString()

　　　　　　　　　　 2)toLocaleString()

　　　　　　　　　　 3)valueOf()

　　　都是返回字面量形式的正则表达式，而非构造函数形式。

5.RegExp构造函数属性

　　RegExp构造函数的属性适用于作用域中的所有正则表达式，并且基于所执行的最近一次正则表达式操作而变化，这些属性有两种访问方式：长属性名和短属性名(Opera不支持短属性)。

　　Opera不支持input,lastMatch,lastParen，multiline属性,IE不支持multiline属性。

长属性名	短属性名	说明
input	$_	最近一次要匹配的字符串
lastMatch	$&	最近一次的匹配项
lastParen	$+	最近一次匹配的捕获组
leftContext	$`	input字符串中lastMatch之前的文本
multiline	$*	布尔值，表示是否所有表达式都采用多行模式
rightContext	$‘	input字符串中lastMatch之后的文本

 1 <script>
 2     var text = "this has been a short summer";
 3     var pattern = /(.)hort/g;
 4     
 5     if(pattern.test(text)){
 6         console.log(RegExp.input);//this has been a short summer，还可以写成console.log(RegExp[‘$_‘])
 7         console.log(RegExp.leftContext);//this has been a 
 8         console.log(RegExp.rightContext);// summer
 9         console.log(RegExp.lastMatch);//short
10         console.log(RegExp.lastParen);//s
11         console.log(RegExp.multiline);//false
12     }
13 </script>

 　　除了以上属性，还有9个用于存储捕获组的构造函数属性，访问语法：RegExp.$n，n取1-9。当调用exec()或test()方法，这些属性会被自动填充。

1 <script>
2     var text = "this has been a short summer";
3     var pattern = /(..)or(.)/;
4     
5     if(pattern.exec(text)){
6         console.log(RegExp.$1);//sh
7         console.log(RegExp.$2);//t
8     }
9 </script>