backtolife
0%

正则表达式语法一览

发表于 更新于 分类于 ， 阅读次数： Disqus： 
1
2
3
4
5
6
7
8
9
<style>
 p > a {
    color: blue;
  }
code {
   background-color: #2d2d2d;
   color: #fdfcf8;
}
</style>

前言

JavaScript中的正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法。本章介绍 JavaScript正则表达式。

创建一个正则表达式

可以使用以下两种方法之一构建一个正则表达式：

  • 使用一个正则表达式字面量，其由包含在斜杠之间的模式组成，如下所示：
    1
    2
    3
    4
    5
    6
    7
    /*
        /pattern/flags
    */

    const regex = /ab+c/;

    const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
    在加载脚本后，正则表达式字面值提供正则表达式的编译。当正则表达式保持不变时，使用此方法可获得更好的性能。
  • 或者调用 RegExp 对象的构造函数，如下所示：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*
        new RegExp(pattern[,flags])
    */
    // 下面这三种传参方式都是可以的
    let regex = new RegExp("ab+c");

    let regex = new RegExp(/^[a-zA-Z]+[0-9]*\\W?_$/,"gi");

    let regex = new RegExp("^[a-zA-Z]+[0-9]*\\W?_$", "gi");

当你知道正则表达式模式将会改变，或者你不知道模式，并从另一个来源，如用户输入的时候，就可以选择使用RegExp对象构造函数
使用构造函数提供的正则表达式将在运行时编译。

编写一个正则表达式的模式

一个正则表达式模式是由简单的字符所构成的，比如/abc/, 或者是简单和特殊字符的组合，比如 /ab*c/ 或 /Chapter (\d+)\.\d*/。后者用到了括号，它在正则表达式中可以被用作是一个 记忆设备 。这一部分正则所匹配的字符将会被记住，在后面可以被利用。正如使用 [括号的子字符串匹配] foo

使用简单的模式

简单的模式是由你找到的直接匹配所构成的。比如，/abc/这个模式就匹配了在一个字符串中，仅仅字符 'abc' 同时出现并按照这个顺序。在匹配字符串"Hi, do you know your abc's?"和 "The latest airplane designs evolved from slabcraft." 的时候，就会匹配成功。在上面的两个实例中，匹配的是子字符串 'abc'。而在字符串 "Grab crab" 中将不会被匹配，因为它不包含任何的 'abc' 子字符串。
使用特殊字符

当你需要搜索一个比直接匹配需要更多条件的匹配时，比如寻找一个或多个 ‘b’，或者寻找空格，那么这时模式将要包含特殊字符。比如， 模式/ab*c/匹配了一个单独的 ‘a’ 后面跟了零个或者多个 ‘b’（*的意思是前面一项出现了零个或者多个），且后面跟着 ‘c’ 的任何字符组合。在字符串 “cbbabbbbcdebc” 中，这个模式匹配了子字符串 “abbbbc”。

下面的表格列出了一个我们在正则表达式中可以利用的特殊字符的完整列表和描述。

表 4.1 正则表达式中的特殊字符

表 4.1 正则表达式中的特殊字符

将用户输入转义为正则表达式中的一个字面字符串, 可以通过简单的替换来实现：

1
2
3
4
function escapeRegExp(string){
    return string.replace(/([.*+?^=!:${}()|[\]\/\\])/g, "\\$&");
    //$&表示整个被匹配的字符串
}

使用插入语

任何正则表达式的插入语都会使这部分匹配的副字符串被记忆。一旦被记忆，这个副字符串就可以被调用于其它用途，如同 使用括号的子字符串匹配之中所述。

比如， /Chapter (\d+)\.\d*/ 解释了额外转义的和特殊的字符，并说明了这部分pattern应该被记忆。它精确地匹配后面跟着一个以上数字字符的字符 'Chapter ' (\d 意为任何数字字符，+ 意为1次以上)，跟着一个小数点（在这个字符中本身也是一个特殊字符；小数点前的 \ 意味着这个pattern必须寻找字面字符 ‘.’)，跟着任何数字字符0次以上。 (\d 意为数字字符， * 意为0次以上)。另外，插入语也用来记忆第一个匹配的数字字符。

此模式可以匹配字符串"Open Chapter 4.3, paragraph 6"，并且'4'将会被记住。此模式并不能匹配"Chapter 3 and 4"，因为在这个字符串中'3'的后面没有点号'.'。

括号中的"?:"，这种模式匹配的子字符串将不会被记住。比如，(?:\d+)匹配一次或多次数字字符，但是不能记住匹配的字符

使用正则表达式

正则表达式可以被用于RegExp的exec和test方法以及 String的match、replace、search和split方法。这些方法在JavaScript 手册中有详细的解释。

表 4.2 使用正则表达式的方法

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

当你想要知道在一个字符串中的一个匹配是否被找到，你可以使用test或search方法；想得到更多的信息（但是比较慢）则可以使用exec或match方法。如果你使用exec或match方法并且匹配成功了，那么这些方法将返回一个数组并且更新相关的正则表达式对象的属性和预定义的正则表达式对象（详见下）。如果匹配失败，那么exec方法返回null（也就是false）。

在接下来的例子中，脚本将使用exec方法在一个字符串中查找一个匹配

1
2
var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");

如果你不需要访问正则表达式的属性，这个脚本通过另一个方法来创建myArray：

1
var myArray = /d(b+)d/g.exec("cdbbdbsbz");

如果你想通过一个字符串构建正则表达式，那么这个脚本还有另一种方法：

1
2
var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");

通过这些脚本，匹配成功后将返回一个数组并且更新正则表达式的属性，如下表所示。

表 4.3 正则表达式执行返回信息

对象 属性或索引 描述 在例子中对应的值
myArray 匹配到的字符串和所有被记住的子字符串。 ["dbbd", "bb"]
index 在输入的字符串中匹配到的以0开始的索引值。 ``1`
input 初始字符串。 "cdbbdbsbz"
[0] 匹配到的所有字符串（并不是匹配后记住的字符串）。注：原文”The last matched characters.”，应该是原版错误。匹配到的最后一个字符索引。 "dbbd"
myRe lastIndex 下一个匹配的索引值。（这个属性只有在使用g参数时可用在 通过参数进行高级搜索 一节有详细的描述.) 5
source 模式文本。在正则表达式创建时更新，不执行。 "d(b+)d"

在这个例子中如第二种形式所示，你可以使用一个正则表达式创建一个没有分配给变量的对象初始化容器。如果你这样做，那么，每一次使用时都好比在使用一个新的正则表达式。因为这个原因，如果你使用这个未分配给一个变量的正则表达式，你将在随后不能访问这个正则表达式的属性。例如，假如你有如下脚本：

1
2
3
var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + myRe.lastIndex);

这个脚本输出如下：

The value of lastIndex is 5

然而，如果你有如下脚本：

1
2
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);

它显示为：

The value of lastIndex is 0

当发生/d(b+)d/g使用两个不同状态的正则表达式对象，lastIndex属性会得到不同的值。如果你需要访问一个正则表达式的属性，则需要创建一个对象初始化生成器，你应该首先把它赋值给一个变量。
使用括号的子字符串匹配

一个正则表达式模式使用括号，将导致相应的子匹配被记住。例如，/a(b)c /可以匹配字符串“abc”，并且记得“b”。回调这些括号中匹配的子串，使用数组元素[1],……[n]。

使用括号匹配的子字符串的数量是无限的。返回的数组中保存所有被发现的子匹配。下面的例子说明了如何使用括号的子字符串匹配。

下面的脚本使用replace()方法来转换字符串中的单词。在匹配到的替换文本中，脚本使用替代的$ 1,$ 2表示第一个和第二个括号的子字符串匹配。

1
2
3
4
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);

这个表达式输出 "Smith, John"。

通过标志进行高级搜索

正则表达式有四个可选参数进行全局和不分大小写搜索。这些参数既可以单独使用也可以一起使用在任何顺序和包含正则表达式的部分中。

正则表达式标志

标志 描述
g 全局搜索。
i 不区分大小写搜索。
m 多行搜索。
y 执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。

包含一个标志的正则表达式，使用这个表达式：

1
var re = /pattern/flags;

或者

1
var re = new RegExp("pattern", "flags");

值得注意的是，标志是一个正则表达式的一部分，它们在接下来的时间将不能添加或删除。

例如，re = /\w+\s/g 将创建一个查找一个或多个字符后有一个空格的正则表达式，或者组合起来像此要求的字符串。

1
2
3
4
var re = /\w+\s/g;
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

这段代码将输出 ["fee ", "fi ", "fo "]。在这个例子中，你可以将：

var re = /\w+\s/g;

替换成：

var re = new RegExp("\\w+\\s", "g");

并且能获取到相同的结果。

m标志用于指定多行输入字符串应该被视为多个行。如果使用m标志，^和$匹配的开始或结束输入字符串中的每一行，而不是整个字符串的开始或结束。
例子
Edit

以下例子说明了一些正值表达式的用途。

改变输入字符串的顺序

以下例子解释了正值表达式的构成和string.split() 以及 string.replace()的用途。它会整理一个只有粗略格式的含有全名（名字首先出现）的输入字符串，这个字符串被空格、换行符和一个分号分隔。最终，它会颠倒名字顺序（姓氏首先出现）和list的类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// The name string contains multiple spaces and tabs,
// and may have multiple spaces between first and last names.
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Original String\n", names + "\n"];

// Prepare two regular expression patterns and array storage.
// Split the string into array elements.

// pattern: possible white space then semicolon then possible white space
var pattern = /\s*;\s*/;

// Break the string into pieces separated by the pattern above and
// store the pieces in an array called nameList
var nameList = names.split(pattern);

// new pattern: one or more characters then spaces then characters.
// Use parentheses to "memorize" portions of the pattern.
// The memorized portions are referred to later.
pattern = /(\w+)\s+(\w+)/;

// New array for holding names being processed.
var bySurnameList = [];

// Display the name array and populate the new array
// with comma-separated names, last first.
//
// The replace method removes anything matching the pattern
// and replaces it with the memorized string—second memorized portion
// followed by comma space followed by first memorized portion.
//
// The variables $1 and $2 refer to the portions
// memorized while matching the pattern.

output.push("---------- After Split by Regular Expression");

var i, len;
for (i = 0, len = nameList.length; i < len; i++){
  output.push(nameList[i]);
  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}

// Display the new array.
output.push("---------- Names Reversed");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

// Sort by last name, then display the sorted array.
bySurnameList.sort();
output.push("---------- Sorted");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

output.push("---------- End");

console.log(output.join("\n"));

用特殊字符检验输入

在以下例子中，我们期望用户输入一个电话号码。当用户点击“Check”按钮，我们的脚本开始检查这些数字是否合法。如果数字合法（匹配正值表达式所规定的字符序列），脚本显示一条感谢用户的信息并确认该数字。如果这串数字不合法，脚本提示用户电话号码不合法。.

包含非捕获括号 (?: 这个正值表达式寻找三个数字字符\d{3} 或者 | 一个左半括号(跟着三位数字\d{3}, 跟着一个封闭括号 ), (结束非捕获括号 ))， 后跟着一个短破折号或左斜杠或小数点，随后跟随三个数字字符，当记忆字符 ([-/.])捕获并记住，后面跟着三位小数 \d{3}，再后面跟随记住的左斜杠、右斜杠或小数点 \1，最后跟着四位小数 \d{4}。

当用户按下Enter设置RegExp.input，这些变化也能被激活。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
      function testInfo(phoneInput) {
        var OK = re.exec(phoneInput.value);
        if (!OK)
          window.alert(phoneInput.value + ' isn\'t a phone number with area code!');
        else
          window.alert('Thanks, your phone number is ' + OK[0]);
      }
    </script>
  </head>
  <body>
    <p>Enter your phone number (with area code) and then click "Check".
        <br>The expected format is like ###-###-####.</p>
    <form action="#">
      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
    </form>
  </body>
</html>

Todo