--- theme: cyanosis --- **这是我参与更文挑战的第7天，活动详情查看**： [**更文挑战**](https://juejin.cn/post/6967194882926444557)
正则表达式的意义在于通过开发人员编写匹配模式，然后可以通过这个匹配模式去校验用户的输入是否符合开发人员编写的模式。 # 创建正则表达式以及正则表达式的规则 ## 创建正则表达式 ### a. 直接量语法 ```javascript /pattern/attributes ``` 这里的pattern是一个正则表达式而不是一个字符串，attributes 是一个可选的字符，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。 ```javascript var regExp = /^[a-z]+$/i; regExp.test('Asadf'); //true ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c51ea34f88f5428781f6a5fca47093ee~tplv-k3u1fbpfcp-zoom-1.image) **字符串中一定要小心\的出现，需要进行转义**，例如: ```javascript var regExp = /^[a-z]+\d[a-z]$/i; ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec704aa6165d49a098b1b06c176e7e83~tplv-k3u1fbpfcp-zoom-1.image)对于正则表达式对象可以直接使用元字符（/d表示数字），上面表示以多个小写字母开始中间含有一个数字，最后一单个小写字符结束。 ```javascript var regExp1 = new RegExp('^[a-z]+\\d[a-z]$', 'i'); ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5e446c8044747a5b95bc19bc73c84f1~tplv-k3u1fbpfcp-zoom-1.image)对于我们使用字符串创建的时候，由于\的默认行为是用于转义的，所以需要两个\，才能达到我们想要的结果。

### b. RegExp对象创建 ```javascript new RegExp(pattern, attributes); var regExp1 = new RegExp('^[a-z]+$', 'i'); // /^[a-z]+$/i var regExp2 = new RegExp(/^[a-z]+$/, 'i'); // /^[a-z]+$/i var regExp3 = new RegExp(/^[a-z]+$/i, 'g'); // /^[a-z]+$/g ``` - 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
- 参数attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

### c. 正则表达式对象与正则表达式字符串真正可以使用的正则表达式对象，对于正则表达式字符串还需要依赖RegExp对象创建。二者之间的区别在于一个用反斜杠包含，一个是字符串。 **但是我们能够使用的只有正则表达式对象。**

## 正则表达式的规则 ### a. 开始 & 结束开始： ^表示以**字符为开始
结束： $表示以**字符为结束 ```javascript //多个小写字母开始中间含有一个数字，最后一单个小写字符结束。 var regExp = /^[a-z]+\d[a-z]$/i; var regExp1 = new RegExp('^[a-z]+\\d[a-z]$', 'i'); regExp.test('a3c'); //true regExp1.test('a3cd'); //false ```
### b. 元字符 #### . 任意的字符（除了换行和行结束符） ```javascript var str="That's hot!"; var patt1=/h.t/g; console.log(patt1.test(str)); //true console.log(str.match(patt1)); //['hat', 'hot'] ```
#### \s 查找空白字符空白符可以是： - **空格符 (space character)** - **制表符 (tab character)** - **回车符 (carriage return character)** - **换行符 (new line character)** - **垂直换行符 (vertical tab character)** - **换页符 (form feed character)** ```javascript var str="Th t s hot!"; var patt1=/h\st/g; console.log(patt1.test(str)); //true console.log(str.match(patt1)); //['h t'] ```
#### \S 查找非空白字符 ```javascript var str="Th t s hot!"; var patt1=/h\St/g; console.log(patt1.test(str)); //true console.log(str.match(patt1)); //hot ```
#### \b 匹配单词边界匹配单词边界，单词字符的前面或后面不可与另一个单词字符直接相邻。
匹配首字母边界，举例如下：匹配首字母是m的边界 ```javascript var str="moon"; var patt1=/\bm/; console.log(patt1.test(str)); //true console.log(str.match(patt1)); //["m", index: 0(指的是m的index的值), input: "moon", groups: undefined] var str="emoon"; var patt1=/\bm/; console.log(patt1.test(str)); //false console.log(str.match(patt1)); //null ```
匹配尾字母边界，举例如下： ```javascript var str="moonm"; var patt1=/m\b/; console.log(patt1.test(str)); //true console.log(str.match(patt1)); //["m", index: 4, input: "moonm", groups: undefined] var str="emoomn"; var patt1=/m\b/; console.log(patt1.test(str)); //false console.log(str.match(patt1)); //null ```
#### \B 匹配非单词边界这里还是了解一下单词边界和非边界的概念
边界是指一个位置，而不是某一个具体的字符，那什么是位置，那就是每个字符之间以及字符串首尾
当把位置全表示出来时是这样 ```javascript |e|x|a|m|p|l|e|:|a|+|b|=|3| ``` 当只显示单词边界时是这样 ```javascript |example|:|a|+|b|=|3| ``` 那么显示非单词边界就是这样 ```javascript e|x|a|m|p|l|e:a+b=3 ``` ```javascript var str="Visit Schoolr"; var patt1=/\BSchool/g; console.log(str.match(patt1)); //null var str="Visit fSchoolr"; var patt1=/\BSchool/g; console.log(str.match(patt1)); //["School"] var str="Visit fSchool"; var patt1=/\BSchool/g; console.log(str.match(patt1)); //["School"] var str="Visit School"; var patt1=/\BSchool/g; console.log(str.match(patt1)); //null ``` 上面的例子是指左边非边界匹配，所以第一个例子匹配的是左侧边界，所以结果为null，第二个匹配的费左侧边界。尽管匹配到了右侧边界，但是我们的正则模式只是匹配左侧非边界，所以没有影响。
右侧匹配类似，这里就不在举例了。

#### 简单字符查找 \w 查找单词字符
\W 查找非单词字符。
单词字符包括：a-z、A-Z、0-9，以及下划线。

#### \d 查找数字 #### \D 查找非数字字由于这几个比较简单就不举例子了。

#### 其他的元字符 - \0 查找 NUL 字符。 - \n 查找换行符。 - \f 查找换页符。 - \r 查找回车符。 - \t 查找制表符。 - \v 查找垂直制表符。 - \xxx 查找以八进制数 xxx 规定的字符。 - \xdd 查找以十六进制数 dd 规定的字符。 - \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 ****
### c. 量词上面的内容我已经学习到了，正则表达式的创建，以及正则表达式的开始结束，还有内部的重要组成部分元字符。接下来就要学习一下对于某一字符的量词变化，也是我们对于匹配内容的长度限制。 #### n+ 量词匹配包含至少一个 n 的任何字符串 ```javascript var str="Hellooo World! Hello W3School!"; var patt1=/o+/g; console.log(str.match(patt1)); //["ooo", "o", "o", "oo"] ``` 由于我们匹配的一个或者多个o字符，所以这里会匹配到四处。

#### n* 量词匹配包含零个或多个 n 的任何字符串 ```javascript var str="Hellooo World! Hello W3School!"; var patt1=/o*/g; console.log(str.match(patt1)); //["", "", "", "", "ooo", "", "", "o", "", "", "", "", "", "", "", "", "", "o", "", "", "", "", "", "", "oo", "", "", ""] ``` 这里结果为什么是这个，是因为每当遇到不是o的单词的时候，都会匹配一个0个o，会得到一个结果""，所以对于上面的第一小段Hellooo匹配的过程是这样的首先匹配H，得到的结果是""，匹配e得到的结果是""，匹配l得到的结果是""，在匹配l得到的结果是""，然后匹配到了3个o，再然后匹配空格字符得结果""。
然后我是用|来画出上面匹配结果是""的地方，如下： ```javascript |H|e|l|looo| |Wo|r|l|d|!| |H|e|l|lo| |W|3|S|c|hoo|l|!| ```
#### 其他 - n? 匹配任何包含零个或一个 n 的字符串n{X} 匹配包含 X 个 n 的序列的字符串 - n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串 - n{X,} 匹配包含至少 X 个 n 的序列的字符串 - n$ 匹配任何结尾为 n 的字符串 - ^n 匹配任何开头为 n 的字符串
**?=n 匹配任何其后紧接指定字符串 n 的字符串** ```javascript /regexp(?=n)/或者new RegExp("regexp(?=n)") ``` **?!n 匹配任何其后没有紧接指定字符串 n 的字符串** ```javascript /regexp(?!n)/或者new RegExp("regexp(?!n)") ```
### d. 方括号上面的我们的例子说的都是匹配一个字符对应一个位置，多个字符对应多个位置。我们也可以匹配多个字符与一个位置的。 #### [abc] 表达式用于查找方括号之间的任何字符 ```javascript var str="Helloo"; var patt1=/[lo]/g; console.log(str.match(patt1)); //["l", "l", "o", "o"] ```
#### [^abc] 查找任何不在方括号之间的字符 ```javascript var str="Helloo"; var patt1=/[^lo]/g; console.log(str.match(patt1)); //["H", "e"] ``` **方括号内的字符可以是任何字符或字符范围** - [0-9] 查找任何从 0 至 9 的数字 - [a-z] 查找任何从小写 a 到小写 z 的字符 - [A-Z] 查找任何从大写 A 到大写 Z 的字符 - [A-z] 查找任何从大写 A 到小写 z 的字符但是上面的种种都是匹配的内容都是单个字符，是指匹配规则的范围变广了而已，如果我们有多个连续的单词一起的话，我们需要使用().

#### ()查找任何指定的选项 ```javascript var str="Helloo"; var patt1=/(lo)/g; console.log(str.match(patt1)); //[lo] ``` 如果()的匹配项也可以多种组合的话，就是用 **|** ```javascript var str="Helloo"; var patt1=/(lo|He)/g; console.log(str.match(patt1)); //["He", "lo"] ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70959e64ddd4497aa4797a8d3f8254ae~tplv-k3u1fbpfcp-zoom-1.image) # 正则表达式方法使用 ## RegExp对象方法 ### exec() 方法用于检索字符串中的正则表达式的匹配 exec() 方法的功能非常强大，它是一个通用的方法，而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。
如果exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第1个元素是与 RegExpObject 的第1个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。**当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。**
**重要事项：如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串，就必须手动地把 lastIndex 属性重置为 0。**
提示：请注意，无论 RegExpObject 是否是全局模式，exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处，后者在全局模式下返回的信息要少得多。因此我们可以这么说，在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。 ```javascript var str = "Hello world o"; var patt = new RegExp("o","g"); var result; while ((result = patt.exec(str)) != null) { console.log(result); console.log(patt.lastIndex); } console.log(str.match(patt)) ``` 图中红色部分是exec的输出，绿色部分是match输出
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6fdba68cf1a48779527f53d5b7e4305~tplv-k3u1fbpfcp-zoom-1.image) **特殊情况**
当我将全局匹配参数g去掉的时候，整个程序会无限循环。那是因为上面其实已经提到了：**当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。**

### test() 方法用于检测一个字符串是否匹配某个模式如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。 ```javascript var str = "Visit W3School"; var patt1 = new RegExp("W3School"); console.log(patt1.test(str)); //true ```
## string对象的方法 ### search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串返回值：stringObject 中第一个与 regexp 相匹配的子串的起始位置。
注释：如果没有找到任何匹配的子串，则返回 -1。
search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。 ```javascript var str="Visit W3School!" console.log((str.search(/W3School/))); //6 ```
### match 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
#### stringObject.match(searchvalue) // 检索字符串 ```javascript var str="Visit W3School sW3School!" console.log((str.match('W3School'))); //["W3School", index: 6, input: "Visit W3School sW3School!", groups: undefined] ```
#### stringObject.match(regexp) // 检索 RegExp对象 ```javascript var str="Visit W3School hW3School!" console.log((str.match(/W3School/))); // ["W3School", index: 6, input: "Visit W3School hW3School!", groups: undefined] var str="Visit W3School hW3School!" console.log((str.match(/W3School/g))); // ["W3School", "W3School"] ``` 从上面的两个例子可以看出match在检索RegExp对象的时候依赖于是否具有全局标志g。
**如果regexp没有标志g**，那么match()方法就只能在 stringObject 中执行一次匹配。
如果没有找到任何匹配的文本，match()将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。
**如果regexp具有标志g**，则 match()方法将执行全局检索，找到stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是stringObject中所有的匹配子串，而且也没有index属性或input属性。

### replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 ```javascript stringObject.replace(regexp/substr, replacement) ``` - regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 - replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52dc15731e584fc19074bec85ed408ef~tplv-k3u1fbpfcp-zoom-1.image) 从上图中可以看出有一个名词叫子表达式/子串。 ```javascript var name = "Doe, John"; var name1 = name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1"); console.log(name1); //John Doe ``` `$1指的是第一个正则表达式内部的()匹配的内容，上面的例子中值得就是Doe，$2指的是第二个()匹配的内容John` 然后举一个例子说一下上面出现的$相关的内容： ```javascript var name = "1Doe, John3"; var name1 = name.replace(/([a-zA-Z]+)\s*, \s*([a-zA-Z]+)/g, "$2 $1"); console.log(name1); //1John Doe3 //此处首先匹配的是Doe, John，所以1和3的原有位置保留，然后再将匹配内容用"$2 $1"替换，自然就成了1John Doe3 var name1 = name.replace(/([a-zA-Z]+)\s*, \s*([a-zA-Z]+)/g, "$&"); console.log(name1); //1Doe, John3 //这里输出和以前一样，因为使用匹配子串去替换匹配子串。 var name1 = name.replace(/([a-zA-Z]+)\s*, \s*([a-zA-Z]+)/g, "$`"); console.log(name1); //113 //此处首先匹配的是Doe, John，所以1和3的原有位置保留，使用匹配子串的左侧文本也就是1替换，自然就成了113 var name1 = name.replace(/([a-zA-Z]+)\s*, \s*([a-zA-Z]+)/g, "$'"); console.log(name1); //133 //与上一个同理 var name1 = name.replace(/([a-zA-Z]+)\s*, \s*([a-zA-Z]+)/g, "$$"); console.log(name1); //1$3 //用直接量符号$来替换匹配字符串Doe, John，自然就成了1$3。 ```
**ECMAScript v3 规定，replace() 方法的参数 replacement 可以是函数而不是字符串** ```javascript var name = "1Doe, John3"; var name1 = name.replace(/([a-zA-Z]+)\s*, \s*([a-zA-Z]+)/g, function() { console.log(arguments); //["Doe, John", "Doe", "John", 1, "1Doe, John3"] }); ``` 上面代码中含有五个参数： - 第一个参数是匹配模式的字符串， - 第二个参数到倒数第三个参数都是子表达式匹配的内容，也就是之前我们说的$1,$2。 - 倒数第二个参数是匹配的字符串在原有字符串的开始的index。 - 最后一个参数是原有字符串本身。
# 修饰符 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cb64ed3eb8b4f22917a36068b542743~tplv-k3u1fbpfcp-zoom-1.image)
这里举个例子，对于大小写的就不举例了，比较简单。 ```javascript var str = "first second\nthird fourth\nfifth sixth"; var patt = /(\w+)$/ console.log(str.match(patt)); // ["sixth", "sixth", index: 32, input: "first second↵third fourth↵fifth sixth", groups: undefined] var patt = /(\w+)$/g console.log(str.match(patt)); // ["sixth"] var patt = /(\w+)$/m console.log(str.match(patt)); // ["second", "second", index: 6, input: "first second↵third fourth↵fifth sixth", groups: undefined] var patt = /(\w+)$/gm console.log(str.match(patt)); // ["second", "fourth", "sixth"] ```
- 第一个例子是在没有修饰符的情况下，这时整个句子按照一行字符串匹配，最终匹配的是sixth。 - 第二个例子加上了全局修饰符，这样收到影响的只是match函数的输出值格式，之前已经说过了。 - 第三个例子只加上的多行修饰符。正则表达式是把\n、\r这些换行和回车当成边界了(可以这么理解)，此时则第一个匹配到的是second，但是由于没有加上全局修饰符，所以只会得到一个结果。 - 第四个例子则是加上了全局和多行修饰符，这样理所当然的输出三个值。
# 参考 - https://www.cnblogs.com/fuhai/p/6149169.html - http://www.w3school.com.cn/js/jsref_obj_regexp.asp