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

Posted 2021-05-02 烟雨风飘渺

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

验证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对象自带的属性，并不复杂，这里我就列一下，不展开说了。

属性	描述
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:

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp上面说的很清楚了，我就不贴出来了。我就阐述一下我写正则表达式的思路。

其实正则表达式都可以拆成一个或多个（取值范围+量词）这样的组合。针对每个组合我们根据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}

最后拼接为：

/(^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']

结语

正则表达式并不难，懂了其中的套路之后，一切都变得简单了。在最后我想说点题外话，网上不乏一些文章记录一些常用的正则表达式，然后新手前端在使用正则表达式的时候都会直接拿来就用。

在这里我想说一下自己的看法，这些所谓记录常用的正则表达式文章并非完全都是正确的，有不少都是错的。所以同学们在日后使用的过程中尽量自己写正则表达式，实在不会了可以去参考一下，但真的不要照搬下来。

咱不说这种会影响自己成长的话，咱就说你抄的一定都是对的吗？多思考一下，总没有坏处。

文章来源：

https://segmentfault.com/a/1190000009324194?utm_source=tuicool&utm_medium=referral

推荐阅读

     1.

     2.

     3.[

     4.

    5.[第二

     6.

    7.

 

  10.