正则表达式

一.正则表达式概述

1.什么是正则表达式

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

2.正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强。
2. 可以迅速地用极简单的方式达到字符串的复杂控制。

二.创建正则表达式

在 JavaScript 中，可以通过两种方式创建一个正则表达式。
1.通过调用 RegExp 对象的构造函数创建

 var 变量名 = new RegExp(/表达式/);

2. 通过字面量创建

 var 变量名 = /表达式/;

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

 regexObj.test(str)

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

代码演示

 <script>
        // 在js中有俩种方法创建正则表达式
        // 1.通过调用构造函数RegExp对象
        var regexp = new RegExp(/123/);
        console.log(regexp);

        // 2.通过字面量创建
        var rg = /123/;
        console.log(rg);

        // 3.test()原来检测字符串是否合格规则 返回布尔值
        console.log(regexp.test('123')); //true
        console.log(rg.test('123')); //true
        console.log(rg.test('abc')); //false
    </script>

三… 正则表达式中的特殊字符

1 正则表达式的组成

• 一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中
  特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。由于符号很多具体参考手册

2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

边界符	说明
^	表示以谁开始
$	表示以谁结束

如果 ^ 和 $ 在一起，表示必须是精确匹配

代码演示

  <script>
        // 边界符 ^ $
        var rg = /abc/; // /abc/ 只要包含有abc这个字符串返回的都是true
        console.log(rg.test('abc')); //true
        console.log(rg.test('abcaa')); //true
        console.log(rg.test('bbabcaa')); //true
        console.log(rg.test('bbacbcaa')); //false 因为这里abc位置没有挨在一起

        var reg = /^abc/ //表示必须以abc开头的
        console.log(reg.test('abc')); //true
        console.log(reg.test('abccc')); //true
        console.log(reg.test('abcccbb')); //true
        console.log(reg.test('aabcccbb')); //false

        var reg = /^abc$/ //表示精确 必须是abc字符串才符合规范
        console.log(reg.test('abc')); //true
        console.log(reg.test('abcc')); //flase
        console.log(reg.test('aabcc')); //flase
    </script>

3 字符类
字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

1 . [] 方括号

/[abc]/.test('andy') // true

后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

2 . [-] 方括号内部 范围符

 /^[a-z]$/.test(c') // true

方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。

3 . [^] 方括号内部 取反符^

/[^abc]/.test('andy') // false

方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
注意和边界符 ^ 区别，边界符写到方括号外面。

4 . 字符组合

 /[a-z1-9]/.test('andy') // true

方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

代码演示

  <script>
        // 1. [] 方括号 后面的字符串只要包含 abc 中任意一个字符，都返回 true 
        var gr = /[abc]/
        console.log(gr.test('aee')); //true
        console.log(gr.test('abe')); //true
        console.log(gr.test('coo')); //true
        console.log(gr.test('eoo')); //false 因为没有包含abc

        // 2. [-] 方括号内部 范围符 方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。
        var gr1 = /[a-z]/
        console.log(gr1.test('a')); //true
        console.log(gr1.test('b')); //true
        console.log(gr1.test('c')); //true
        console.log(gr1.test('d')); //true
        console.log(gr1.test(1)); //flase
        console.log(gr1.test('A')); //flase 没有包含大写

        // 3.字符组合
        var gr2 = /^[a-z A-Z 0-9 _ -]$/ //表示在这个范围内都可以
        console.log(gr2.test('2')); //true
        console.log(gr2.test('c')); //true
        console.log(gr2.test('B')); //true
        console.log(gr2.test('A')); //true
        console.log(gr2.test('_')); //true

        // 4.如果中括号里面有^表示取反的意思 就是不包含这些
        var gr3 = /^[^a-z A-Z 0-9 _ -]$/
        console.log(gr3.test('2')); //false
        console.log(gr3.test('c')); //false
        console.log(gr3.test('B')); //false
        console.log(gr3.test('A')); //false
        console.log(gr3.test('_')); //false
    </script>

4 量词符
量词符用来设定某个模式出现的次数简单理解 就是某个字符重复出现多少次

代码演示

<script>
        // 量词符就是指某个字符重复出现的次数

        // * 相当于 >=0 可以出现0次或者很多次
        var reg = /^a*$/;
        console.log(reg.test('')); //true
        console.log(reg.test('a')); //true
        console.log(reg.test('aaaa')); //true

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

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

        // {3} 重复3次 只能重复三次
        var reg = /^a{3}$/;
        console.log(reg.test('')); //false
        console.log(reg.test('a')); //false
        console.log(reg.test('aaaa')); //false
        console.log(reg.test('aaa')); //true

        //{3,} 大于等于3 至少出现3次
        var reg = /^a{3,}$/;
        console.log(reg.test('')); //false
        console.log(reg.test('a')); //false
        console.log(reg.test('aaaa')); //true
        console.log(reg.test('aaa')); //true
        console.log(reg.test('aaaaaa')); //true

        // {3,9} 大于等于3 并且小于9 只能在这个范围
        var reg = /^a{3}$/;
        console.log(reg.test('')); //false
        console.log(reg.test('a')); //false
        console.log(reg.test('aaaa')); //true
        console.log(reg.test('aaa')); //true
        console.log(reg.test('aaaaaaaaaaaaaaaa')); //flase
    </script>

5 预定义类
预定义类指的是某些常见模式的简写方式 在正则里面或是用 | 表示

四.正则表达式中的替换

1 replace 替换
replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

 stringObject.replace(regexp/substr,replacement)

1. 第一个参数: 被替换的字符串 或者 正则表达式
2. 第二个参数: 替换为的字符串
3. 返回值是一个替换完毕的新字符串

2 正则表达式参数

 /表达式/[switch]

switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：

1. g：全局匹配
2. i：忽略大小写
3. gi：全局匹配 + 忽略大小写

代码演示

    <textarea name="" id=""></textarea><button>提交</button>
    <div></div>
    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div')
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|爽/gi, '**')
        }
    </script>