JavaScript的正则表达式

已于 2023-12-22 01:36:34 修改
阅读量856 收藏 17
点赞数 12
分类专栏： 前端 文章标签： javascript 正则表达式 开发语言
于 2023-12-21 18:14:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48602044/article/details/135137393
版权

JavaScript的正则表达式

一、概念

正则表达式(Regular Expression, 规则表达式)：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式，可用于文本搜索和文本替换。

简称：

  1. Regex
  2. RegExp
  3. RE
  4. Reg
  5. Pattern
  6. 模式
  7. 正则

JavaScript的正则语法：/正则表达式主体/修饰符(可选)

JavaScript创建一个正则表达式

  const string = "123";
  //示例1 字面量创建
  const regex1 = /\d+/; // 正则表达式形式
  const regex2 = "12"; // 字符串形式
  console.log(string.match(regex1));  // 输出：["123"]
  console.log(string.match(regex2));  // 输出：["12"]
  //示例2 构造函数创建
  const regex3 = new RegExp(/\d+/); // 正则表达式形式
  const regex4 = new RegExp("12"); // 字符串形式
  console.log(string.match(regex3));  // 输出：["123"]
  console.log(string.match(regex4));  // 输出：["12"]

二、修饰符

1. g (global, 全局)

在字符串中查找所有匹配项，而不仅仅是第一个匹配项

  //示例
  const string = "AaAa";
  const regex1 = /a/;
  const regex2 = /a/g;
  console.log(string.match(regex1));  // 输出：["a"]
  console.log(string.match(regex2));  // 输出：["a", "a"]

2. i (ignore case, 不区分大小写)

在匹配时忽略大小写

  //示例
  const string = "A";
  const regex1 = /a/;
  const regex2 = /a/i;
  console.log(string.match(regex1));  // 输出：null
  console.log(string.match(regex2));  // 输出：["A"]

3. m (multi-line, 多行)

使元字符中开始标识符(^)和结束标识符($)可以在每一行的开始和结束处匹配，而不仅仅在整个字符串的开始和结束处，即可以同时匹配每一行的内容，而不仅仅是整个字符串

  const string = "a\nA";
  // 示例1
  const regex1 = /^A/;
  const regex2 = /^A/m;
  console.log(string.match(regex1));  // 输出：null
  console.log(string.match(regex2));  // 输出：["A"]
  // 示例2
  const regex3 = /a$/;
  const regex4 = /a$/m;
  console.log(string.match(regex3));  // 输出：null
  console.log(string.match(regex4));  // 输出：["a"]

4. s (single-line, 单行)

使元字符点号(.)可以匹配包括换行符在内的所有字符，默认情况下的元字符点号(.)不匹配换行符

  //示例
  const string = "a\nA";
  const regex1 = /.+/;
  const regex2 = /.+/s;
  console.log(string.match(regex1));  // 输出：["a"]
  console.log(string.match(regex2));  // 输出：["a\nA"]

5. u (Unicode, Unicode字符)

使正则表达式可以正确处理Unicode字符，\u{} 可以用来表示一个Unicode代码点

  //示例1
  const string1 = "😀";
  const regex1 = /\u{1F600}/u
  console.log(string1.match(regex1)); // 输出：["😀"]
  //示例2
  const string2 = "😀😃😊😇🙃🤔🙄😣😢😭";
  const regex2 = /[\u{1F600}-\u{1F64F}]/gu;
  console.log(regex2.test(string2)); // 输出：true

6. y (sticky, 粘性)

后一次匹配都从上一次匹配成功的下一个位置开始

  //示例
  const string = "aA";
  const regex1 = /[aA]/;
  const regex2 = /[aA]/y;
  console.log(string.match(regex1));  // 输出：["a"]
  console.log(string.match(regex1));  // 输出：["a"]，因为每次匹配的位置都是重新开始
  console.log(string.match(regex2));  // 输出：["a"]
  console.log(string.match(regex2));  // 输出：["A"]，因为这次匹配是从上次匹配后的位置开始
  console.log(regex1.sticky);  // 输出：false
  console.log(regex2.sticky);  // 输出：true

三、元字符

1. . (匹配非换行符\n的任意一个字符)

 //示例
  const string = "\nabc";
  const regex = /./;
  console.log(string.match(regex));  // 输出：["a"]

2. \d (匹配数字)

  //示例
  const string = "abc123";
  const regex = /\d/;
  console.log(string.match(regex));  // 输出：["1"]

3. \D (匹配除数字以外的所有字符)

  //示例
  const string = "123abc";
  const regex = /\D/;
  console.log(string.match(regex));  // 输出：["a"]

4. \w (匹配英文字母、数字和下划线_)

  //示例
  const string = "*_*_";
  const regex = /\w/;
  console.log(string.match(regex));  // 输出：["_"]

5. \W (匹配除英文字母、数字和下换线_以外的所有字符)

  //示例
  const string = "*_*_";
  const regex = /\W/;
  console.log(string.match(regex));  // 输出：["*"]

6. \s (匹配空格和tab制表符)

  //示例
  const string = "a a";
  const regex = /\s/;
  console.log(string.match(regex));  // 输出：[" "]

7. \S (匹配除空格和tab制表符以外的所有字符)

  //示例
  const string = " a ";
  const regex = /\S/;
  console.log(string.match(regex));  // 输出：["a"]

8. \b (匹配整个字符串的首尾边界)

  //示例
  const string = "abc";
  const regex1 = /\b/;
  const regex2 = /\b/g;
  console.log(string.replace(regex1, "!"));  // 输出：!abc
  console.log(string.replace(regex2, "!"));  // 输出：!abc!

9. \B (匹配整个字符串的除首尾边界以外的边界)

  //示例
  const string = "abc";
  const regex1 = /\B/;
  const regex2 = /\B/g;
  console.log(string.replace(regex1, "!"));  // 输出：a!bc
  console.log(string.replace(regex2, "!"));  // 输出：a!b!c

10. \ (转义字符，把有意义的符号转换成没有意义的符号，把没有意义的转换成有意义的)

其他有特殊含义的字符：

① \n (换行符)

② \f (换页符)

③ \r (回车符)

④ \t (制表符)

⑤ \v (垂直制表符符)

⑥ \xxx (以八进制数xxx规定的字符)

⑦ \xdd (以十六进制数dd规定的字符)

⑧\uxxxx (以十六进制数xxxx规定的Unicode字符)

  //示例
  const string1 = "a\\b";
  const string2 = "a.b";
  const string3 = "a*b";
  const string4 = "a^b";
  const string5 = "a$b";
  const string6 = "a\nb";
  const string7 = "a\fb";
  const string8 = "a\rb";
  const string9 = "a\tb";
  const string10 = "a\vb";
  const string11 = "ab";
  const string12 = "ab";
  const string13 = "ab";
  const regex1 = /\\/;
  const regex2 = /\./;
  const regex3 = /\*/;
  const regex4 = /\^/;
  const regex5 = /\$/;
  const regex6 = /\n/;
  const regex7 = /\f/;
  const regex8 = /\r/;
  const regex9 = /\t/;
  const regex10 = /\v/;
  const regex11 = /\141/;
  const regex12 = /\x61/;
  const regex13 = /\u0061/;
  console.log(string1.match(regex1));  // 输出：["\\"]
  console.log(string2.match(regex2));  // 输出：["."]
  console.log(string3.match(regex3));  // 输出：["*"]
  console.log(string4.match(regex4));  // 输出：["^"]
  console.log(string5.match(regex5));  // 输出：["$"]
  console.log(string6.match(regex6));  // 输出：["\n"]
  console.log(string7.match(regex7));  // 输出：["\f"]
  console.log(string8.match(regex8));  // 输出：["\r"]
  console.log(string9.match(regex9));  // 输出：["\t"]
  console.log(string10.match(regex10));  // 输出：["\v"]
  console.log(string11.match(regex11));  // 输出：["a"] a的ASCII值为97，转为八进制为141
  console.log(string12.match(regex12));  // 输出：["a"] a的ASCII值为97，转为十六进制为61
  console.log(string13.match(regex13));  // 输出：["a"] a的十六进制Unicode字符为U+0061

11. ^ (开始标识符，在集合字符[]里为取非的意义，如[0-9]表示不包含0-9的数字)

  //示例
  const string1 = "ab";
  const string2 = "ba";
  const regex = /^a/;
  console.log(string1.match(regex));  // 输出：["a"]
  console.log(string2.match(regex));  // 输出：null

12. $ (结束标识符)

  //示例
  const string1 = "ab";
  const string2 = "ba";
  const regex = /a$/;
  console.log(string1.match(regex));  // 输出：null
  console.log(string2.match(regex));  // 输出：["a"]

13. \E (结束\L或\U转换)、\L (把\L到\E之间的字符全部转换为小写)、\U (把\U到\E之间的字符全部转换为大写) (JavaScript不支持)

  // 在JavaScript中，正则表达式本身并不支持\L到\E和\U到\E之间的字符全部转换为小写和大写，在其他实现中的一般效果如下（仅供参考）：
  /*  
    // 示例1 \L到\E实现字符小写
    const string1 = "HELLO";
    const regex1 = /(HE)(LLO)/;
    console.log(string1.replace(regex1, "\L$1\E$2" ));  // 输出：heLLO
  */
  /*  
    // 示例2 \U到\E实现字符大写
    const string2 = "hello";
    const regex2 = /(he)(llo)/;
    console.log(string2.replace(regex2, "\U$1\E$2" ));  // HEllo
  */

14. \l (把下一个字符转换为小写)、\u (把下一个字符转换为大写) (JavaScript不支持)

  // 在JavaScript中，正则表达式本身并不支持\l和\u的一个字符转换为小写和大写，在其他实现中的一般效果如下（仅供参考）：
  /*  
    // 示例1 \l实现字符小写
    const string1 = "HELLO";
    const regex1 = /(HE)(LLO)/;
    console.log(string1.replace(regex1, "\l$1$2" ));  // 输出：hELLO
  */
  /*  
    // 示例2 \u实现字符小写
    const string2 = "hello";
    const regex2 = /(he)(llo)/;
    console.log(string2.replace(regex2, "\u$1$2" ));  // Hello
  */

四、限定符

  • 限定符性质：默认是贪婪性，如果可以的话尽可能多的匹配字符；在限定符后面加上?即为懒惰性，尽可能少的匹配字符。

1. * (重复0次或更多次，匹配失败了一次后就会停止)

  //示例
  const string1 = "a1234";
  const string2 = "1234";
  const string3 = "12a34";
  const regex = /\d*/;
  const regexLazy = /\d*?/;  // 开启懒惰性
  console.log(string1.match(regex));  // 输出：[""]，匹配失败了一次后就停止
  console.log(string1.match(regexLazy));  // 输出：[""]
  console.log(string2.match(regex));  // 输出：["1234"]
  console.log(string2.match(regexLazy));  // 输出：[""]
  console.log(string3.match(regex));  // 输出：["12"]
  console.log(string3.match(regexLazy));  // 输出：[""]

2. + (重复1次或更多次，只有成功匹配了一次后才会停止)

  //示例
  const string1 = "a1234";
  const string2 = "1234";
  const string3 = "12a34";
  const regex = /\d+/;
  const regexLazy = /\d+?/;  // 开启懒惰性
  console.log(string1.match(regex));  // 输出：["1234"]，匹配失败后不停止
  console.log(string1.match(regexLazy));  // 输出：["1"]
  console.log(string2.match(regex));  // 输出：["1234"]
  console.log(string2.match(regexLazy));  // 输出：["1"]
  console.log(string3.match(regex));  // 输出：["12"]，匹配成功了一次后就停止
  console.log(string3.match(regexLazy));  // 输出：["1"]

3. ? (重复0次或1次，匹配失败了一次后就会停止)

  //示例
  const string1 = "a1234";
  const string2 = "1234";
  const regex = /\d?/;
  const regexLazy = /\d??/;
  console.log(string1.match(regex));  // 输出：[""]，匹配失败了一次后就停止
  console.log(string1.match(regexLazy));  // 输出：[""]
  console.log(string2.match(regex));  // 输出：["1"]
  console.log(string2.match(regexLazy));  // 输出：[""]

4. {n} (必须重复n次)(开启懒惰性没有意义)

  //示例
  const string1 = "a1234";
  const string2 = "1234";
  const string3 = "1";
  const regex = /\d{2}/;
  console.log(string1.match(regex));  // 输出：["12"]
  console.log(string2.match(regex));  // 输出：["12"]
  console.log(string3.match(regex));  // 输出：null

5. {n,} (必须至少重复n次)

  //示例
  const string1 = "a1234";
  const string2 = "1234";
  const string3 = "123a45";
  const string4 = "12a345";
  const string5 = "1";
  const regex = /\d{2,}/;
  const regexLazy = /\d{2,}?/;
  console.log(string1.match(regex));  // 输出：["1234"]
  console.log(string1.match(regexLazy));  // 输出：["12"]
  console.log(string2.match(regex));  // 输出：["1234"]
  console.log(string2.match(regexLazy));  // 输出：["12"]
  console.log(string3.match(regex));  // 输出：["123"]
  console.log(string3.match(regexLazy));  // 输出：["12"]
  console.log(string4.match(regex));  // 输出：["12"]
  console.log(string4.match(regexLazy));  // 输出：["12"]
  console.log(string5.match(regex));  // 输出：null
  console.log(string5.match(regexLazy));  // 输出：null

6. {n, m} (必须至少重复n次，至多重复m次)

  //示例
  const string1 = "a1234";
  const string2 = "1234";
  const string3 = "1";
  const regex = /\d{2,3}/;
  const regexLazy = /\d{2,3}?/;
  console.log(string1.match(regex));  // 输出：["123"]
  console.log(string1.match(regexLazy));  // 输出：["12"]
  console.log(string2.match(regex));  // 输出：["123"]
  console.log(string2.match(regexLazy));  // 输出：["12"]
  console.log(string3.match(regex));  // 输出：null
  console.log(string3.match(regexLazy));  // 输出：null

五、特殊符号

1. () (视作一组整体的和连续的元素进行匹配，只有成功匹配了一次后才会停止)

① 常规捕获组

语法：(exp)
说明：

  1. 这个语法会捕获匹配的文本，也会给分组分配组号
  2. exp：正则表达式
  //示例1
  const string1 = "ab";
  const string2 = "aaabbbabc";
  const regex = /(abc)/;
  console.log(string1.match(regex));  // 输出：null
  console.log(string2.match(regex));  // 输出：["abc", "abc"]，匹配失败不停止，匹配成功了一次后才停止
  //示例2 给分组分配组号
  const string3 = "aabb";
  const regex2 = /(aa)(bb)/;
  console.log(string3.match(regex2)[1]);  // 输出：aa
  console.log(string3.match(regex2)[2]);  // 输出：bb

② 非捕获组

语法：(?:exp)
说明：

  1. 这个语法不会捕获匹配的文本，也不会给分组分配组号
  2. exp：正则表达式
  //示例1 与常规捕获组效果不相同，不会捕获匹配的文本
  const string1 = "aaabbb";
  const regex1 = /(?:a)/;
  console.log(string1.match(regex1));  // 输出：["a"]
  console.log(string1.match(regex1)[0]);  // 输出：a
  //示例2 给分组分配组号
  const string2 = "aabb";
  const regex2 = /(aa)(?:bb)/;
  console.log(string2.match(regex2)[1]);  // 输出：aa
  console.log(string2.match(regex2)[2]);  // 输出：undefined

③ 命名捕获组

语法：(?exp)
说明：

  1. 这个语法可以给一个捕获组分配一个名称，以便在后续操作中更容易地引用和访问该组匹配的内容
  2. name：捕获组的名称，是一个标识符（即由英文字母、数字、下划线组成，且不能以数字开头）
  3. exp：正则表达式
  //示例1 与常规捕获组效果相同，会捕获匹配的文本
  const string1 = "aaabbb";
  const regex1 = /(?<a>a)/;
  console.log(string1.match(regex1));  // 输出：["a", "a"]
  console.log(string1.match(regex1).groups);  // 输出：{a: "a"}
  console.log(string1.match(regex1).groups.a);  // 输出：a
  //示例2
  const string2 = "2023-12-30";
  const regex2 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
  console.log(string2.match(regex2));  // 输出：["2023-12-30", "2023", "12", "30"]
  console.log(string2.match(regex2).groups);  // 输出：{year: '2023', month: '12', day: '30'}
  console.log(string2.match(regex2).groups.year);  // 输出：2023
  console.log(string2.match(regex2).groups.month);  // 输出：12
  console.log(string2.match(regex2).groups.day);  // 输出：30

④ 零宽正向先行断言

语法：(?=exp)
说明：

  1. 这个语法可以匹配(?=exp)前面的位置，这个位置符合(?=exp)中的exp正则
  2. exp：正则表达式
  //示例
  const string = "12a3b";
  const regex = /\D(?=\d)/;
  console.log(string.match(regex));  // 输出：["a"]

⑤ 零宽正向后行断言

语法：(?<=exp)
说明：

  1. 这个语法可以匹配(?<=exp)后面的位置，这个位置符合(?<=exp)中的exp正则
  2. exp：正则表达式
  //示例
  const string = "12a3b";
  const regex = /(?<=\d)\d/;
  console.log(string.match(regex));  // 输出：["2"]

⑥ 零宽负向先行断言

语法：(?!exp)
说明：

  1. 这个语法可以匹配(?!exp)前面的位置，这个位置不符合(?!exp)中的exp正则
  2. exp：正则表达式
  //示例
  const string = "12a3b";
  const regex = /\d(?!\D)/;
  console.log(string.match(regex));  // 输出：["1"]

⑦ 零宽负向后行断言

语法：(?<!exp)
说明：

  1. 这个语法可以匹配(?<!exp)后面的位置，这个位置不符合(?<!exp)中的exp正则
  2. exp：正则表达式
  //示例
  const string = "a12b";
  const regex = /(?<!\D)\d/;
  console.log(string.match(regex));  // 输出：["2"]

⑧ 回溯引用

 //示例1 \1类型回溯引用重复，其中1代表第1个子表达式
  const string1 = "aabbccaa aabbccbb";
  const regex1 = /(aa)(bb)(cc)\1/;
  const regex2 = /(aa)(bb)(cc)\2/;
  console.log(string1.match(regex1));  // 输出：["aabbccaa", "aa", "bb", "cc"]，去除的重复是第1个子表达式，即aa
  console.log(string1.match(regex2));  // 输出：["aabbccbb", "aa", "bb", "cc"]，去除的重复是第2个子表达式，即bb
 //示例2 $1类型回溯引用替换，其中1代表第1个子表达式
  const string2 = "aabbcc";
  const regex3 = /(aa)(bb)/;
  console.log(string2.replace(regex3, "$1"));  // 输出：aacc
  console.log(string2.replace(regex3, "$2"));  // 输出：bbcc

⑨ 回溯引用条件(?(backreference)true-regex|false-regex) (JavaScript不支持)

⑩ 前后查找条件(?(Search before and after)true-regex|false-regex) (JavaScript不支持)

2. [] (字符集合，单写[]本身没有意义，匹配包含在[]里面的任意一个字符，没有匹配前后顺序之分，只有成功匹配了一次后才会停止)

  //示例
  const string1 = "21a";
  const string2 = "a1";
  const regex = /[1a]/;
  console.log(string1.match(regex));  // 输出：["1"]
  console.log(string2.match(regex));  // 输出：["a"]，没有匹配前后顺序之分

3. [^] (字符集合取非，匹配写在[]里面之外的任意一个字符，只有成功匹配了一次后才会停止)

  //示例
  const string1 = "ab12";
  const string2 = "a1";
  const regex = /[^1a]/;
  console.log(string1.match(regex));  // 输出：["b"]，匹配失败不停止，匹配成功了一次后才停止
  console.log(string2.match(regex));  // 输出：null，没有匹配前后顺序之分

4. - (范围，通常配合[]使用，如[0-9]、[a-z]、[A-Z]、[a-zA-Z0-9]、[A-z]，匹配包含在[]里面范围内的任意一个字符，只有成功匹配了一次后才会停止)

  //示例
  const string1 = "01234";
  const string2 = "abAB12";
  const string3 = "A1ab";
  const string4 = "_";
  const string5 = "@";
  const string6 = "@_1";
  const string7 = "Aa";

  const regex1 = /[0-9]/; // 匹配从0到9的任意一个数字
  const regex2 = /[a-z]/; // 匹配从a到z的任意一个小写英文字母
  const regex3 = /[A-Z]/; // 匹配从A到Z的任意一个大写英文字母
  const regex4 = /[a-zA-Z0-9]/; // 匹配从0到9的任意一个数字、从a到z的任意一个小写英文字母、从A到Z的任意一个大写英文字母
  const regex5 = /[A-z]/; // 匹配ASCII中从A到z中（65-122）的任意一个字符，包含除英文字母外的ASCII值为91-96的这六个字符，a的ASCII值为97

  // regex1
  console.log(string1.match(regex1));  // 输出：["0"]
  console.log(string2.match(regex1));  // 输出：["1"]，匹配失败不停止，匹配成功了一次后才停止
  console.log(string7.match(regex1));  // 输出：null

  // regex2
  console.log(string1.match(regex2));  // 输出：null
  console.log(string2.match(regex2));  // 输出：["a"]
  console.log(string3.match(regex2));  // 输出：["a"]，匹配失败不停止，匹配成功了一次后才停止

  // regex3
  console.log(string1.match(regex3));  // 输出：null
  console.log(string2.match(regex3));  // 输出：["A"]，匹配失败不停止，匹配成功了一次后才停止
  console.log(string3.match(regex3));  // 输出：["A"]

  // regex4
  console.log(string1.match(regex4));  // 输出：["0"]
  console.log(string2.match(regex4));  // 输出：["a"]
  console.log(string3.match(regex4));  // 输出：["A"]
  console.log(string4.match(regex4));  // 输出：null
  console.log(string6.match(regex4));  // 输出：["1"]，匹配失败不停止，匹配成功了一次后才停止

  // regex5
  console.log(string1.match(regex5));  // 输出：null
  console.log(string2.match(regex5));  // 输出：["a"]
  console.log(string3.match(regex5));  // 输出：["A"]
  console.log(string4.match(regex5));  // 输出：["_"]
  console.log(string5.match(regex5));  // 输出：null
  console.log(string6.match(regex5));  // 输出：["_"]，匹配失败不停止，匹配成功了一次后才停止

5. | (或，如a|A，表示匹配a|A，只有成功匹配了一次后才会停止，没有匹配前后顺序之分)

  //示例
  const string1 = "1bac";
  const string2 = "1dec";
  const regex1 = /a|b/;
  const regex2 = /c|d|e/;
  console.log(string1.match(regex1));  // 输出：["b"]，匹配失败不停止，匹配成功了一次后才停止，没有匹配前后顺序之分
  console.log(string2.match(regex2));  // 输出：["d"]，匹配失败不停止，匹配成功了一次后才停止，没有匹配前后顺序之分

六、正则表达式的属性

1. constructor

语法：RegExpObject.constructor
作用：返回一个函数，该函数是一个创建 RegExp 对象的原型

  //示例
  const regex = /\d/;
  console.log(regex.constructor);  // 输出：ƒ RegExp() { [native code] }

2. lastIndex

语法：RegExpObject.lastIndex
作用：用于规定下次匹配的起始位置，默认是0，搭配RegExp对象上正则表达式有全局修饰符g的test和exec方法使用，没有全局修饰符g，lastIndex不会起任何作用（可读写）
特性：如果test()或exec()没有找到匹配项，lastIndex会被重置为0，如果找到了一个匹配项，lastIndex会被更新为匹配到的子串之后的第一个字符的位置

  //示例1
  const regex1 = /\d/;
  console.log(regex1.lastIndex);  // 输出：0
  //示例2
  const string2 = "a1b";
  const regex2 = /\d/g;
  regex2.lastIndex = 2
  console.log(regex2.lastIndex);  // 输出：2
  console.log(regex2.test(string2));  // 输出：false
  console.log(regex2.lastIndex);  // 输出：0
  console.log(regex2.test(string2));  // 输出：true
  console.log(regex2.lastIndex);  // 输出：2
  console.log(regex2.test(string2));  // 输出：false
  console.log(regex2.lastIndex);  // 输出：0
  //示例3
  const string3 = "a1b";
  const regex3 = /\d/g;
  regex3.lastIndex = 2
  console.log(regex3.lastIndex);  // 输出：2
  console.log(regex3.exec(string3));  // 输出：null
  console.log(regex3.lastIndex);  // 输出：0
  console.log(regex3.exec(string3));  // 输出：["1"]
  console.log(regex3.lastIndex);  // 输出：2
  console.log(regex3.exec(string3));  // 输出：null
  console.log(regex3.lastIndex);  // 输出：0

3. source

语法：RegExpObject.source
作用：返回正则表达式的匹配模式（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /[0-9]+/;
  console.log(regex1.source);  // 输出：\d
  console.log(regex2.source);  // 输出：[0-9]+

4. flags

语法：RegExpObject.flags
作用：返回一个包含所有启用的修饰符的字符串（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/gim;
  console.log(regex1.flags);  // 输出：
  console.log(regex2.flags);  // 输出：gim

5. global

语法：RegExpObject.global
作用：判断是否设置了 “g” 修饰符（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/g;
  console.log(regex1.global);  // 输出：false
  console.log(regex2.global);  // 输出：true

6. ignoreCase

语法：RegExpObject.ignoreCase
作用：判断是否设置了 “i” 修饰符（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/i;
  console.log(regex1.ignoreCase);  // 输出：false
  console.log(regex2.ignoreCase);  // 输出：true

7. multiline

语法：RegExpObject.multiline
作用：判断是否设置了 “m” 修饰符（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/m;
  console.log(regex1.multiline);  // 输出：false
  console.log(regex2.multiline);  // 输出：true

8. dotAll

语法：RegExpObject.dotAll
作用：判断是否设置了 “s” 修饰符（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/s;
  console.log(regex1.dotAll);  // 输出：false
  console.log(regex2.dotAll);  // 输出：true

9. unicode

语法：RegExpObject.unicode
作用：判断是否设置了 “u” 修饰符（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/u;
  console.log(regex1.unicode);  // 输出：false
  console.log(regex2.unicode);  // 输出：true

10. sticky

语法：RegExpObject.sticky
作用：判断是否设置了 “y” 修饰符（只读）

  //示例
  const regex1 = /\d/;
  const regex2 = /\d/y;
  console.log(regex1.sticky);  // 输出：false
  console.log(regex2.sticky);  // 输出：true

七、正则表达式的方法

1. test

语法：RegExpObject.test(string)
作用：检测一个字符串是否匹配某个正则模式，如果字符串中有匹配的值返回true，否则返回false

  //示例
  const string = "ab12";
  const regex = /\d/;
  console.log(regex.test(string));  // 输出：true

2. exec

语法：RegExpObject.exec(string)
作用：检测一个字符串是否匹配某个正则模式，如果字符串中有匹配的值返回该匹配值（只返回第一项匹配的值），否则返回null

  //示例1
  const string1 = "ab12";
  const regex1 = /\d/;
  console.log(regex1.exec(string1));  // 输出：["1"]
  //示例2
  const string2 = "ab12";
  const regex2 = /\d+/;
  console.log(regex2.exec(string2));  // 输出：["12"]
  //示例3
  const string3 = "a1b2";
  const regex3 = /\d+/;
  console.log(regex3.exec(string3));  // 输出：["1"]
  //示例4
  const string4 = "ab";
  const regex4 = /\d/;
  console.log(regex4.exec(string4));  // 输出：null

八、常用的配合正则的字符串方法

1. search

语法：string.search(RegExpObject | string)
作用：检测一个字符串是否匹配某个正则模式或字符串，如果字符串中有匹配的值返回第一个匹配元素的索引（索引从0开始），否则返回-1

  //示例1
  const string1 = "ab12";
  const regex1 = /\d/;
  console.log(string1.search(regex1));  // 输出：2
  //示例2
  const string2 = "ab12";
  const regex2 = /\d+/;
  console.log(string2.search(regex2));  // 输出：2
  //示例3
  const string3 = "a1b2";
  const regex3 = /\d/;
  console.log(string3.search(regex3));  // 输出：1
  //示例4 匹配字符串
  const string4 = "a1b2";
  const stringSearch1= "a1b2";
  const stringSearch2= "b2";
  const stringSearch3= "c";
  console.log(string4.search(stringSearch1));  // 输出：0
  console.log(string4.search(stringSearch2));  // 输出：2
  console.log(string4.search(stringSearch3));  // 输出：-1

2. match

语法：string.match(RegExpObject | string)
作用：检测一个字符串是否匹配某个正则模式或字符串，如果字符串中有匹配的值返回该匹配值（如果没有全局修饰符g只返回第一项匹配的值，如果有全局修饰符g则返回匹配的每一项），否则返回null

  //示例1 没有全局标识符g，返回的值与exec完全一样
  const string1 = "ab12";
  const regex1 = /\d/;
  console.log(string1.match(regex1));  // 输出：["1"]
  //示例2 没有全局标识符g，返回的值与exec完全一样
  const string2 = "ab12";
  const regex2 = /\d+/;
  console.log(string2.match(regex2));  // 输出：["12"]
  //示例3 没有全局标识符g，返回的值与exec完全一样
  const string3 = "a1b2";
  const regex3 = /\d+/;
  console.log(string3.match(regex3));  // 输出：["1"]
  //示例4 没有全局标识符g，返回的值与exec完全一样
  const string4 = "ab";
  const regex4 = /\d/;
  console.log(string4.match(regex4));  // 输出：null
  //示例5 匹配字符串
  const string5 = "a1b2";
  const stringSearch1 = "a1b2";
  const stringSearch2 = "b2";
  const stringSearch3 = "c";
  console.log(string5.match(stringSearch1));  // 输出：["a1b2"]
  console.log(string5.match(stringSearch2));  // 输出：["b2"]
  console.log(string5.match(stringSearch3));  // 输出：null
  //示例6 有全局标识符g
  const string6 = "ab12";
  const regex6 = /\d/g;
  console.log(string6.match(regex6));  // 输出：["1", "2"]
  //示例7 有全局标识符g
  const string7 = "ab12";
  const regex7 = /\d+/g;
  console.log(string7.match(regex7));  // 输出：["12"]
  //示例8 有全局标识符g
  const string8 = "a1b2";
  const regex8 = /\d+/g;
  console.log(string8.match(regex8));  // 输出：["1", "2"]
  //示例9 有全局标识符g
  const string9 = "a1b2";
  const regex9 = /\d/g;
  console.log(string9.match(regex9));  // 输出：["1", "2"]
  //示例10 有全局标识符g
  const string10 = "ab";
  const regex10 = /\d/g;
  console.log(string10.match(regex10));  // 输出：null

3. replace

语法：string.replace(RegExpObject | string, newvalue)
作用：检测一个字符串是否匹配某个正则模式或字符串，如果字符串中有匹配的值返回该匹配值被替换后的整个字符串（如果没有全局修饰符g只返回第一项匹配的值被替换后的整个字符串，如果有全局修饰符g则返回匹配的每一项被替换后的整个字符串），否则返回null，该方法不改变原始字符串

  //示例1 没有全局标识符g，要替换的值与match方法没有全局标识符g匹配到的值一样
  const string1 = "ab12";
  const regex1 = /\d/;
  console.log(string1.replace(regex1, "☆"));  // 输出：ab☆2
  //示例2 没有全局标识符g，要替换的值与match方法没有全局标识符g匹配到的值一样
  const string2 = "ab12";
  const regex2 = /\d+/;
  console.log(string2.replace(regex2, "☆"));  // 输出：ab☆
  //示例3 没有全局标识符g，要替换的值与match方法没有全局标识符g匹配到的值一样
  const string3 = "a1b2";
  const regex3 = /\d+/;
  console.log(string3.replace(regex3, "☆"));  // 输出：a☆b2
  //示例4 没有全局标识符g，要替换的值与match方法没有全局标识符g匹配到的值一样
  const string4 = "ab";
  const regex4 = /\d/;
  console.log(string4.replace(regex4, "☆"));  // 输出：ab
  //示例5 匹配字符串
  const string5 = "a1b2";
  const stringSearch1 = "a1b2";
  const stringSearch2 = "b2";
  const stringSearch3 = "c";
  console.log(string5.replace(stringSearch1, "☆"));  // 输出：☆
  console.log(string5.replace(stringSearch2, "☆"));  // 输出：a1☆
  console.log(string5.replace(stringSearch3, "☆"));  // 输出：a1b2
  //示例6 有全局标识符g，要替换的值与match方法有全局标识符g匹配到的值一样
  const string6 = "ab12";
  const regex6 = /\d/g;
  console.log(string6.replace(regex6, "☆"));  // 输出：ab☆☆
  //示例7 有全局标识符g，要替换的值与match方法有全局标识符g匹配到的值一样
  const string7 = "ab12";
  const regex7 = /\d+/g;
  console.log(string7.replace(regex7, "☆"));  // 输出：ab☆
  //示例8 有全局标识符g，要替换的值与match方法有全局标识符g匹配到的值一样
  const string8 = "a1b2";
  const regex8 = /\d+/g;
  console.log(string8.replace(regex8, "☆"));  // 输出：a☆b☆
  //示例9 有全局标识符g，要替换的值与match方法有全局标识符g匹配到的值一样
  const string9 = "a1b2";
  const regex9 = /\d/g;
  console.log(string9.replace(regex9, "☆"));  // 输出：a☆b☆
  //示例10 有全局标识符g，要替换的值与match方法有全局标识符g匹配到的值一样
  const string10 = "ab";
  const regex10 = /\d/g;
  console.log(string10.replace(regex10, "☆"));  // 输出：ab

4. split

语法：string.split(RegExpObject(可选) | string(可选), limit(可选))
作用：检测一个字符串是否匹配某个正则模式或字符串，如果字符串中有匹配的值则以该值作为分割线，分割线两边作为返回的数组的元素，该方法不改变原始字符串

  //示例1
  const string1 = "ab12";
  const regex1 = /\d/;
  console.log(string1.split(regex1));  // 输出：["ab", "", ""]
  //示例2
  const string2 = "ab12";
  const regex2 = /\d+/;
  console.log(string2.split(regex2));  // 输出：["ab", ""]
  //示例3
  const string3 = "a1b2";
  const regex3 = /\d+/;
  console.log(string3.split(regex3));  // 输出：["a", "b", ""]
  //示例4
  const string4 = "a1b2";
  const regex4 = /\d/;
  console.log(string4.split(regex4));  // 输出：["a", "b", ""]
  //示例5
  const string5 = "ab";
  const regex5 = /\d/;
  console.log(string5.split(regex5));  // 输出：["ab"]
  //示例6 匹配字符串
  const string6 = "a1b2";
  const stringSearch1 = "a1b2";
  const stringSearch2 = "b2";
  const stringSearch3 = "c";
  console.log(string6.split(stringSearch1));  // 输出：["", ""]
  console.log(string6.split(stringSearch2));  // 输出：["a1", ""]
  console.log(string6.split(stringSearch3));  // 输出：["a1b2"]
  //示例7 split为空
  const string7 = "abc";
  console.log(string7.split());  // 输出：["abc"]
  console.log(string7.split(null));  // 输出：["abc"]
  console.log(string7.split(undefined));  // 输出：["abc"]
  console.log(string7.split(" "));  // 输出：["abc"]
  console.log(string7.split(""));  // 输出：["a", "b", "c"]
  //示例8 limit参数限制返回的数组元素必须≤limit的值
  const string8 = "a1b2c3";
  const regex8 = /\d/;
  console.log(string8.split(regex8));  // 输出：["a", "b", "c", ""]
  console.log(string8.split(regex8, 0));  // 输出：[]
  console.log(string8.split(regex8, 2));  // 输出：["a", "b"]
  console.log(string8.split(regex8, 5));  // 输出：["a", "b", "c", ""]

九、常用的正则表达式

  1. 只能输入正的整数或者正的小数(位数不限)
^[0-9]+\.{0,1}[0-9]{0,}$
  1. 只能输入0-9的数字
^[0-9]*$
  1. 只能输入1位的0-9数字
^\d{1}$
  1. 只能输入1~3位的0-9数字
^\d{1,3}$
  1. 只能输入至少2位的0-9数字
^\d{2,}$
  1. 只能输入长度为3的字符(除了换行符外)
^.{3}$
  1. 只能输入由26个英文字母组成的字符串
^[A-Za-z]+$
  1. 只能输入由26个小写英文字母组成的字符串
^[a-z]+$
  1. 只能输入由26个大写英文字母组成的字符串
^[A-Z]+$
  1. 只能输入由数字和26个大小写英文字母组成的字符串
^[A-Za-z0-9]+$
  1. 只能输入由数字、26个大小写英文字母和下划线组成的字符串
^\w+$
  1. 只能输入由汉字组成的字符串
^[\u4e00-\u9fa5]{0,}$
  1. 匹配首尾空白字符
(^\s*)|(\s*$)
  1. 验证Email地址
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
  1. 验证https和http地址
^(https?:\/\/(?:www\.)?[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,}(?:\/[\w\.-]*)*\/?)$
  1. 验证中国大陆18位居民身份证号码
^[1-9][0-9]{5}(18|19|20)[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])[0-9]{3}([0-9]|X)$
  1. 验证中国大陆11位手机号码
^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$
  1. 验证中国邮政编码
^[1-9]\d{5}$
  1. 验证IPv4地址
^(((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))$
  1. 验证IPv6地址
^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
  1. 验证16进制颜色
^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$
伍嘉源
关注
  • 12
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 的正则表达式
qq_43415108的博客
02-17 199
JavaScript 的正则表达式 定义 用于定义一些字符串的规则。 计算机可以根据正则表达式来检查一个字符串是否符合该规则，或将字符串中符合规则的部分字符串提取出来。 创建正则表达式对象 使用构造函数创建正则表达式 语法：var 变量 = new RegExp("正则表达式","匹配模式"); 匹配模式（有些书也叫修饰词）有三个值： i：忽略字母大小写； g：全局匹配模式； m：多行匹配； 匹配模式可以是单独的 i、g、m，也可以是它们中的任意组合。 var reg = new RegExp("ab"
JavaScript正则表达式
天空之外
08-08 908
1：基本概念 正则表达式是用于匹配字符串中字符组合的模式。它也是一个描述字符模式的对象，使用正则表达式可以进行强大的模式匹配和文本检索与交替功能。 正则表达式有两部分组成，一部分是普通字符，一部分是特殊字符。普通字符比如说键盘可以输出的这些字母大写A-Z和小写a-z，0-9的数字；特殊字符可以是^代表以什么开头、$代表以什么结尾、.、(x)、…。 2：正则表达式的创建 有两种方式：对象字面量和Re...
手机号正则
qq_42148925的博客
09-30 137
【代码】手机号正则。
一篇不大靠谱的常用正则表达式汇总(前端)
weixin_34391854的博客
07-16 197
前言 正则这东西吧,感觉是开发的都会接触到一些..那些所谓的基础语法就不说了哈,一搜一大把,来点实际的.我这里就分享下我工作中汇总和遇到的,希望对一些小伙伴有些许帮助哈!! 正则汇总 匹配URL const regexURL = /((https?:|ftp:)\/\/)?|(\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6...
常用校验正则
weixin_30325971的博客
03-09 107
总结一些常用的校验正则表达式，补充中~ const REGEX_MOBILE = /^(13|15|17|18|14|16|19)[0-9]{9}$/;//手机号码 const REGEX_PASSWORD = /^[0-9A-Za-z]{6,20}$/;//6-20位密码 const REGEX_EMAIL = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;//邮箱 con...
正则表达式学习笔记及常用正则汇总
a17173642的博客
04-16 216
最简单的正则表达式 正则在自然语言处理中广泛运用到，对前端开发者来说，最常见的正则是表单上的一些验证。 现在介绍一种最简单的正则（匹配指定的文本）：下面是一段文字，我们现在想把里面的某个字，比如（的），匹配出来。 var b ='岁月无情，豁然回首才发现人活着是一种心情，曾经拥有的不要忘记，已经得到的更加珍惜，属于自己的不要放弃，已经失去的不要回忆，想要得到的一定要努力。' ...
通用正则表达式
Zxf_xcn的博客
03-04 476
正则 电话正则： ^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$ 邮箱正则： 1+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$ A-Za-z0-9\u4e00-\u9fa5 ↩︎
javascript正则表达式基础篇
10-27
主要是介绍javascript正则表达式的一些基础知识，主要是介绍javascript的正则书写方法与常用实例，需要的朋友可以参考下
JavaScript正则表达式替换字符串中图片地址(img src)的方法
10-20
本篇文章将深入探讨如何使用JavaScript正则表达式来实现这个功能。 首先，我们需要理解JavaScript的`String.prototype.replace()`方法。此方法接受两个参数：一个正则表达式或字符串作为查找的模式，以及一个替换...
JavaScript正则表达式校验非零的正整数实例
10-20
本文分享了JavaScript正则表达式（^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$）校验非零的正整数实例代码，代码简单易懂，需要的朋友可以看下
常见正则表达式
匆匆的博客
06-22 218
1、邮箱正则校验 const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ 2、手机号正则校验 const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
angular2项目里使用正则表达式
web
09-22 1655
先踩坑 test() 方法是一个正则表达式方法。 test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。 我们学习正则表达式时，一般这样使用 var phone = document.getElementById('phone').value; if(!(/^1[3456789]\d{9}$/.test(phone))){ alert("手机号码有误，请重填"); return false; } 使用tes
ES6 新特性有哪些
weixin_64684095的博客
07-06 782
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
Vue前端打包
weixin_63680330的博客
07-04 184
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1276
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 218
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1006
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
javascript正则表达式
07-27
回答: JavaScript正则表达式是一种用于匹配和操作字符串的强大工具。在JavaScript中，可以使用正则表达式来查找、替换、分割和验证字符串。引用\[1\]中的例子展示了如何使用正则表达式来匹配特定的字符串。通过使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伍嘉源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值