JS正则表达式入门，看这篇就够了

前言

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

验证QQ号的合法性

/**
*合法qq号规则：一、5-15位；二、全是数字；三、不以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对象自带的属性，并不复杂，这里我就列一下，不展开说了。

属性	描述
global	RegExp 对象是否具备标志 g。
ignoreCase	RegExp 对象是否具备标志 i。
lastIndex	一个整数，标示开始下一次匹配的字符位置。
multiline	RegExp 对象是否具备标志 m。
source	正则表达式的源文本。

第二步：调用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']

如何写一个正则表达式

第一次接触正则表达式同窗们，可能被这个正则表达式的规则弄得迷迷糊糊的，根本无从下手。小编我第一次学这个正则表达式的时候，也是稀里糊涂，什么元字符、量词彻底不知道什么东西，云里雾里的。后面小编细细研究了一下，总结一套方法，但愿能够帮助你们。

关于正则表达式书写规则，可查看w3school，上面说的很清楚了，我就不贴出来了。我就阐述一下我写正则表达式的思路。

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

验证QQ号的合法性

合法qq号规则：一、5-15位；二、全是数字；三、不以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-658175二、021-86128488

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

这里会拆成两个大组合：

一、（数字0，1个）+（数字0~9，3个）+("-"，1个)+（数字1~9，1个）+（数0~9，6个）
二、（数字0，1个）+（数字0~9，2个）+("-"，1个)+（数字1~9，1个）+（数0~9，7个）

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

一、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})
二、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})

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

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

一、0[0-9]{3}-[1-9][0-9]{6}
二、0[0-9]{2}-[1-9][0-9]{7}

最后拼接为：

/(^0[0-9]{3}-[1-9][0-9]{6}$)|(^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']

结语

正则表达式并不难，懂了其中的套路以后，一切都变得简单了。在最后我想说点题外话，网上不乏一些文章记录一些经常使用的正则表达式，而后新手前端在使用正则表达式的时候都会直接拿来就用。在这里我想说一下本身的见解，这些所谓记录经常使用的正则表达式文章并不是彻底都是正确的，有很多都是错的。因此同窗们在往后使用的过程尽可能本身写正则表达式，实在不会了能够去参考一下，但真的不要照搬下来。咱不说这种会影响本身成长的话，咱就说你抄的必定都是对的吗？多思考一下，总没有坏处。