正则表达式

235 阅读3分钟

前提:正则表达式的含义及作用

正则表达式:用来匹配字符串中字符组合的模式

正则表达式常用来检索、替换那些符合某个规则的文本(规范书写格式)

一.正则表达式在js中的使用

注意:

正则表达式的基本语法是://

这个和我们的注释表达相同,因此在使用正则表达式时内容不能为空,否则会被认为是注释

1:利用 RegExp 对象来创建

创建对象的使用需要实例化对象

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

2:利用字面量创建

var 变量 = 正则表达式

var zz = /abc/;

3.test()正则对象方法

使用test()来检测字符串是否符合要求

语法:正则表达式(名).test(需要检测的内容)

        console.log(zz.test(123));
        console.log(zz.test('123'));
        console.log(zz.test('abc'));
        console.log(zz.test('abcde'));

在test()检测中,只要我们检测的内容文本类型和我们输入的正则表达式内容相同,并且包含内容输入的正则表达式内容,就会返回true

注意:在正则表达式中不需要添加引号,无论我们输入的内容是数字型的还是字符串型的

特殊点:对于内容为数字的情况,数字型的和字符串型的是一样的,所以无论是哪一种,他都会返回true

二、边界符

1、^ 以谁开头

var reg = /^abc/;为例:

这个表示,只有以abc开头的,test()检测结果返回的才是true

        console.log(reg.test('abc'));  // true
        console.log(reg.test('abcd'));  // true
        console.log(reg.test('aabcd'));  // false
        console.log('-------------------');

2、 $ 以谁结尾

var reg1 = /^abc$/;为例:

这个表示,只有以abc开头并以abc结尾的,test()检测结果返回的才是true

        console.log(reg1.test('abc'));  // true
        console.log(reg1.test('abcd'));  // false
        console.log(reg1.test('aabcd'));  // false
        console.log(reg1.test('abcabc'));  // false

实际上二者双管齐下,使得最终结果只能是我们正则表达式的内容,test()检测结果才会返回 true

三、字符类

1.[]

表示有一系列的字符可供选择,只要匹配上其中的一个就可以了

        var rg = /[abc]/;  // 只要有其中一个或多个返回值都是 true
        console.log(rg.test('aa'));
        console.log(rg.test('andy'));
        console.log(rg.test('baby'));
        console.log(rg.test('copy'));
        console.log(rg.test('end'));

2.^[]$

        var rg1 = /^[abc]$/;   // 要求三选一,检测内容只有只存在这其中的一个元素才是true
        console.log(rg1.test('aa'));
        console.log(rg1.test('baby'));
        console.log(rg1.test('andy'));
        console.log(rg1.test('a'));      // true
        console.log(rg1.test('b'));      // true
        console.log(rg1.test('c'));      // true
        console.log(rg1.test('abc'));

3.^[范围]$

        var reg = /^[a-z]$/;   // 要求多选一(26个字母),检测内容只有只存在这其中的一个元素才是true
        console.log(reg.test('a'));   // true
        console.log(reg.test('b'));   // true 
        console.log(reg.test('c'));   // true
        console.log(reg.test('z'));   // true
        console.log(reg.test(1));     // false

4.组合形式 依旧是多选一

        var reg1 = /^[a-zA-Z0-9_-]$/;
        console.log(reg1.test('a'));  // true
        console.log(reg1.test('z'));  // true
        console.log(reg1.test('A'));  // true 
        console.log(reg1.test('Z'));  // true
        console.log(reg1.test('6'));  // true
        console.log(reg1.test('-'));  // true
        console.log(reg1.test('_'));  // true
        console.log(reg1.test('!'));  // false

注意:

如果中括号里面有 ^ 表示取反 就是表示和没加这个取反符号之前的所有结论相悖

不同点:

这个同我们边界符的 ^ 意义是完全不一样的;边界符的 ^ 表示的是从谁开始

        var reg1 = /^[a-zA-Z0-9_-]$/;
        console.log(reg1.test('a'));  // false
        console.log(reg1.test('z'));  // false
        console.log(reg1.test('A'));  // false 
        console.log(reg1.test('Z'));  // false
        console.log(reg1.test('6'));  // false
        console.log(reg1.test('-'));  // false
        console.log(reg1.test('_'));  // false
        console.log(reg1.test('!'));  // true

四、量词

量词符:用来设定某个模式出现的次数,本质上就是规定字符可以重复的次数

var reg = /^a$/; 为例:(具体代码如下)

      <script>
        // 1. *  相当于 >=0 可以出现0次或多次,就是有没有都不影响,它一直是true
        // var reg = /^a*$/;
        // console.log(reg.test(''));
        // console.log(reg.test('a'));
        // console.log(reg.test('aaaa'));

        // 2. + 相当于 >=1 可以出现1次或多次
        // var reg = /^a+$/;
        // console.log(reg.test(''));  // false
        // console.log(reg.test('a'));  // true
        // console.log(reg.test('aaaa')); // true

        // 3. ? 相当于 1||0 只出现1次或没有出现
        // var reg = /^a?$/;
        // console.log(reg.test(''));  // true
        // console.log(reg.test('a'));  // true
        // console.log(reg.test('aaaa')); // false

        // {n} 就是重复n次  这里以3为例
        // var reg = /^a{3}$/;
        // console.log(reg.test(''));  // false
        // console.log(reg.test('a'));  // false
        // console.log(reg.test('aaaa')); // false

        // {n, } 就是可以重复n次或更多次
        // var reg = /^a{3,}$/;
        // console.log(reg.test(''));  // false
        // console.log(reg.test('a'));  // false
        // console.log(reg.test('aaaa')); // true

        // {n,m} 就是可以重复 n 到 m 次(包括n和m)   它们中间不能打空格(n,m)
        var reg = /^a{3,6}$/;
        console.log(reg.test(''));  // false
        console.log(reg.test('a'));  // false
        console.log(reg.test('aaaa')); // true
        console.log(reg.test('aaaaaaaaaaa')); // false
    </script>

五、括号总结

1.中括号 字符集合 用来匹配括号内的任意字符

var reg =/^[abc]$/;

2.大括号 量词符 用来规定重复次数

        // var reg = /^abc{3}$/;
        // console.log(reg.test('abc'));    // false
        // console.log(reg.test('abcabcabc'));   // false
        // console.log(reg.test('abccc'));    // true
        // 没有加上小括号的时候,它这里只会重复最后的c三次,加了小括号提高它的优先级后,就是重复括号里面的内容三次

3.小括号 表示优先级 或者说是 提高括号内元素的优先级

        var reg = /^(abc){3}$/;
        console.log(reg.test('abc'));   // false
        console.log(reg.test('abcabcabc'));  // true
        console.log(reg.test('abccc'));   // false

六、替换

语法格式:字符串.replace('内容1','内容2');

用内容2替换内容1

常用来规避危险、敏感词汇

具体例子如下:

   <body>
    <textarea name="" id="message"></textarea><button>提交</button>
    <div></div>
    <script>
        // 替换 replace
        // var test = 'hhhh and llll';
        // var newt = test.replace('hhhh', 'wwww');
        // var newt = test.replace(/hhhh/, 'wwww');
        // console.log(newt);
        var test = document.querySelector('#message');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function () {
            div.innerHTML = test.value.replace(/黄色|暴力/g, '**');
        }
    </script>
</body>

所以上述例子会把输入内容中所有的“黄色”和“暴力”,用“**”来替换

补充:

正则表达式参数

/表达式/[switch]

switch 也叫做修饰符,有三个值

g 意为选中(包括)输入文本中的所有敏感词,使其全部被替换,如果没有它,每次使用replace只能替换一次

i 意为忽略大小写

gi 想来聪明的各位已经猜到了吧,没错,它就是前面两者的“优良继承者”,即选中所有需替换的内容,又进一步忽略了大小写的问题

芜湖,到这里,一些关于正则表达式的基本内容就讲完了,正则表达式的使用十分广泛,赶紧动手来体验一下吧

7D55D5B2B515C7911D50070F6DD8C909.gif

如有错误,请在下面进行指正!我们共同进步 5652641F6046387C074EA0036E6B0126.jpg