JS中的正则

126 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第25天,点击查看活动详情

正则

正则表达式概述

什么是正则表达式
正则表达式 是用于匹配字符串中字符组合的模式。在js中,正则表达式也是对象
正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本,
例如验证表单:用户名表单只能输入英文字母、数字或者下划线,
昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)
或从字符串中获取我们想要的特定部分(提取)等

正则表达式的特点

  • 灵活性、逻辑性和功能性非常强
  • 可以迅速地用极简单的方式达到字符串的复杂控制
  • 实际开发中,一般都是直接复制写好的正则表达式,但是要求会使用正则表达式并且根据实际情况修改 比如用户名:/^[a-z0-9_-]{3,16}$/

如何创建正则表达式

在js中,一般可以通过两种方式创建一个正则表达式。

1.通过RegExp对象的构造函数创建
语法: var 变量名 = new RegExp(/表达式/);

        var regexp = new RegExp(/123/);
        console.log(regexp); // /123/

2.利用字面量创建 正则表达式
语法: var 变量名 = /表达式/;

        var rg = /123/;
        // test字符串用来检测字符串是否符合正则表达式
        console.log(rg.test(123)); //true
        console.log(rg.test('abc')); //false

补充:
测试正则表达式test,test()正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串。
语法:regexObj.test(str)

  1. regexObj 是写的正则表达式
  2. str是我们要测试的文本
  3. 就是检测str文本是否符合我们写的正则表达式规范

正则中的特殊字符

一个正则表达式可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,比如/ab*c/
其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号
如:^ $ + 等等 特殊字符非常多

1. 边界符

正则表达式的边界符(位置符)用来提示字符所处的位置,主要有两个字符
^ 表示匹配行首文本
$ 表示匹配行尾文本

示例:

        var rg = /abc/; //正则表达式里面不需要加引号 不管是数字型还是字符型
        console.log(rg.test('abc'));
        //  /abc/表示只要包含这几个字母都返回true
        console.log(rg.test('abcd'));
        console.log(rg.test('aabcd'));

        var reg1 = /^abc/; //表示必须以abc开头
        var reg2 = /abc$/; //表示以abc结尾
        console.log(reg2.test('ababc')); //true
        var reg3 = /^abc$/; //表示必须是abc

2. 字符类

前面讲的/abc/表示只要包含了abc就可以
字符类: [ ] 表示有一系列字符可供选择,只要匹配其中一个就可以了(多选一)

        var rg = /[abc]/; //只要包含a或者b或者c就返回true
        console.log(rg.test('andy')); //true

        var rg1 = /^[abc]$/; //三选一 只有a或者b或者c 这三个字母才返回true
        console.log(rg1.test('aa')); //false

        var rg2 = /^[a-z]$/; //表示26个字母任何一个,才返回true
        console.log(rg2.test('a')); //true

        //字符组合
        var rg3 = /^[a-zA-Z]$/; //表示任意一个大小写字母,才返回true
        console.log(rg3.test('a')); //true

        //取反
        var rg4 = /^[^a-zA-Z]$/; //^写在[]里面表示不能取里面任何一个字符
        console.log(rg4.test('a')); //false

3. 量字符

量词符用来设定某个模式出现的次数:
*表示重复零次或多次

        var reg = /^a*$/;  // 表示出现0次或者多次a都返回true
        console.log(reg.test(''));  true
        console.log(reg.test('a'));  true

+表示重复1次或多次

        var reg = /^a+$/;  // 表示出现1次或者多次a都返回true
        console.log(reg.test(''));  false
        console.log(reg.test('a'));  true

表示重复0次或1次

        var reg = /^a?$/; //  表示出现0次或者1次 才返回true
        console.log(reg.test(''));  true
        console.log(reg.test('a'));  true

{n}表示重复n次

        var reg = /^a{3}}$/;  // 表示出现3次a才返回true
        console.log(reg.test(''));  false
        console.log(reg.test('aaa'));  true
    
        // {n,}
        // var reg = /^a{3,}}$/;  表示出现大于等于3次a 才返回true
        // console.log(reg.test(''));  false
        // console.log(reg.test('aaaa'));  true

注意这种写法 /^abc{3}$/ 意思是让c重复3次,也就是abccc才返回true
如果想让abc重复3次呢,这时候要用小括号() eg: /^(abc){3}}$/

{n,m}表示重复n到m次

        var reg = /^a{3,6}}$/;  // 表示出现大于等于3,小于等于6次a 才返回true
        console.log(reg.test(''));   //false
        console.log(reg.test('aaaa'));  //true

字符类和量字符搭配使用的案例

量词是设定某个模式出现的次数

    var reg = /^[a-zA-Z0-9_-]$/;

这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[ ] 这就限定了只能多选1

        console.log(reg.test('a')); // true
        console.log(reg.test('8')); // true
        console.log(reg.test('18')); // false
        console.log(reg.test('aa')); // 出现了一个以上的都是false

利用量词符让[]中的模式可以重复出现,注意{6,16}中不能出现空格

    var reg = /^[a-zA-Z0-9_-]{6,16}$/;
    console.log(reg.test('abcdefg-hello')); //true

预定义类

预定义类指的是某些常见模式的简写方式:
\d 匹配0-9之间任一数字,相当于[0-9]
\D 匹配所有0-9以外的字符。相当于[^0-9]
\w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]
\W 除所有字母、数字、下划线之外的,相当于[^A-Za-z0-9_]
\s 匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]
\S 匹配非空格的字符,相当于[^\t\r\n\v\f]