正则表达式-其实没有那么难

        很多人看到正则表达式的第一反应就是头大，难学，那么长一串符号，这啥呀这是。诶！先别急着头疼，其实分开一步步看，正则表达式还是很容易看懂的，不信？看看呗！

---

目录

一、什么是正则表达式

1.概述

2.作用

3.工具

二、正则表达式的使用

1.创建

方式一：通过调用RegExp对象的构造函数创建

方式二：利用字面量创建 正则表达式

2.测试

test()方法

exec()方法

match()方法

三、正则表达式的特殊字符

1.边界符

2.字符类

2.1[] 方括号

2.2 量词符

3、预定义类

四、正则替换

---

一、什么是正则表达式

1.概述

        正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的文本模式。在JavaScript中，正则表达式也是对象。包括普通字符和特殊字符。

2.作用

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

3.工具

        正则表达式在线测试工具，用来帮我们测试书写的正则表达式是否能正确匹配到文本。

        正则表达式在线测试 | 菜鸟工具       

         该工具还为我们提供了常用的正则表达式写法，在开发中可以直接使用提高效率！

二、正则表达式的使用

1.创建

        在 JavaScript 中，可以通过两种方式创建一个正则表达式。

• 方式一：通过调用RegExp对象的构造函数创建

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

• 方式二：利用字面量创建 正则表达式

 var rg = /123/;    //推荐使用的方法

2.测试

• test()方法

        test()检测字符串是否符合规则，返回值是boolean类型，其参数是测试字符串。

var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123  出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false

• exec()方法

        eexc()如果字符串符合正则规则，则返回值是长度为1的数组。数组内存放着第一个符合规则的子串。如果是全局匹配，多次用同一正则规则匹配同一字符串时，每一次的起始位置是上一次的lastindex位置。每次返回的数组长度还是1。

var str = "1a1b1c";
var reg = /1./g;
console.log(reg.exec(str)[0]); // 1a
console.log(reg.exec(str)[0]); // 1b
console.log(reg.exec(str)[0]); // 1c

        index中存放符合字串的起始位置； lastIndex：符合规则子串的结束位置；input：保存着str 

• match()方法

        match()方法和exec()方法类似，当不是全局匹配时，该方法与exec()相同，使用全局匹配后会一次性返回所有符合条件的字串。

var str = "1a1b1c";
var reg = /1./g;
console.log(str.match(reg));// [1a,1b,1c]

三、正则表达式的特殊字符

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

        特殊字符非常多，可以参考：正则表达式 - JavaScript | MDN

1.边界符

        作用：主要用来提示字符所处的位置。

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

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

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

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

var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc'));    // true
console.log(reg1.test('abcd'));   // false
console.log(reg1.test('aabcd'));  // false
console.log(reg1.test('abcabc')); // false    

2.字符类

2.1[] 方括号

        作用：有一系列字符可供选择，只要匹配其中一个就可以了

var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('apple'));//true
console.log(rg.test('red'));//false
----------------------------------------------------------------------------------

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

var rg = /^[a-z]$/ //26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
console.log(rg.test('a'));//true
console.log(rg.test('z'));//true
console.log(rg.test('A'));//false
-----------------------------------------------------------------------------------

//字符组合
var rg = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
------------------------------------------------------------------------------------

//取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
var rg = /^[^a-zA-Z0-9]$/;
console.log(rg.test('a'));//false
console.log(rg.test('Z'));//false
console.log(rg.test(7));//false
console.log(rg.test('!'));//true

2.2 量词符

        作用：量词符用来设定某个模式出现的次数。

量词	说明
*	重复0次或更多次
+	重复1次或更多次
?	重复0次或1次
{n}	{n}重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

         

        这样我们就可以写一个完整的正则表达式用于表单验证啦~ 这里放了一个小dome

 var username = document.getElementById("username");
        var qq = document.getElementById("qq");
        var span = document.querySelector("li").querySelector("span");
        // userreg = /\W/;
        var userreg = /^[a-zA-Z0-9]{6,16}$/;
        var qqreg = /^[1-9]{1}\d{4,9}$/
        reg(username, userreg);
        reg(qq, qqreg);
        function reg(ele, reg) {
            ele.onblur = function () {
                if (reg.test(this.value)) {
                    // console.log('zhengque');
                    this.nextElementSibling.className = "right"
                    this.nextElementSibling.innerHTML = "输入正确"
                } else {
                    // console.log('cuowu');
                    this.nextElementSibling.className = "wrong"
                    this.nextElementSibling.innerHTML = "输入有误，请重新输入"
                }
            }
        }

 小小的总结一下：

        正则表达式中三种括号的用法指南：

括号类型	含义
大括号	量词符，表示里面重复次数
中括号	字符集合，匹配方括号中的任意字符
小括号	优先级

3、预定义类

        作用：预定义类指的是某些常见模式的简写方式。

预定类	说明
\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]

四、正则替换

        当我们在开发中需要对内容（字符串）进行替换时，可以使用replace() 方法。该方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

        当我们想要全局替换时，需要在正则表达式后加上g；否则只替换第一个符合要求的字符或字符串；当我们想要不区分大小写时需要在正则表达式后加上i。多个替换条件使用‘|’隔开

  var str = 'cqyzsC012QzAabcd';
        var newstr = str.replace(/[acq]/gi, '你好')
        console.log(newstr); //你好你好yzs你好012你好z你好你好b你好d

        其实整篇看下来，正则表达式并不难，正则表达式的写法也不是唯一的，只需要帮我们验证输入的内容能否正确匹配，工具中也帮我们写好了常用的正则表达式，有需要也可以借助工具哦~

        看完这篇博客，正则表达式咱们就是一个拿下的大动作！