JS正则匹配

什么是正则表达式？

正则表达式又称规则表达式，计算机科学的一个概念，用来测试、匹配、替换符合一定规则的文本。

如何使用正则表达式？

var expression = / pattern /flags;

其中 pattern 正则表达式的内容，flag 表示修饰符

修饰符

修饰符	含义	描述
i	ignore-不区分大小写	将匹配设置为不区分大小写，搜索时不区分大小写：A和a没有区别
g	global - 全局匹配	查找所有的配置项
m	multi line - 多行匹配	使边界字符^和$匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾
s	特殊字符圆点 . 中包含换行符 \n	默认情况下的圆点 . 是匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后，.中包含换行符\n

基本要素

字符类

字符	含义	举例
.	匹配任意一个字符	abc.可以匹配abcd或abc8
[ ]	匹配括号中的任意一个字符	[abc]d可以匹配ad、bd、cd
-	在[ ]内表示字符范围	[0-9a-fA-F]可以匹配一位十六进制数字
^	位于[ ]括号内的开头，匹配除括号中的字符之外的任意一个字符	[^xy] 匹配xy之外的任意一个字符，因此[^xy]1可以匹配a1、b1但不匹配x1、y1
[[:xxx:]]	grep工具预定义的一些命名字符类	[[:alpha:]] 匹配一个字母，[[:digit:]] 匹配一个数字

数量限定符

字符	含义	举例
?	紧跟在它前面的单元应匹配零次或一次	[0-9]?.[0-9]匹配0.0、1.7、。4等，由于在正则表达式中是一个特殊字符，因此需要\转义取其字面值
+	紧跟在它前面的单元应匹配一次或多次	[a-zA-Z_.-]+@[a-zA-Z_.-]+.[a-zA-Z_.-]+匹配email地址
*	紧跟在它前面的单元应精确匹配零次或多次	[0-9][0-9]*匹配至少一位数字，等价于[0-9]+，[a-zA-Z_]+[a-zA-Z_0-9]*匹配C语言的标识符
{N}	紧跟在它前面的单元应精确匹配N次	[1-9][0-9]{2}匹配从100到999的整数
{N,}	紧跟在它前面的单元应匹配至少N次	[1-9][0-9]{2,}匹配大于等于三位数的整数
{,M}	紧跟在它前面的单元应匹配最多M次	[0-9]{,1}指最多匹配0-9之间的一个整数，相当于[0-9]?
{N,M}	紧跟在它前面的单元应匹配至少N次，最多M次	[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}匹配IP地址

位置限定符

字符	含义	举例
^	匹配行首的位置	^Content匹配位于一行开头的Content
$	匹配行末的位置	;$ 匹配位于一行结尾的;号，^$ 匹配空行
<	匹配单词开头的位置	<th匹配···this，但不匹配ethernet、tenth
>	匹配单词结尾的位置	p>匹配leap ···，但不匹配parent、sleepy
\b	匹配单词开头或结尾的位置	\bat\b匹配···at···，但不匹配cat，atexit、batch
\B	匹配非单词开头或结尾的位置	\Bat\B匹配battery，但不匹配···attend、hat···

特殊符号

字符	含义	举例
\	转义字符，普通字符转义为特殊字符，特殊字符转义为普通字符	普通字符<写成<表示单词开头位置，特殊字符.写成.以及\写成\就当作普通字符匹配
( )	将正则表达式的一部分括起来组成一个单元，可以对整个单元使用数量限定符	([0-9]{1,3}.){3}[0-9]{1,3}匹配IP地址
|	连接两个子表达式，表示或的关系	n(o|either)匹配no或neither

其他普通字符集及其替换

符号	替换正则	匹配
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\w	[a-zA-Z0-9]	数字字母下划线
\w	[^\w]	非数字字母下划线
\s	[\r\t\n\f]	表格，换行等空白区域
\S	[^\s]	非空白区域

匹配字符串中的某段内容

例如我们要匹配的字符串是html标签里面的颜色值

var str = '<span style="color:#E23C39">50</span>';

(1)截取字符串中以color:开头">结尾的部分（包含开头和结尾）

var strMatch = /color:.*?\">/g
console.log(str.match(strMatch)); //输出 color:#E23C39">

符号	表示
.	除换行符\n之外的任意字符
*	匹配前面的子表达式0次或者多次
?	匹配前面的子表达式零次或一次，或指明一个非贪婪限定符
\">	匹配 ">

(2)截取字符串以color:开头，以">之前的内容结尾

• (?=">) 表示以">结尾的前面字符串，不包含">

var strMatch = /color:.*?(?=">)/g;
console.log(str.match(strMatch)); //输出 color:#E23C39

(3)截取字符串color:和">之间的内容（不包含color:和">）

• (?<=color:)表示获取color:之后的字符串，不包含color:

var strMatch = /(?<=color:).*?(?=")/g;
console.log(str.match(strMatch)); //输出 #E23C39

参考：
正则表达式
js正则匹配字符串中某段内容