​​

对正则表达式，我们并不陌生。在很多地方都会用到，尤其是字符串处理，正则表达式更是一把利器。本文通过一个例子来学习总结一下正则表达式的一些知识内容 ?


问题引入

​​index.html​​ 页面中，有如下一段代码：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React SharedPen App</title>
<script src="./pace/pace.min.js"></script>
<link rel="stylesheet" href="./pace/pace-theme-minimal.css">
<!-- SharedPen scripts -->
<!-- js:./dist/sharedpen.min.js -->
<script src="http://localhost:5000/Utils.js"></script>
...
<script src="http://localhost:5000/SharedPen.js"></script>
<!-- end -->
<!-- SharedPen stylesheet -->
<!-- css:./dist/SharedPen.css -->
<link rel="stylesheet" href="http://localhost:5000/SharedPen.css">
<!-- end -->
</head>


注意这两段注释标签

1
2
3
4
5
6
7


<!-- js:./dist/sharedpen.min.js -->
...
<!-- end -->
<!-- css:./dist/SharedPen.css -->
...
<!-- end -->


在页面在开发环境中，加载的是本地源文件，在生产环境中，我希望将其替换成压缩文件：​​./dist/sharedpen.min.js​​​ 和 ​​./dist/SharedPen.css​​。
解决思路是：使用 webpack 插件 ​​html-replace-webpack-plugin​​ 配置正则表达式，然后进行替换。最终的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
const tpl = {
css: '<link rel="stylesheet" type="text/css" href="%s">',
js: '<script type="text/javascript" src="%s"></script>'
}
module.exports = {
// Definition for Webpack plugins
plugin: [
// Replace html contents with string or regex patterns
new HtmlReplaceWebpackPlugin([{
pattern: /(<!--\s*)(css|js):([\w-\/\.]+)(\s*-->)([\s\S]*?)(<!--\s*end\s*-->)/,
replacement: function (match, $1, type, file) {
switch (type) {
case 'css':
case 'js':
return tpl[type].replace('%s', file)
default:
return ''
}
}
}])
]
}


其中关键就是写出正则表达式，匹配出那两段注释代码。正则语法可以参考文末附录二，为了方便测试，我们可以在 ​​https://regex101.com/​​ 这个网站上编写正则表达式。
撰写正则表达式

1
2
3
4
5
6
7


<!-- js:./dist/sharedpen.min.js -->
...
<!-- end -->
<!-- css:./dist/SharedPen.css -->
...
<!-- end -->

分成三部分处理
观察这两段注释，每一段可以分成三部分，根据正则语法，可以写出如下三部分的正则表达式：
  • 起始部分 匹配 ​​<!-- js:./dist/sharedpen.min.js -->​​


    • 1


    <!--\s*(css|js):[\w\-\/\.]+\s*-->


  • 中间内容部分


    • 1


    [\s\S]*


  • 结束部分 匹配 ​​<!-- end -->​​


    • 1


    <!--\s*end\s*-->


子表达式
在第一部分 ​​<!-- js:./dist/sharedpen.min.js -->​​，我们还需要正则表达式能匹配出：文件类型和文件路径

注意到
 1、​​(pattern)​​ 匹配 pattern 并捕获该匹配的子表达式。可以使用 $1…$9 属性从结果“匹配”集合中检索捕获的匹配。
 2、在 JavaScript 中 ​​$1…$9​​ 属性是包含括号子串匹配的正则表达式的静态只读属性，我们可以通过 ​​RegExp.$1, ..., RegExp.$9​​ 来使用它们

通过括号写出子表达式，匹配出我们需要的内容

1


<!--\s*(css|js):([\w\-\/\.]+)\s*-->



1
2
3
4
5


var regexp = new RegExp(/<!--\s*(css|js):([\w\-\/\.]+)\s*-->/)
var str = '<!-- js:./dist/sharedpen.min.js -->'
regexp.exec(str)
console.log(RegExp.$1) // "js"
console.log(RegExp.$2) // "./dist/sharedpen.min.js"

最长匹配（贪婪匹配）和最短匹配（懒惰匹配）
到目前为止，我们的正则表达式为：​​<!--\s*(css|js):([\w\-\/\.]+)\s*-->[\s\S]*<!--\s*end\s*-->​​，但是会发现，此时匹配有点问题：
​​
我们是希望遇到第一个 ​​<!-- end -->​​ 就结束匹配，而现在却是匹配到最后一个。这个时候就需要了解正则表达式的最长匹配（贪婪匹配）和最短匹配（懒惰匹配）
 例子一：

1
2
3
4
5
6
7


var str = 'abc123def'
var regexp1 = new RegExp(/abc[\d]*/) // 最长匹配
var regexp2 = new RegExp(/abc[\d]*?/) // 最短匹配
console.log(regexp1.exec(str)[0]) // "abc123"
console.log(regexp2.exec(str)[0]) // "abc"


例子二：

1
2
3
4


var str = '/*** 注释1 ****/ var name = "aty"; /***注释2****/'
var regexp = new RegExp(/\/\*([\s\S]*?)\*\//)
console.log(regexp.exec(str)[0]) // 使用 `*?` 就可以正确的匹配到注释内容


我们会发现，最长和最短匹配的差别是，前者匹配尽可能多的字符，后者匹配尽可能少的字符。一般正则表达式引擎默认都是最长匹配，如果想要最短匹配，那么需要在数量修饰符(例如：​​*​​，​​+​​)后面添加一个 ​​?​​ 变成最短匹配
所以此时执行对我们的正则表达式增加一个 ​​?​​ 即可

1


<!--\s*(css|js):([\w\-\/\.]+)\s*-->[\s\S]*?<!--\s*end\s*-->


全局匹配
JavaScript 中使用正则表达式有两种方式：

1
2
3
4
5


# 直接量语法
/pattern/attributes
# 创建 RegExp 对象的语法
new RegExp(pattern, attributes);


参数:
  • pattern 是一个字符串，指定了正则表达式
  • attributes 是一个可选的字符串，包含属性:“g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。
其中 ​​g​​ 指定正则表达式全局匹配，那么有什么特殊之处呢？

1
2
3
4
5
6


var str = 'abc123def'
var regexp = new RegExp(/abc[\d]*/, 'g')
console.log(regexp.test(str)) // true
console.log(regexp.test(str)) // false
console.log(regexp.test(str)) // true


其中第二次 console 输出为啥是 ​​false​​ 呢？
  • 在全局匹配模式下可以对指定要查找的字符串执行多次匹配。
  • 每次匹配使用当前正则对象的​​lastIndex​​ 属性的值作为在目标字符串中开始查找的起始位置。
  • ​​lastIndex​​​ 属性的初始值为 0，找到匹配的项后，​​lastIndex​​ 的值被重置为匹配内容的下一个字符在字符串中的位置索引，用来标识下次执行匹配时开始查找的位置。
  • 如果找不到匹配的项，​​lastIndex​​ 的值会被设置为 0。
  • 没有设置正则对象的全局匹配标志时​​lastIndex​​ 属性的值始终为0，每次执行匹配仅查找字符串中第一个匹配的项。
如果我们每次执行 ​​regexp.test(str)​​ 方法后，查看一下正则对象的 lastIndex 属性的值，就清楚了。

1
2
3
4
5
6
7
8
9
10
11


var str = 'abc123def'
var regexp = new RegExp(/abc[\d]*/, 'g')
console.log(regexp.test(str)) // true
console.log(regexp.lastIndex) // 6
console.log(regexp.test(str)) // false
console.log(regexp.lastIndex) // 0
console.log(regexp.test(str)) // true
console.log(regexp.lastIndex) // 6


第一次执行 ​​regexp.test(str)​​ 前，正则对象的 ​​lastIndex​​ 属性值为 0，匹配到字符 ​​abc123​​后，正则对象的 ​​lastIndex​​ 属性值变成 6；
 在第二次执行 ​​regexp.test(str)​​ 时，从第 7 个字符(从0开始)开始进行匹配，当然就匹配失败啦。
下面再来看看正则对象的另一个方法 ​​exec​​ 在全局模式下的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14


var str = `
<!-- js:./dist/sharedpen.min.js -->
...
<!-- end -->
<!-- css:./dist/SharedPen.css -->
...
<!-- end -->`
var regexp = new RegExp(/<!--\s*(css|js):([\w\-\/\.]+)\s*-->[\s\S]*?<!--\s*end\s*-->/g)
var matches
while((matches = regexp.exec(str)) != null) {
str = str.replace(matches[0], '<div>test</div>')
}
console.log(str)


我们希望代码执行匹配替换后，输出结果是：

1
2


<div>test</div>
<div>test</div>


但是实际上输出结果是：

1
2
3
4


<div>test</div>
<!-- css:./dist/SharedPen.css -->
...
<!-- end -->


显然是第二次匹配替换出问题了。有了前面的经验，我们很快就知道，是全局模式匹配的问题，第一次全局匹配后，正则对象的 ​​lastIndex​​​ 属性值发生变化，影响了第二次正则匹配，我们只需去掉全局匹配 ​​g​​ 即可解决问题。
? 至此，我们终于可以得到如下的正则表达式：

1


/(<!--\s*)(css|js):([\w-\/\.]+)(\s*-->)([\s\S]*?)(<!--\s*end\s*-->)/


[附录一] 常用方法
RegExp 对象方法：​​test​​​, ​​exec​​
用法
说明
返回值
​​RegExpObj.test(string)​​
用于检测一个字符串是否匹配某个模式
匹配返回 true，否则返回 false
​​RegExpObj.exec(string)​​
用于检索字符串中的正则表达式的匹配
返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
String 对象方法：​​match​​​, ​​replace​​
用法
说明
返回值
​​stringObj.match( regexp/substr )​​
在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
​​stringObj.replace( regexp/substr, replacement )​​
根据 regexp/substr 进行正则匹配,把匹配结果替换为 replacement
一个新的字符串
[附录二] 正则表达式语法
学习正则表达式，首先要了解其语法规则，以下规则来自：MSDN 正则表达式语法:​​https://msdn.microsoft.com/zh-cn/library/ae5bf541(v=vs.90).aspx​​
字符
说明
​​\​​
将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如，“n” 匹配字符 “n”。“\n” 匹配换行符。序列 “\” 匹配 “\”，“(” 匹配 “(”。
​​^​​
匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与 “\n” 或 “\r” 之后的位置匹配。
​​$​​
匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性，$ 还会与 “\n” 或 “\r” 之前的位置匹配。
​​*​​
零次或多次匹配前面的字符或子表达式。例如，zo 匹配 “z” 和 “zoo”。 等效于 {0,}。
​​+​​
一次或多次匹配前面的字符或子表达式。例如，“zo+” 与 “zo” 和 “zoo” 匹配，但与 “z” 不匹配。+ 等效于 {1,}。
​​?​​
零次或一次匹配前面的字符或子表达式。例如，“do(es)?” 匹配 “do” 或 “does” 中的 “do”。? 等效于 {0,1}。
​​{n}​​
n 是非负整数。正好匹配 n 次。例如，“o{2}” 与 “Bob” 中的 “o” 不匹配，但与 “food” 中的两个“o”匹配。
​​{n,}​​
n 是非负整数。至少匹配 n 次。例如，“o{2,}” 不匹配 “Bob” 中的 “o”，而匹配 “foooood” 中的所有 o。“o{1,}” 等效于 “o+”。“o{0,}” 等效于 “o*”。
​​{n,m}​​
m 和 n 是非负整数，其中 n <= m。匹配至少 n 次，至多 m 次。例如，“o{1,3}” 匹配 “fooooood” 中的头三个 o。’o{0,1}’ 等效于 ‘o?’。注意：您不能将空格插入逗号和数字之间。
​​?​​
当此字符紧随任何其他限定符（*、+、?、{n}、{n,}、{n,m}）之后时，匹配模式是“非贪心的”。“非贪心的”模式匹配搜索到的、尽可能短的字符串，而默认的“贪心的”模式匹配搜索到的、尽可能长的字符串。例如，在字符串 “oooo” 中，“o+?” 只匹配单个 “o”，而 “o+” 匹配所有 “o”。
​​.​​
匹配除“\n”之外的任何单个字符。若要匹配包括 “\n” 在内的任意字符，请使用诸如 “[\s\S]” 之类的模式。
​​(pattern)​​
匹配 pattern 并捕获该匹配的子表达式。可以使用 $1…$9 属性从结果“匹配”集合中检索捕获的匹配。若要匹配括号字符 ( )，请使用“(”或者“)”。
​​(?:pattern)​​
匹配 pattern 但不捕获该匹配的子表达式，即它是一个非捕获匹配，不存储供以后使用的匹配。这对于用 “or” 字符 ​​(│)​​​ 组合模式部件的情况很有用。例如，​​industr(?:y│ies)​​​ 是比 ​​industry│industries​​ 更经济的表达式。
​​(?=pattern)​​
执行正向预测先行搜索的子表达式，该表达式匹配处于匹配 pattern 的字符串的起始点的字符串。它是一个非捕获匹配，即不能捕获供以后使用的匹配。例如，’Windows (?=95│98│NT│2000)’ 匹配“Windows 2000”中的“Windows”，但不匹配“Windows 3.1”中的“Windows”。预测先行不占用字符，即发生匹配后，下一匹配的搜索紧随上一匹配之后，而不是在组成预测先行的字符后。
​​(?!pattern)​​
执行反向预测先行搜索的子表达式，该表达式匹配不处于匹配 pattern 的字符串的起始点的搜索字符串。它是一个非捕获匹配，即不能捕获供以后使用的匹配。例如，’Windows (?!95│98│NT│2000)’ 匹配“Windows 3.1”中的 “Windows”，但不匹配“Windows 2000”中的“Windows”。预测先行不占用字符，即发生匹配后，下一匹配的搜索紧随上一匹配之后，而不是在组成预测先行的字符后。
​​x│y​​
匹配 x 或 y。例如，’z│food’ 匹配“z”或“food”。’(z│f)ood’ 匹配“zood”或“food”。
​​[xyz]​​
字符集。匹配包含的任一字符。例如，“[abc]”匹配“plain”中的“a”。
​​[^xyz]​​
反向字符集。匹配未包含的任何字符。例如，“[^abc]”匹配“plain”中的“p”。
​​[a-z]​​
字符范围。匹配指定范围内的任何字符。例如，“[a-z]”匹配“a”到“z”范围内的任何小写字母。
​​[^a-z]​​
反向范围字符。匹配不在指定的范围内的任何字符。例如，“[^a-z]”匹配任何不在“a”到“z”范围内的任何字符。
​​\b​​
匹配一个字边界，即字与空格间的位置。例如，“er\b”匹配“never”中的“er”，但不匹配“verb”中的“er”。
​​\B​​
非字边界匹配。“er\B”匹配“verb”中的“er”，但不匹配“never”中的“er”。
​​\cx​​
匹配 x 指示的控制字符。例如，\cM 匹配 Control-M 或回车符。x 的值必须在 A-Z 或 a-z 之间。如果不是这样，则假定 c 就是“c”字符本身。
​​\d​​
数字字符匹配。等效于 [0-9]。
​​\D​​
非数字字符匹配。等效于 [^0-9]。
​​\f​​
换页符匹配。等效于 \x0c 和 \cL。
​​\n​​
换行符匹配。等效于 \x0a 和 \cJ。
​​\r​​
匹配一个回车符。等效于 \x0d 和 \cM。
​​\s​​
匹配任何空白字符，包括空格、制表符、换页符等。与 [ \f\n\r\t\v] 等效。
​​\S​​
匹配任何非空白字符。与 [^ \f\n\r\t\v] 等效。
​​\t​​
制表符匹配。与 \x09 和 \cI 等效。
​​\v​​
垂直制表符匹配。与 \x0b 和 \cK 等效。
​​\w​​
匹配任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
​​\W​​
与任何非单词字符匹配。与“[^A-Za-z0-9_]”等效。
​​\xn​​
匹配 n，此处的 n 是一个十六进制转义码。十六进制转义码必须正好是两位数长。例如，“\x41”匹配“A”。“\x041”与“\x04”&“1”等效。允许在正则表达式中使用 ASCII 代码。
​​\num​​
匹配 num，此处的 num 是一个正整数。到捕获匹配的反向引用。例如，“(.)\1”匹配两个连续的相同字符。
​​\n​​
标识一个八进制转义码或反向引用。如果 \n 前面至少有 n 个捕获子表达式，那么 n 是反向引用。否则，如果 n 是八进制数 (0-7)，那么 n 是八进制转义码。
​​\nm​​
标识一个八进制转义码或反向引用。如果 \nm 前面至少有 nm 个捕获子表达式，那么 nm 是反向引用。如果 \nm 前面至少有 n 个捕获，则 n 是反向引用，后面跟有字符 m。如果两种前面的情况都不存在，则 \nm 匹配八进制值 nm，其中 n 和 m 是八进制数字 (0-7)。
​​\nml​​
当 n 是八进制数 (0-3)，m 和 l 是八进制数 (0-7) 时，匹配八进制转义码 nml。
​​\un​​
匹配 n，其中 n 是以四位十六进制数表示的 Unicode 字符。例如，\u00A9 匹配版权符号 (©)。
正则表达式从左往右进行计算，运算符的优先级顺序如下：
运算符
说明
​​\​​
转义符
​​(), (?:), (?=), []​​
括号和中括号
​​*, +, ?, {n}, {n,}, {n,m}​​
限定符
​​^, $, \ 任何元字符、任何字符​​
定位点和序列
│
替换
参考链接
JavaScript RegExp 对象
JS 进阶 test, exec, match, replace
正则匹配在线网站