从零开始学_JavaScript_系列（16）——js系列<5>（正则表达式）

╰+哭是因爲堅強的太久メ 2022-07-24 06:11 187阅读 0赞

前注：参考网易云课堂前端的正则表达式内容

**（12）正则表达式**

①描述字符串规则的表达式

使用 ** /规则/**  来表示

②正则表达式.test(字符串)

用于测试正则表达式与字符串是否匹配

返回值是true或者false

注：只需要字符串里包含正则表达式，即返回true，也就是说，假如正则表达式是/123/，字符串是a1234b，那么依然返回true

**③锚点：**

^     起始位置（shift+6），/^http:/匹配以https开头的

$     结束为止，/\\.jpg$/ 表示以.jpg结尾

\\b    单词边界，\\bTom\\b表示Tom需要是一个独立的单词

例：

/^123/.test('ab123')     返回false

/^123/.test('123ab')     返回true

/\\.jpg$/.test("123.jpg") 返回true

/\\bTom\\b/.test("nameis Tom Peel")     返回true

/\\bTom\\b/.test("nameisTomPeel")     返回false

/^12$/.test("12")     返回true（表示12开头和结尾，1212是false）

/^12$/.test("a12")    返回false

**④字符类：（表示一个字符）**

\[abc\]   表示a或b或c

\[a-z\]   表示a~z中的一个

\[0-9\]   表示0~9中的一个

\[^0-9\]     表示不是0-9（不是数字）

.       表示任意字符（除换行符）（是一个英文句号）

例子：

/./.test("1233")

true（因为有通配符）

/\[0-9\]/.test("1233")

true（因为有数字）

/\[^0-9\]/.test("1233")

false（因为没有非数字的）

/\[^0-9\]/.test("1233a")

true（因为有了非数字a）

/\[^0-9\]\[^0-9\]/.test("1233a")

false（因为只有一个非数字字符）

/^\[0-9\]/.test("a1233a")

false（因为不是以0-9的某个数字为开头的）

**⑤元字符**

\\d    表示\[0-9\]

\\D    表示\[^\\d\]，即非0-9

\\s    空白符

\\S    \[^\\s\]非空白符

\\w    \[A-Za-z0-9\_\]字母、数字、下划线

例子：

/\\d/.test("2");

true（因为有数字）

/\\D/.test("2");

false（因为没有非数字）

/\\w/.test("2");

true（因为有字母、数字、下划线的一个）

/\\s/.test("2");

false（因为没有空白符）

/\\s/.test("22");

true（因为有空白符）

/^\\s/.test("22")

false（虽然有空白符，但不在开头）

/\\S/.test("22");

true（因为有非空白符2）

/\\S/.test("");

false（因为没有非空白符空格）

**⑥量词**

\{m,n\}   出现m~n次

\*     \{0,\}表示0~无穷次

?     \{0,1\}出现0次或者1次

\+     \{1,\}表示出现至少1次

例子：

/\\d+/.test("1");

true（数字至少出现了一次）

/\\d+/.test("a");

false（数字一次都没出现）

/\\d\{2,\}/.test("1");

false（数字至少出现2次但只有1次）

/\\d+:/.test("1");

false（虽然有数字，但是数字后面没有跟冒号字符

/\\d+:/.test("1:");

true（这个1后面有冒号所以是true）

/1\\d\{1\}/.test("1a1");

false（因为第二个字符应该也是一个数字，并且出现一次）

/1\\d\{2\}/.test("12a1");

false（第2个字符开始，2个字符需要是数字，不符合）

**⑦正则表达式的两个模式：**

简述：

贪婪模式：正则表达式在匹配成功的前提下，尽可能多的去匹配，匹配次数少，效率高；

惰性模式：正则表达式在匹配成功的前提下，尽可能少的去匹配，匹配次数多，效率低。

详述：

1.从语法角度看贪婪与非贪婪

被匹配优先量词修饰的子表达式，使用的是贪婪模式；被忽略优先量词修饰的子表达式，使用的是非贪婪模式。

匹配优先量词包括：“\{m,n\}”、“\{m,\}”、“?”、“\*”和“+”。

忽略优先量词包括：“\{m,n\}?”、“\{m,\}?”、“??”、“\*?”和“+?”。

2.从应用角度看贪婪与非贪婪

贪婪与非贪婪模式影响的是被量词修饰的子表达式的匹配行为，贪婪模式在整个表达式匹配成功的前提下，尽可能多的匹配；而非贪婪模式在整个表达式匹配成功的前提下，尽可能少的匹配。非贪婪模式只被部分NFA引擎所支持。

3.从匹配原理角度看贪婪与非贪婪

能达到同样匹配结果的贪婪与非贪婪模式，通常是贪婪模式的匹配效率较高。

所有的非贪婪模式，都可以通过修改量词修饰的子表达式，转换为贪婪模式。

贪婪模式可以与固化分组结合，提升匹配效率，而非贪婪模式却不可以。

引用：http://blog.csdn.net/lxcnn/article/details/4756030

**⑧转义符：**

<table> 
 <tbody> 
 <tr> 
 <td> 元字符 </td> 
 <td> 转义后的字符 </td> 
 </tr> 
 <tr> 
 <td> / </td> 
 <td> \/ </td> 
 </tr> 
 <tr> 
 <td> . </td> 
 <td> \. </td> 
 </tr> 
 <tr> 
 <td> ? </td> 
 <td> \? </td> 
 </tr> 
 </tbody> 
</table>

例子：

/^https?:\\/\\/\[a-z\]+\\.\[a-z\]+\\.\[a-z\]+/.test("https://www.baidu.com")

true（表示http开头，然后可能有s，下来是冒号外加2个/，之后至少有一个字母（小写的），下来有一个英文句号，之后至少有一个字母（小写的），下来有一个英文句号，然后以至少一个英文字母为结尾）

**⑨多选分支**

|     表示或

例子：

/^(a|b)/.test("a1");

true（表示a或者b开头的，等价于\[ab\]）

/^(a|b)/.test("c1");

false（因为是c开头）

/\\.(jpg|bmp|png|jpeg|gif)$/.test(".jpg1");

false（因为结尾多了一个1，可以用来匹配图片的文件名后缀）

**⑩正则表达式的捕获：**

()    保存匹配到的字符串，之后可以用

(?:匹配条件)     不保存匹配到的字符串

varp = str.match(regexp)   获取匹配到的字符串，返回值是p

捕获到的变量存储在$1，$2之类的变量中

例子：

(https?:)\\/\\/    表示http，可能有s，后面是一个冒号，再后面跟着//

(\[^/\\\]+)   表示不是\\的字符，有至少1个

(\\/\[^/?\]\*)?   表示先有一个/，然后非?字符有0~多个（并且这一段可能有可能没有）

(\\?\[^\#\]\*)?    表示?开头，然后非\#字符有0~多个（并且这一段也可能有可能没有）

(\#.\*)?  表示\#开头，任意字符有0~多个。并且这段可能有可能没有

varstr ="http://www.baidu.com".match(/(https?:)\\/\\/(\[w\]+)\\.(\[a-z\]+)\\.(\[a-z\]+)/)

str        这里是输出str（即match的返回值，注意，str是一个字符串数组）

\["http://www.baidu.com","http:", "www", "baidu", "com"\]

**⑪替换一个子串**

str.replace(regexp/substr,replacement)   表示字符串用正则表达式匹配后，替换为参数2。注意，参数2可以是**函数，函数的参数是要被替换的内容**

例子：

"abc".replace(/(c)/,"$1.00");

"abc.00"（c被匹配到了，$1表示捕获到的c，替换为c.00）

"priceis 5".replace(/(\\d)/g,"$$$1.00");

"priceis $5.00"（使用两个$可以表示一个$）

**⑫表示全部**

在正则表达式后面加g

/a/g

例子：

abca".replace(/(a)/g,"$1.00")

"a.00bca.00"（所有a都被替换为a.00）

从零开始学_JavaScript_系列（16）——js系列<5>（正则表达式）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关从零开始学正则（三）

相关从零开始学正则（二）

相关从零开始学正则（一）

相关从零开始学_JavaScript_系列（19）——js系列<6>闭包

相关从零开始学_JavaScript_系列（16）——js系列<5>（正则表达式）

相关从零开始学_JavaScript_系列（30）——NodeList

相关从零开始学_JavaScript_系列（43）——Symbol简述

相关从零开始学_JavaScript_系列（47）——Reflect

相关从零开始学_JavaScript_系列（55）——Generator函数(3)yield*表达式

相关从零开始学正则