JavaScript正则表达式（2）

前言

在正文开始前，先说说正则表达式是什么，为什么要用正则表达式？正则表达式在我个人看来就是一个浏览器可以识别的规则，有了这个规则，浏览器就可以帮我们判断某些字符是否符合我们的要求。但是，我们为什么要使用正则表达式呢？下面我们就看一下下面这个业务场景。

验证QQ号的合法性

/**
*合法qq号规则：1、5-15位；2、全是数字；3、不以0开头
*/

//1.在不使用正则表达式的时候，我们可能会这样判断QQ号的合法性
var qq="6666666a6666";         
if(qq.length>=5&&qq.length<=15&&!isNaN(qq)&&qq.charCodeAt(0)!=48){
        alert("QQ合法");
    }else{
        alert("QQ不合法")
    }
    
//2.使用正则表达式
    var qq="066336";
    var reg=/^[1-9][0-9]{4,14}$/;
    if(reg.test(qq)){
        alert("QQ合法");
    }else{
        alert("QQ不合法");
    }
复制代码

从上面这个例子可以看出来使用了正则表达式的时候，我们的代码量变少了，而且比较直观。如果遇到非常的复杂的匹配，正则表达式的优势就更加明显了。

使用方法 接着上面，我想先说说JS正则表达式是如何使用的。非常简单，只有两步而已。

第一步：定义一个正则表达式 定义正则表达式有两种方法，第一种通过"/正则表达式/修饰符"这种形式直接写出来，第二种通过“new RegExp('正则表达式'，'修饰符)'”创建一个RegExp对象。其中修饰符为可选项，有三个取值g：全局匹配；i：不区分大小写；m：多行匹配

//第一种“/正则表达式/”
    var reg1=/hello \w{3,12}/g;
//第二种new RegExp('正则表达式')
    var reg2=new RegExp("hello \\w{3,12}",'g');
    
/**
*这里需要注意的是,第二种方法中由于字符串转义问题，"\\"代表"\"。
*/   
复制代码

上面这个定义方法，其实还有一个可选参数（修饰符），这里我们先不深入探究，后面我们再细说。

说到RegExp对象，下面要说一下RegExp对象自带的属性，并不复杂，这里我就列一下，不展开说了。

第二步：调用RegExp对象中的方法 RegExp对象给我们提供了三种方法供我们使用，分别是test()、exec()和compile()。下面具体说一下这三个方法的用处。

1.test() 检索字符串中指定的值。返回 true 或 false。这个是我们平时最常用的方法。

var reg=/hello \w{3,12}/;
 alert(reg.test('hello js'));//false
 alert(reg.test('hello javascript'));//true
复制代码

2.exec() 检索字符串中指定的值。匹配成功返回一个数组，匹配失败返回null。

var reg=/hello/;
console.log(reg.exec('hellojs'));//['hello']
console.log(reg.exec('javascript'));//null
复制代码

3.compile() compile() 方法用于改变 RegExp。 compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var reg=/hello/;
console.log(reg.exec('hellojs'));//['hello']
reg.compile('Hello');
console.log(reg.exec('hellojs'));//null
reg.compile('Hello','i');
console.log(reg.exec('hellojs'));//['hello']
复制代码

如何写一个正则表达式 第一次接触正则表达式同学们，可能被这个正则表达式的规则弄得迷迷糊糊的，根本无从下手。

其实正则表达式都可以拆成一个或多个（取值范围+量词）这样的组合。针对每个组合我们根据JS正则表达式的规则翻译一遍，然后将每个组合重新拼接一下就好了。下面我们举个例子来试一下，看看这个方法行不行。

验证QQ号的合法性 合法qq号规则：1、5-15位；2、全是数字；3、不以0开头

第一步：拆成（取值范围+量词）这样的组合

根据QQ号的验证规则，我们可以拆成两个（取值范围+量词）的组合。分别是：

1.（1~9的数字，1个）；2.（0~9的数字，4~14个）
复制代码

第二步：根据正则表达式规则翻译（取值范围+量词）

1.（1~9的数字，1个）     =>   [1-9]{1}或者[1-9]
2.（0~9的数字，4~14个）  =>   [0-9]{4,14}
复制代码

第三步：将翻译好的（取值范围+量词）组合进行拼接

初学者可能在拼接这一步会犯一个错误，可能会组合拼接成这个样子/[1-9]{1}[0-9]{4,14}/或者简写翻译成/[1-9] [0-9]{4,14}/这些都不对的。调用test()方法的时候，你会发现只要一段字符串中有符合正则表达式的字符串片段都会返回true，童鞋们可以试一下。

var reg=/[1-9][0-9]{4,14}/;
alert(reg.test('0589563'));
//true，虽然有0，但是'589563'片段符合
alert(reg.test('168876726736788999'));
//true,这个字符串长度超出15位，达到18位，但是有符合的字符串片段
复制代码

正确的写法应该是这样的：

/^[1-9][0-9]{4,14}$/（用^和$指定起止位置）
复制代码

下面我们看一个复杂点的例子：

验证国内电话号码 0555-6581752、021-86128488

第一步：拆成（取值范围+量词）这样的组合

这里会拆成两个大组合：

1、（数字0，1个）+（数字0~9，3个）+("-"，1个)+（数字1~9，1个）+（数0~9，6个）
2、（数字0，1个）+（数字0~9，2个）+("-"，1个)+（数字1~9，1个）+（数0~9，7个）
复制代码

第二步：根据正则表达式规则翻译（取值范围+量词）

1、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})
2、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})
复制代码

第三步：将翻译好的（取值范围+量词）组合进行拼接

这里我们先拼接一个大组合，然后再将大组合拼接起来

1、0[0-9]{3}-[1-9][0-9]{6}
2、0[0-9]{2}-[1-9][0-9]{7}
复制代码

正则表达式拓展 除了RegExp对象提供方法之外，String对象也提供了四个方法来使用正则表达式。

1.match() 在字符串内检索指定的值,匹配成功返回存放匹配结果的数组，否则返回null。这里需要注意的一点事，如果没有设置全局匹配g，返回的数组只存第一个成功匹配的值。

var reg1=/javascript/i;
var reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.match(reg1));
//['Javascript']
console.log('hello Javascript Javascript Javascript'.match(reg2));
//['Javascript','Javascript','Javascript']
复制代码

2.search() 在字符串内检索指定的值,匹配成功返回第一个匹配成功的字符串片段开始的位置，否则返回-1。

var reg=/javascript/i;
console.log('hello Javascript Javascript Javascript'.search(reg));//6
复制代码

3.replace() 替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配g的时候，只替换第一个匹配成功的字符串片段。

var reg1=/javascript/i;
var reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js
复制代码

4.split() 把一个字符串分割成字符串数组。

var reg=/1[2,3]8/;
console.log('hello128Javascript138Javascript178Javascript'.split(reg));
//['hello','Javascript','Javascript178Javascript']
复制代码

结语

正则表达式并不难，懂了其中的套路之后，一切都变得简单了。在最后我想说点题外话，网上不乏一些文章记录一些常用的正则表达式，然后新手前端在使用正则表达式的时候都会直接拿来就用。在这里我想说一下自己的看法，这些所谓记录常用的正则表达式文章并非完全都是正确的，有不少都是错的。所以同学们在日后使用的过程尽量自己写正则表达式，实在不会了可以去参考一下，但真的不要照搬下来。咱不说这种会影响自己成长的话，咱就说你抄的一定都是对的吗？多思考一下，总没有坏处。

这里推荐一下我的前端学习交流群：784783012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

转载于:https://juejin.im/post/5bc9ec37e51d451e13255359