【正则表达式】JavaScript的exec()和search()方法

本文简单介绍了正则表达式的元字符，和 JavaScript 提供的两个和正则表达式有关的方法：RegExp.prototype.exec() 和 String.prototype.replace()。

正则表达式一般被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式为了描述一个规则，每每须要用到大量的元字符，这些元字符要记下来并灵活运用，须要耗费不少的精力，而通常实际开发中却不多用到正则表达式。此外为了保证复杂正则表达式是符合需求的，须要进行大量的字符串测试。因此这也是遇到须要用到复杂正则表达式实现的需求时，程序员表示很是难受（awsl）的缘由。

尽管可能会用得比较少，但在某些场景下，使用正则表达式是最好的选择，并且面试也可能会问到，因此仍是要好好掌握一些比较基本的用法的。

正则表达式的元字符

由于不是本文的重点，并且知识点过多，这里只会 简单描述一部分的元字符。若是你想系统地学习，能够阅读文末提供的参考资料。

字符	含义
\	转义字符
^	匹配输入开始
$	匹配输入结束
*	匹配前一个表达式 0到屡次。等价于{0,}
+	匹配前一个表达式 1到屡次。等价于{1,}
?	匹配前一饿表达式 0或1次。等价于{0,1}
.	匹配换行符外的任何单字符
(reg)	捕获组，会捕获括号里面的匹配项 reg。
(?:reg)	匹配 'reg' 但不捕获匹配项。当咱们须要将一段表达式做为一个总体，但又不想它被捕获的时候，就能够这样写。好比 (?:ab)+
x(?=y)	专业术语为 “先行断言”。当 x 后面有 y 时，才匹配 x。匹配的子串将不会包含 y。
(?<=x)y	“后行断言”，和上一条同理。
x(?!y)	“正向否认查找”。匹配一个 x 后面没有 y 的 x
x|y	匹配 x 或 y
{n}	匹配前面一个字符（也能够是圆括号围起来的一个子串） n 次，n必须为正整数。
{n, m}	匹配前面的字符 n - m 次。m 能够省略，表示匹配 n 次或更多。m 必须 大于或等于 n。若是 n 为 0，就是匹配前面字符0次，至关于这个子串被忽略。
[xyz]	字符集合。匹配方括号内的任意字符。咱们也能够经过 - 来指定字符范围，好比 [a-d] 等价于 [abcd]，[1-4] 等价于 [1234]，[\u4e00-\u9fa5] 则是匹配一个汉字。. 和 * 在方括号内没有特殊含义，不须要进行转义。
[\xyz]	匹配没有包含在方括号里任何字符的字符。
[\b]	匹配一个退格符
\b	匹配一个词的边界，匹配位于边界的单词字符。。\b 并不能匹配一个字符。如 \bm 能够匹配 moon，oo\b 不能匹配 moon。
\B	匹配非单词边界。如 \Boo 匹配 'noonday' 的 oo。
\d	匹配一个数字，等价于 [0-9]
\D	匹配非数字。通常大写表示对应小写的特殊字符的反面。
\s	匹配空白符
\S	匹配非空白符
\w	匹配一个单字符（字母、数字或下划线），等同于 [A-Za-z0-9_]，注意这个是匹配不了汉字的。
\W	与 \w 相反
\count	这里的 count 代指一个正整数，等同于第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。这个其实挺有趣的。如 /a(b)(c)d\2\1/ 等同于 /a(b)(c)dcb/
|	分支条件

正则表达式默认使用 贪婪匹配，即匹配尽量多的字符。但有时候咱们但愿能够匹配尽量少的字符，即 懒惰匹配，咱们能够在限定符（*、+、?、{n,m}这些指定重复数量的特殊字符）的后面添加 ? 表示。如 a*? 表示匹配 a 重复任意次，但尽量少。

使用复杂的正则表达式会遇到的问题是，没法保证写出的正则表达式是适用于全部对应的状况，这就须要咱们作足够多的测试。此外，正则表达式不是很好理解，须要作一些注释才能直到它作了什么事，一些语言容许在正则表达式使用注释语法，但 js 并不支持。

若是是新手，建议使用 RegExp.prototype.exec() 方法一个个进行测试来加深理解。

ES6 中，正则表达式的功能获得了增强，并提供了更多的方法，本文不会讨论这些新方法。

标志符

• g：全局搜索。能够进行屡次正则匹配，而不是在发现第一个匹配项时当即中止。
• i：忽略大小写
• m：多行搜索
• y：粘连修饰符。除了第一次匹配，剩余的字符串必须从头开始匹配。ES6 新增的标志符
• u：Unicode模式，能够处理四个字节的 UTF-16 编码。ES6 新增的标志符

使用到正则表达式的 javaScript 原生方法

方法	描述
exec	一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
test	一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
match	一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
search	一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace	一个在字符串中执行查找匹配的String方法，而且使用替换字符串替换掉匹配到的子字符串。
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。

这些方法为 String 或 RegExp 对象的方法。

RegExp.prototype.exec()

正则表达式的 exec() 方法，是为 捕获组 而设计的。

const pattern = /a(bc(1))(de)/g
const text = `-abc1de-`;
const matches = pattern.exec(text);
复制代码

exec() 方法若是匹配成功，会返回一个 数组。这个数组除了数字索引外，还有一些其余的属性。若是匹配失败，会返回 null。

• matches[n]，n为索引值。matches[0] 是与整个模式匹配的字符串。若是模式中有捕获组（圆括号括起来的），matches[1] 到 matches[len-1] 为捕获组匹配到的字符串。若是捕获组有嵌套的状况，顺序为深度优先遍历的顺序。
• input：该属性为被传入的字符串，等于 text。
• index：整个模式匹配的字符串位于传入字符串的位置，等同于 text.indexOf(matches[0])
• groups：具名组对象。ES2018 引入了 具名组匹配，支持如 /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/, 匹配成功后， matches.groups.year 的值就是 matches[1]。

若是正则表达式带上了 g 标志，每一次执行 exec() 方法，pattern（RegExp 对象） 的 lastIndex 都会变化，若是匹配成功，为匹配字符串的后一个索引位置。这个 lastIndex 指定了输入字符串的匹配起始值。刚建立的 RegExp 对象的 lastIndex 为 0，你能够对其进行修改。若是没有匹配到，lastIndex 会被设置为 0。

String.prototype.replace

replace() 方法返回一个由替换值（replacement）替换一些或全部匹配的模式（pattern）后的新字符串。

str.replace(regexp|substr, newSubStr|function)
复制代码

第一个参数能够是字符串或正则表达式，若是提供的是字符串，只会替换第一个子字符串。若是想替换全部子字符串，须要提供一个指定了 g 的正则表达式。

第二个参数能够是字符串或函数。

若是是字符串，可使用一些特殊的 字符序列：

字符序列	替换文本
$$	$（用于转义）
$&	匹配整个模式的子串，与 RegExp.lastMatch（非标准特性） 的值相等。
$`	当前匹配的子串 左边 的内容，与RepExp.leftContext（非标准属性，请勿在生产环境中使用） 的值相同。
$'	当前匹配的子串 右边 的内容，与 RegExp.rightContentx（非标准属性） 的值相同。
$n	这里 n 取值为 1 - 99。位数只有1个的话，能够加上前导零，如 $04 等同于 $4。$n 其实等价于 RegExp.prototype.exec() 返回的数组，但不一样点在于， $0 是无效的，得使用 $&。n 超出了捕获组的索引范围，会替换为 "$n"（即失去特殊转换的效果）。

下面的写法，能够交换两个单词的位置。

'bar foo'.replace( /(...) (...)/, '$2 $1' )
// -> 'foo bar'
复制代码

若是第二个参数也能够是函数，这个函数接收多个参数：

function (match[，p1, p2, ..., pn], offset, string)
复制代码

• match：匹配的子串，等同于前面提到的 $&
• p1-p2：为捕获组对应的匹配字符串（若是设置了捕获组）。
• offset：模式匹配项位于输入字符串的位置
• string：输入的原始字符串。
• 函数的返回值：返回值即为替换的文本。

咱们能够用它来实现 简单的模版引擎（只能替换文本）：

const pattern = /\{\{\s*(.*?)\s*\}\}/g,
const data = {
    name: '李田所',
    age: 24,
    job: '学生'
}
const text = `我是{{name}}，今年{{ age }}岁，是个{{ job}}。`;


const renderResult = text.replace(pattern, function(match, p1, offset, string) {
    return data[p1]
})
console.log(renderResult)
// -> 我是李田所，今年24岁，是个学生。
复制代码

参考

1. 正则表达式30分钟入门教程
2. 正则表达式 - MDN
3. Array - MDN
4. ES6入门
5. RegExp.prototype.exec() - MDN
6. String.prototype.replace() - MDN
7. 废弃和过期的JavaScript特性
8. 浅谈模板引擎