【JavaScript高级】正则

 

▊ 正则表达式概述

正则表达式（regular expression）

正则表达式的作用？对字符串的匹配。替换。提取。

JS中，正则表达式是对象 ↓

// 创建——不管是数字型还是字符型，都不用加引号

// 通过RegExp对象构造函数创建
var reg = new RegExp(/123/);
// 字面量方式创建
var reg = /123/;


// 测试
reg.test(str);


// 替换
str.replace(/[^abc]/, '...');		// 这样写只能替换第一个	
str.replace(/[^abc]/g, '...');		// global全局匹配，替换所有	
str.replace(/[^abc]/i, '...');		// ignoreCase忽略大小写
str.replace(/[^abc]/gi, '...');		// 以上两种效果

 
 

▊ 正则入门
 
字符

字符	含义	备注
.	匹配任意一个字符
[]	匹配括号内的任意一个字符	[abc]匹配a、b、c “一个”；自带"或"的含义
[-]	-与[]配合使用，表示范围	[a-zA-z0-9] 是比较常见的写法
[^]	^与[]配合使用，表示取范围外	[^abc]表示除了a、b、c外的任意一个字符

 
数量限定符

字符	含义	备注
*	0次或多次(紧跟在前面的单元)	[0, ∞)
?	0次或1次(紧跟在前面的单元)	0, 1]
+	1次或多次(紧跟在前面的单元)	[1, ∞)
{N}	匹配N次(紧跟在前面的单元)
{N,}	至少匹配N次(紧跟在前面的单元)
{N,M}	匹配N到M次(紧跟在前面的单元)

 
位置限定符(本身并没有匹配任何字符)

字符	含义	备注
^	匹配字符串开始的位置(只匹配位置，不匹配任何字符)	^$用于精确匹配。注意’^abc$‘只能精确匹配’abc’，'abcabc’是不行的
$	匹配字符串结束的位置(只匹配位置，不匹配任何字符)	同上
\b	匹配一个单词边界(只匹配位置，不匹配任何字符)	例如’.\b.’ 匹配’@qq中的’@q’—两个点分别是@和q，\b匹配它们之间的"位置"
\B	匹配一个非单词边界(只匹配位置，不匹配任何字符)

 
预定义类(一些常见模式简写)

字符	含义	备注
\d	匹配0-9的任一数字	相当于[]0-9]
\D	匹配所有0-9之外的字符	相当于[^0-9]
\w	匹配任意的字母、数字、下划线	相当于[A-Za-z-9_]
\W	匹配除字母、数字、下划线以外的任一字符	相当于[^A-Za-z-9_]
\s	匹配空字符（换行、回车、制表、换页）	相当于[\n\r\t\v\f]
\S	匹配所有非空字符	相当于[^\n\r\t\v\f]

 
其他

字符	含义	备注
\	转义	例如\.，\\，\$ 将其转为原义
()	括起来组成一个单元	因为数量限定符都要求"紧跟在前面的单元"
|	或	单条竖线

 
 
 
▊ 正则高级
 

❶ 贪婪与非贪婪

在使用位置限定符时(*，?，+，{N}，{N,}，{N,M})时，都是默认"尽可能多的匹配"，即贪婪模式

在位置限定符后加上一个问号(?)，则改为"在可以匹配的前提下尽可能的不匹配"，即非贪婪模式

举个例子，一看便知：

字符串 "booobooob"

(b)(\w+)  		>>匹配>>		"booobooob"    分析: 默认为贪婪模式
(b)(\w+)(b)		>>匹配>>		"booobooob"	   分析: 贪婪模式，第二个（b）没有“半途而废”，而是去匹配了最后一个"d"

(b)(\w+?)		>>匹配>>		"bo"两处		   分析: 改为非贪婪模式
(b)(\w+?)(b)	>>匹配>>		"booob"		   分析: 非贪婪模式


更为常用的场景：在匹配"
loli
suki
"这两个单元格时
<td>(.*)</td>   在默认的贪婪模式下会一次性选中两个单元格
<td>(.*?)</td>  在非贪婪模式下，把两个单元格分别选取出来

 

❷ 反向引用

通俗地讲，反向引用就是说，括号()单元已经匹配的字符串，可以通过\1\2这种写法，再次拿来使用

具体使用方法是：\1是指复用第一个括号单元匹配的字符串，\2是指复用第一个括号单元匹配的字符串，以此类推；若出现括号嵌套，根据左括号排序

还是直接顺一遍例子：

字符串 :		"loli"'suki'	  
正则表达式 	("|')(.*?)(\1)	
分析 :		匹配出"loli"和'suki'.匹配"loli"时，第一个括号先匹配双引号，因此\1被认为是双引号去匹配；匹配'suki'时同理，此是\1被认为是单引号
注意 :		反向引用所复用的，是括号单元已经匹配了的字符串，而不是括号单元的内容。因此，本例中去掉?变成默认的贪婪匹配后，结果不变(★)


字符串 :		"aa bbb cccc ddddd"
正则表达式	(\w+)\1{4,}
分析	:		匹配出"ddddd"


更为常用的场景：比如<button>lolisuki</button>，这个双标签不是正好可以使用\1反向引用吗？  <(.*?)>(.*)</\1>

 

❸ 预搜索 / 反向预搜索（零宽断言）

之前学习的位置限定符，有一个重要的特点：本身不匹配任何字符，仅仅作为一个条件限定

以同样的方式去理解这里的预搜索和反向预搜索
 
正向预搜索：(?=xxxx)，(?!xxxx)

反向预搜索：(?<=xxxx)，(?

字符串 :	  	"Windows 2077, Windows 10, Windows XP"
正则 :		"Windows (?=10|XP)"
结果 :		两处"Windows " (注意空格细节)
分析 :		正向预搜索的语义就是"以xxxx结尾"，但这个"结尾"本身不匹配任何字符串，仅仅作为一个限制条件


字符串 :		"loli and loly"
正则	:		"lo(?!li)"
结果	:		第二处"lo"
分析	:		语义为"不以li结尾"；注意只匹配的是"lo"而不是"loly"，这个"结尾"仅仅是条件，本身不被匹配


字符串 :		"0123456789"
正则	:		"(?<=\d{3})\d*(?=\d{3})"
结果	:		"3456"
分析	:		匹配除了前3个和最后3个数字之外的中间的数字

 

 

 
♬ 正则测试在线工具传送门：戳这里 >_<
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

☀ Loli & JS

♫ Suki