正则表达式

JavaScript学习 本文总阅读量次

万事熟能生巧

好用的工具推荐 和 常用正则表达式

JS中生成RegExp对象的两种方法

  • 一般没有变量的情况使用字面量形式定义正则性能更好，语法也更简单
  • 需要加变量时可使用RegExp对象的构造函数，将变量和字符串拼接或放于模板字符串中，但要格外注意js字符串中转义符\的处理
  • 修饰符包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

正则表达式字面量

  • 脚本加载后，正则表达式字面量就会被编译。当正则表达式保持不变时，使用此方法可获得更好的性能
  • 规则用//包裹起来，修饰符跟在后面：
1
2
3
4
const regexp1 = /规则/修饰符;

//^表示开头，g表示全局匹配。即：开头为a的字符串就满足这个正则表达式
const regexp1 = /^a/g;

RegExp对象的构造函数

  • 规则和修饰符都用引号包裹起来：
    • 需要用变量构造正则时就需要用这种方式
    • 构造函数中如果使用模板字符串来拼接变量，则需要特别注意转义符\的处理
1
2
3
4
5
6
7
8
9
// 方式1
const regexp = new RegExp('规则','修饰符');

const regexp2 = new RegExp('^a','g');  // 注意和字面量的区别，此时没有前后//这两斜杠了

// 方式2
const regexp = new RegExp(/规则/修饰符); 

const regexp4 = new RegExp(/^a/g); // 或者这样写，注意此时不是字符串

注意js字符串处理转义符\

  • 使用正则表达式字面量/在这里定义/方式定义正则时不需要注意转义符(反斜杠\)，但是使用RegExp构造函数时，RegExp里字符串和模板字符串要注意额外处理转义符：
    1
    2
    3
    4
    /^\d+(\.0+)?$/.test(1)
    // 用new RegExp时时要注意额外处理转义符
    const pattern = new RegExp('\\d+(\\.0+)?$') // `^\\d+(\\.0+)?$`模板字符串也是
    pattern.test(1)
  • 反斜杠\含义：在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。
    • 例如，前面没有 “" 的 “b” 通常匹配小写字母 “b”，即字符会被作为字面理解，无论它出现在哪里。但如果前面加了 “"，它将不再匹配任何字符，而是表示一个字符边界
  • 而在 JavaScript 的字符串中，反斜杠\被用作转义字符。正则表达式中也有许多特殊字符和元字符，例如 \d、\. 和 \。如果希望在正则表达式中使用这些特殊字符，需要对其进行适当的转义，以确保它们被解释为正确的含义。
  • 在模板字符串中，反斜杠\同样是一个转义字符，它用于转义特殊字符和元字符。由于模板字符串也具有转义功能，因此在编写正则表达式时，需要使用双重反斜杠 \\ 对特殊字符进行转义，以确保它们在生成的字符串中正确表示。
    1
    2
    3
    4
    比如：
    \d：在正则表达式中，\d 是一个特殊字符，用于匹配数字。为了将其作为字面量的 \d 字符进行匹配，需要使用 \\d 进行转义。
    \\：反斜杠自身也是一个特殊字符，用于转义其他字符。在模板字符串中，为了生成一个 \ 字符，需要使用双重反斜杠 \\\\ 进行转义。因为在模板字符串中，单个反斜杠会被视为转义字符，所以我们需要使用两个反斜杠来生成一个字面上的反斜杠字符。
    \.0+：. 在正则表达式中是一个特殊字符，匹配任意字符（除了换行符）。如果您想匹配一个字面上的点号，需要使用 \\. 进行转义。另外，0+ 表示匹配一个或多个0。

正则方法

match() exec()
字符串的正则方法，使用字符串对象进行调用 正则对象的方法，使用RegExp对象进行调用
返回的是匹配完成后完整的数组 每调用一次返回单次对应的匹配结果并用数组的方式显示
  • 区分match()和exec()的例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const r1 = /imooc/g;

    const str = "imoocimooc_imooc";

    console.log(r1.exec(str));//["imooc", index: 0, input: "imoocimooc_imooc", groups: undefined]
    console.log(r1.exec(str));//["imooc", index: 5, input: "imoocimooc_imooc", groups: undefined]
    console.log(r1.exec(str));//["imooc", index: 11, input: "imoocimooc_imooc", groups: undefined]
    console.log(r1.exec(str));//null

    console.log(str.match(r1));//["imooc", "imooc", "imooc"]

match() 方法

  • match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
  • 该方法类似 indexOf() 和 lastIndexOf()，但是它**返回指定的值(数组)**，而不是字符串的位置。
  • 返回值:存放匹配结果的数组。
  • 语法：
    1
    2
    stringObject.match(searchvalue)
    stringObject.match(regexp)
参数 描述
searchvalue 必需。规定要检索的字符串值。
regexp 必需。规定要匹配的模式的 RegExp 对象。
如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。
  • 例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //^表示开头，g表示全局匹配。即：开头为"你"的字符串就满足这个正则表达式
    const regexp1 = /^你/g;
    console.log("你好呀你好呀你好呀".match(regexp1)); //["你"]

    const regexp2 = new RegExp("^你好", "g"); //不要漏掉g的引号
    console.log("你好呀你好呀你好呀".match(regexp2));//["你好"]

    const regexp3 = new RegExp(/^我/g);
    console.log("你好呀你好呀你好呀".match(regexp3));//null，不符合规则

    const regexp4 = /你/g; //去掉^
    console.log("你好呀你好呀你好呀".match(regexp4));//["你", "你", "你"]

    const regexp5 = /你/; //去掉g,不再全局搜索
    console.log("你好呀你好呀你好呀".match(regexp5));//["你"]

exec()方法

  • exec() 方法用于使用正则表达式，检索字符串中的正则表达式的匹配。
  • 语法：RegExpObject.exec(要检索的字符串)
  • 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
  • 与match()类似，他们都是返回匹配结果的数组，但match()是字符串的正则方法（是使用字符串对象进行调用），exec()是正则对象的方法（使用RegExp对象进行调用）。
  • 例子：在下面y粘连修饰符的例子中使用。

test()方法

  • test()方法用于检测一个字符串是否匹配某个模式.
  • 返回值：布尔型。如果字符串中有匹配的值返回 true ，否则返回 false。
  • 注意：和match()类似，不过他返回的是布尔值而不是匹配值构成的数组。
  • 语法：RegExp对象.test(要检测的字符串)
  • 例子：在下面u修饰符的例子中使用。

正则表达式构造函数RegExp的变化

不管有多少个“原来的修饰符”，都会被“新增的修饰符”覆盖，注意：新增的修饰符需要引号

1
const regexp = new RegExp(/规则/原来的修饰符,"新增的修饰符");

例子：

1
const regexp = new RegExp(/^你/igm,"i");//最后生效的是i

定位符

  • ^ 匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与 \n 或 \r 之后的位置匹配。
  • $ 匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性，$ 还会与 \n 或 \r 之前的位置匹配。

^用于定位/否定

  • 用于定位：/^[0-9]/g表示全局匹配一个0-9开头的
  • 用于表示否定：这个字符出现在一个字符集合模式的第一个字符时，他用于表示否定。/[^0-9]/ig表示表示全局匹配所有非数字字符（不区分大小写）

元字符

  • [a-z]
    字符范围。匹配指定范围内的任意一个字符。例如，’[a-z]’ 可以匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符。
  • \d
    匹配一个数字字符。等价于 [0-9]。
  • x|y
    匹配 x 或 y。例如，’z|food’ 能匹配 “z” 或 “food”。’(z|f)ood’ 则匹配 “zood” 或 “food”。
  • [xyz]
    字符集合。匹配所包含的任意一个字符。例如， ‘[abc]’ 可以匹配 “plain” 中的 ‘a’。
  • \w
    匹配字母、数字或者下划线,等价于 [A-Za-z0-9_]
  • /g
    全局匹配

非打印字符

  • 非打印字符也可以是正则表达式的组成部分。
  • \s
    匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。

特殊字符

  • \
    将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， n匹配字符 n。\n匹配换行符。序列 \\匹配 \，而 \(则匹配 (。

限定符

  • +
    匹配前面一个表达式 1 次或者多次,要匹配 + 字符，请使用 \+。
    • 匹配前一个表达式 0 次或多次，要匹配 * 字符，请使用 \*。
  • ？
    问号代表前面的字符最多只可以出现一次（0次或1次）
    【例子：colou?r 可以匹配 color 或者 colour】
    或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。
  • |
    指明两项之间的一个选择。要匹配 |，请使用 \|。
    （^\s+|\s+$表示：匹配以一个或多个空格开始（^\s+），或者(|)以一个或多个空格结束(\s+$)的字符串。）
  • {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?。请注意在逗号和两个数之间不能有空格。

关于+和*可以看下面“match相关题目1”理解其用法。

运算符优先级

相同优先级的从左到右进行运算，不同优先级的运算先高后低。下表从最高到最低说明了各种正则表达式运算符的优先级顺序：
运算符优先级（从高到低）

相关题目

身份证相关题目

  • 15位身份证（第一代）
    • 15位号码各位的含义
      1. 1-2位省、自治区、直辖市代码；
      2. 3-4位地级市、盟、自治州代码；
      3. 5-6位县、县级市、区代码；
      4. 7-12位出生年月日,比如670401代表1967年4月1日（这是与18位的第一个区别）；
      5. 13-15位为顺序号，其中15位男为单数，女为双数；
    • 举例介绍
      • 130503 670401 001的含义:13为河北，05为邢台，03为桥西区，出生日期为1967年4月1日，顺序号为001。
    • 正则表达式面试题解释
  • 18位身份证（第二代）
    • 要注意最后一位！解释

match相关题目1

题目
解释
正则方法match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，返回指定的值(数组)。(更多相关知识可查阅“ES6扩展 正则扩展”中的“match() 方法”)
因为+和*都是贪婪匹配，它们会尽可能多地匹配字符，
所以**\d+匹配”75”，\w*匹配”team2017”，而/g就没有表演的机会了。
最后选C。
关于&quot:属于html中的特殊字符的转义**，选项中为双引号。

match相关题目2

题目
需要明确：

  1. 关于//的含义请到笔记顶部看“JS中生成RegExp对象的两种方法”的“方法1”
  2. 正则表达式里：
  • 出现0次或多次. [0,+∞]
  • 出现1次或多次 [1,+∞]
  1. g是全局匹配
  2. /b+/ 也就是b出现1次或多次，/b*/ 是b出现0次或多次，/b{1,4}/ 是b至少出现1次，至多出现4次，/b{1,5}/ 是b至少出现1次，至多出现5次。

匹配整数的题目

题目
A正负整数，B正整数，C负整数，D正整数或者0

需要知道的
？问号代表前面的字符最多只可以出现一次

  • 匹配前面的子表达式零次或多次
    [a-z]字符范围。匹配指定范围内的任意一个字符.
    \d 匹配一个数字字符。等价于 [0-9]。

各选项解析
A.
(-?[1-9]\d*)|0 -号出现0次或1次，然后匹配一个1-9之间的数字字符0次或多次。或者匹配0。即 整数或者0。
B.
[1-9]\d* 匹配一个1-9之间的数字字符0次或多次，即 正整数。
C.
-[1-9]\d* 匹配一个-（1-9）之间的数字字符0次或多次，即 负整数。
D.
[1-9]\d*|0 匹配一个1-9之间的数字字符0次或多次，或者匹配0，即 正整数或者0。

删除字符串头尾空格

如果你的浏览器不支持 trim() 方法，你可以使用正则表达式来实现:

1
2
3
4
5
6
7
8
function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}
 
function myFunction() {
  var str = myTrim("        Runoob        ");
  alert(str);
}

(完整例子)

  • 生成正则表达式对象：const regexp1=/规则/修饰符;
  • 修饰符：g表示全局匹配，m表示多行匹配。
  • 规则：
    • 定位符：^ 输入字符串开始的位置，$ 输入字符串结尾的位置。
    • \s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
    • |指明两项之间的一个选择。要匹配 |，请使用 \|。
    • +匹配前面的子表达式一次或多次。例如，zo+ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。

总结：也就是说，如果x以一个或多个空格开始，替换全部空格为空（^\s+）；或者(|)，如果x以一个或多个空格结束(\s+$)，替换全部空格为空。

特别注意|的用法和思路！！
^\s+|\s+$表示：匹配以一个或多个空格开始（^\s+），或者(|)以一个或多个空格结束(\s+$)的字符串。

更多可参考廖雪峰的相关解释
正则表达式 - 元字符 参考
正则表达式 - 语法参考

JavaScript学习