• JS的正则表达式

    正则表达式

    1.正则表达式概述

    正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来

    2.正则表达式创建的两种方式

    // 方式一：
var reg = new RegExp("正则表达式","匹配模式");

// 方式二：
var reg = /正则表达式/匹配模式;

匹配模式：
`i`：忽略大小写
`g`：全局匹配
`m`：执行多行匹配


注意是：
当使用构造函数创建正则对象时，需要常规的字符转义规则（在前面加反斜杠`\`）。比如，以下是等价的：
var reg = new RegExp("\\w+");
var reg = /\w+/;

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

    创建正则表达式两种方式：

      // 第一步：创建正则表达式
  // 表示包含`abc`中的其中一个即可，i：匹配模式，忽略大小写
  var reg = new RegExp("[abc]","i");
  // 创建正则表达式方式二：
  var regExg = /a|b|c/i;

    • 1
    • 2
    • 3
    • 4
    • 5

    修饰符用于执行区分大小写和全局匹配:

    修饰符描述
    i执行对大小写不敏感的匹配。
    g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
    m执行多行匹配。

    正则表达式的操作：

    第一步：创建正则表达式对象

    第二步：使用匹配test(传入需要检查字符串);方法

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>正则表达式快速入门</title>
</head>
<body>
<script type="text/javascript">
  // 第一步：创建正则表达式
  // 表示包含`abc`中的其中一个即可，i：匹配模式，忽略大小写
  var reg = new RegExp("[abc]","i");

  // 第二步：检查是否匹配
  var result = reg.test("abcdefg");//返回：true

  console.log(result);
  
</script>
</body>
</html>

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

    3.正则表达式范围

    方括号用于查找某个范围内的字符：

    表达式描述
    [abc]查找方括号之间的任何字符。
    [^abc]查找任何不在方括号之间的字符。
    [0-9]查找任何从 0 至 9 的数字。
    [a-z]查找任何从小写 a 到小写 z 的字符。
    [A-Z]查找任何从大写 A 到大写 Z 的字符。
    [A-z]查找任何从大写 A 到小写 z 的字符。
    [adgk]查找给定集合内的任何字符。
    [^adgk]查找给定集合外的任何字符。
    (red|blue|green)查找任何指定的选项。
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>正则表达式范围</title>
</head>
<body>
<script type="text/javascript">

  // 第一步：创建正则表达式
  var reg = /[abc]/i;

  // 第二步：检查是否符合
  console.log(reg.test("awer"));// true
  console.log(reg.test("123"));// false

  var reg = /[^abc]/i;//表示是除了abc的所有字符
  console.log(reg.test("abc"));// false
  console.log(reg.test("123"));// true


  var reg = /[a-z]/i;// 表示`a到z`
  console.log(reg.test("ab"));//true
  console.log(reg.test("168"));// false

  // 练习：检查一个字符串中是否含有：abc 或 adc 或 aec
  var reg = /abc|adc|aec/;
  // var reg = /a[bde]c/;  以上面的是等价的
  console.log(reg.test("abc"));
</script>
</body>
</html>

    • 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

    4.正则表达式量词

    量词描述
    n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
    n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
    n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
    n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
    n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
    n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
    n$匹配任何结尾为 n 的字符串。
    ^n匹配任何开头为 n 的字符串。
    ?=n匹配任何其后紧接指定字符串 n 的字符串。
    ?!n匹配任何其后没有紧接指定字符串 n 的字符串。
    			/*
			 * 量词
			 * 	- 通过量词可以设置一个内容出现的次数
			 * 	- 量词只对它前边的一个内容起作用
			 * 	- {n} 正好出现n次
			 * 	- {m,n} 出现m-n次
			 * 	- {m,} m次以上
			 * 	- + 至少一个，相当于{1,}
			 * 	- * 0个或多个，相当于{0,}
			 * 	- ? 0个或1个，相当于{0,1}
			 */

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>正则表达式量词</title>
</head>
<body>
<script type="text/javascript">
  /**
   * 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
   */
  var reg = /^1[3578][0-9]{9}/;
  var result = reg.test("18888888888");
  console.log(result);
</script>
</body>
</html>

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

    5.字符串和正则相关的方法

    split()方法

    • 可以将一个字符串拆分为一个数组
    • 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
    • 这个方法即使不指定全局匹配，也会全都拆分

    search()方法

    • 可以搜索字符串中是否含有指定内容
    • 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
    • 它可以接受一个正则表达式作为参数，然后会根据正则表达式检索字符串
    • serach()只会查找第一个，即使设置全局匹配也没有

    match()方法

    • 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
    • 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
      • 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
      • 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
    • match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

    replace()

    • 可以将字符串中指定内容替换为新的内容
    • 参数：
      1. 被替换的内容，可以接受一个正则表达式作为参数
      2. 新的内容
    • 默认只会替换第一个
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>正则表达式和字符串相关的方法</title>
</head>
<body>
<script type="text/javascript">
  // split()方法 拆分字符串
  var str = "1a3b2d4r5s5d6f7d8s9c0e8";

  var result = str.split(/[A-z]/gi);
  console.log(result);
  // 返回值：['1', '3', '2', '4', '5', '5', '6', '7', '8', '9', '0', '8']

  // search()方法 用于检索的
  var str = "123abc38aec186adc168";
  var search = str.search(/a[bed]c/g);
  console.log(search);

  // match()方法 用于从一个字符串中将符合条件的内容提取出来
  var str = "1d3d4e7d9e4";
  var match = str.match(/[0-9]/g);
  console.log(match);
  // 返回值：['1', '3', '4', '7', '9', '4']

  // replace()方法，用于替换
  var str = "2da3df73d3ad3,fd83df3ad";
  var replace = str.replace(/[A-z]/gi,"@-@");
  console.log(replace);
  // 返回值：[2@-@@-@3@-@@-@73@-@3@-@@-@3,@-@@-@83@-@@-@3@-@@-@]
  console.log(str);
</script>
</body>
</html>

    • 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

    6.元字符

    元字符（Metacharacter）是拥有特殊含义的字符：

    元字符描述
    .查找单个字符，除了换行和行结束符。
    \w查找数字、字母及下划线。
    \W查找非单词字符。
    \d查找数字。
    \D查找非数字字符。
    \s查找空白字符。
    \S查找非空白字符。
    \b匹配单词边界。
    \B匹配非单词边界。
    \0查找 NULL 字符。
    \n查找换行符。
    \f查找换页符。
    \r查找回车符。
    \t查找制表符。
    \v查找垂直制表符。
    \xxx查找以八进制数 xxx 规定的字符。
    \xdd查找以十六进制数 dd 规定的字符。
    \uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。
    			/*
			 * 检查一个字符串中是否含有 .
			 * . 表示任意字符
			 * 在正则表达式中使用\作为转义字符
			 * \. 来表示.
			 * \\  表示\
			 * 
			 * 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
			 * 	如果要使用\则需要使用\\来代替
			 */


			/*
			 * \w   ：任意字母、数字、_  [A-z0-9_]
			 * \W   ：除了字母、数字、_  [^A-z0-9_]
			 * \d   ：任意的数字 [0-9]
			 * \D   ：除了数字 [^0-9]
			 * \s   ：空格
			 * \S   ：除了空格
			 * \b   ：单词边界
			 * \B   ：除了单词边界
			 */

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

    注意是：在var reg = new RegExp("\\");需要表示\时，则要写两个才能表示一个\，如果是在var reg = /\/;字面量中表示一个\，则只需要写一个\即可

    必须掌握案例：

    <script type="text/javascript">
  /**
   * 创建一个正则表达式检查一个字符串是否含有单词`child`
   */
  var reg = /\bchild\b/;//注意是：`\b`表示是：边界的意思
  console.log(reg.test("hello  child "));

  /**
   * 去用户输入的前后空格，单词之间的空格不需要去除
   */
  var str = "         hello eeje    ";
  str = str.replace(/^\s*|\s*$/g,"");
  console.log(str);// 返回是：`hello eeje`
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
  • 相关阅读:
    软件测试开发基础｜测开中的几个工具开发实战
    touch - 创建空文件与修改时间戳
    初步体验通过 Semantic Kernel 与自己部署的通义千问开源大模型进行对话
    blender快捷键
    基于二叉树结构是刷题
    SELinux零知识学习八、SELinux策略语言之客体类别和许可（2）
    SpringCloud尚硅谷全部
    我的创作纪念日
    Vuex
    Promise
  • 原文地址：https://blog.csdn.net/weixin_47267628/article/details/126860516