JS中正则表达式

最新推荐文章于 2025-03-29 16:31:02 发布

辰辰北

最新推荐文章于 2025-03-29 16:31:02 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript 正则表达式前端

本文链接：https://blog.youkuaiyun.com/weixin_42943920/article/details/122141700

版权

JavaScript 专栏收录该内容

77 篇文章

订阅专栏

本文详细介绍了JavaScript中的正则表达式，包括创建方法、常用方法如`exec()`，元字符如/d、/D等，限定符如*、+、?的用法，边界符如^的含义，特殊符号如|的应用，以及标识符如i的作用，帮助读者全面掌握正则表达式在前端开发中的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、正则表达式的创建

<script>
    window.onload = function() {
      // 正则表达式
      // 创建正则表达式
        // 1 字面量创建
      var reg1 = /qwe/
      console.log(reg1); // /qwe/(红色的)
        // 2 内置构造函数创建
      var reg2 = new RegExp('qwe')
      console.log(typeof reg2); // object
      console.dir(reg2); //诸多属性
    }
  </script>

二、正则表达式方法

1、test( )方法

// 正则表达式方法1（检测字符串是否符合规则）
      // 正则表达式.test(被检测的字符串) 
      var reg = /qwe/ //表示字符串中含有'qwe'
      console.log(reg.test('123qwe')); //true
      console.log(reg.test('123')); // false

2、exec()方法

// 正则表达式.exec(参数) 参数就是要匹配的字符串
        // 返回值：以数组方式返回匹配到的第一个字符串
        var reg = /\d{2}/
        console.log(reg.exec('12w3r4589')); // ['12', index: 0, input: '12w3r4589', groups: undefined]
        console.log(reg.exec('256987w3r4589')); // ['25', index: 0, input: '256987w3r4589', groups: undefined]

三、元字符

1、/d 表示数字0-9

// 元字符
        // 1、/d 表示数字0-9
        var reg1 = /\d/
        console.log(reg1.test('qwer')); // false
        console.log(reg1.test('kk2')); // true

2、/D 表示非数字

// 2、/D 表示非数字
        var reg2 = /\D/
        console.log(reg2.test('1234qwe')); //true
        console.log(reg2.test('123947')); // false

3、 /s 表示空白符

// 3、/s表示空白符
        var reg3 = /\s/
        console.log(reg3.test('0')); //false
        console.log(reg3.test('')); // false
        console.log(reg3.test(' kk kk')); // true

4、/S 表示非空白符

// 4、/S 表示非空白符
        var reg4 = /\S/
        console.log(reg4.test('0')); // true
        console.log(reg4.test(' ')); // false
        console.log(reg4.test(' kk kk')); // true

5、/w 表示数字字母下划线

// 5、 /w 表示数字字母下划线
        var reg5 = /\w/
        console.log(reg5.test('10_')); // true
        console.log(reg5.test(' ')); // false
        console.log(reg5.test('!!')); // false

6、/W 表示非数字字母下划

// 6、 /W表示非数字字母下划线
        var reg6 = /\W/
        console.log(reg6.test('10_')); // false
        console.log(reg6.test(' ')); // true
        console.log(reg6.test('!!')); // true

7、点（.）表示非换行字符

// 7、 点（.）表示非换行字符
        var reg6 = /./
        console.log(reg6.test('\n')); // false
        console.log(reg6.test('\nn')); // true

四、限定符

1、星号（*）表示0到无数次

// 1、 星号（*） 表示0到无数次 
        var reg = /\d*/ // 表示数字有0到无数个
        console.log(reg.test('')); // true
        console.log(reg.test(' 0215')); //true

2、加号（+）表示1到无数次

// 2、加号（+）表示1到无数次
        var reg = /\d+/ // 表示数字有1到无数个
        console.log(reg.test('qwed')); //false
        console.log(reg.test('qw6ed')); //true

3、问号（？）表示0或1次搭配边界符一起使用

// 3、问号（？） 表示0或1次 搭配边界符一起使用
        var reg = /\d?/ // 表示数字出现0或1次
        console.log(reg.test('3kkg')); // true
        console.log(reg.test('35kkg')); // true
        console.log(reg.test('35kkg35')); // true
        console.log(reg.test('333333')); // true

4、{n} 连续出现n次

// {n} 连续出现n次
        var reg = /\d{2}/ // 连续出现两次数字
        console.log(reg.test('qwert')); // false
        console.log(reg.test('12qwert')); // true
        console.log(reg.test('123qwert')); // true

5、{n,m} 连续出现n到m次

// 5、{n，m}出现连续的n到m次
        var reg = /\d{2,4}/ // 数字连续出现2到4次
        console.log(reg.test('1qwert')); //false
        console.log(reg.test('12qwert')); //true
        console.log(reg.test('125689qwert')); //true

6、{n,}连续出现n到无数次

 // 6、{n,}连续出现n到无数次
        var reg = /\d{2,}/
        console.log(reg.test('1qwert')); //false
        console.log(reg.test('12qwert')); //true
        console.log(reg.test('125689qwert')); //true

五、边界符：限定开头和结尾
1、 ^ 表示开头

// ^用法
        console.log(/^\d/.test('233')); // true 以数字开头
        console.log(/^\d/.test('qwer233')); // false

    2、 $ 表示结尾

// $ 用法
        console.log(/\d$/.test('233')); // true 以数字结尾
        console.log(/\d$/.test('qwer233qwer')); // false

3、 ^ 和 $一起使用

// console.log(/\d$/.test('233')); // true 以数字结尾
        console.log(/\d$/.test('qwer233qwer')); // false
        console.log(/^\d$/.test('123qwer451')); // false
        console.log(/^\d$/.test('1111')); // false
        console.log(/^\d$/.test('1')); // true(以这个1开头，以这个1结尾)
        console.log(/^\d*$/.test('1111')); // true

六、特殊符号

1、 \ 转义
       w ===> \w 数字字母下划线
       . ===> \. 普通点
 2、  - 范围
      	0-9 a-z A-Z
 3、[ ] 表示一个字符集合,只要有一个匹配即可

		  console.log(/^[123]/.test('11qwer')); //true
          console.log(/^[123]/.test('222qwer')); // true
          console.log(/^[123]/.test('8qwer')); // false
          console.log(/^[123]/.test('qwer')); // false
          console.log(/^[0-9]/.test('8qwet')); // true

4、()表示一个字符组，将小括号看成一个整体

// 4、()表示一个字符组，将小括号看成一个整体
          console.log(/^(123)/.test('11qwer')); // false
          console.log(/^(123)/.test('123qwer')); // true

5、| 或者

console.log(/^(12|34|78)/.test('34kk')); // true 以12或者34或者78作为开头
console.log(/^[12|34|78]/.test('3kk')); // true 以123478中任意一个作为开头都可

6、 [^12]除了1和2之外的其他内容，都匹配

// 6、[^]  [^12]除了1和2之外的其他内容，都匹配
          console.log(/[^12]/.test('12222')); //false
          console.log(/[^12]/.test('1w2222')); //true

七、标识符

标识符：放在正则表达式的最后
i 忽略大小写的匹配

console.log(/[a-z]/i.test('qweQWE')); // true

   g 表示全局匹配

//拿到匹配的全部结果
        var reg = /\d{2}/g
        var str = '1wr35qt89'
        var arr = []
        var strArr = ''
        while(strArr = reg.exec(str)) {
          arr.push(strArr)
        }
        console.log(arr); // [Array(1), Array(1)]