js之正则表达式使用方法

Mark in HangZhou

2019-01-24

导语：今天说一下有关js中正则表达式的一些知识点。正则表达式主要是在表单输入验证，以及一些文本字符处理中特表好用。

# 正则表达式的概念

正则表达式是一个描述字符模式的对象，最早是诞生于Perl语言中，JavaScript继承了Perl语言的正则表达式的一些特性，方法和概念。在JavaScript中，有一个类RegExp表示正则表达式，而且String和RegExp都有对应的模式匹配和文本检索、替换的函数。

# 创建正则表达式

创建正则表达式可以使用两种方法，这是js对象一以贯之的方法，就是new实例化一个对象，或者直接写正则表达式。

new运算符创建

通过new运算符来实例化一个RegExp对象。

语法表达：new RegExp(code is here);

例如：创建一个验证数字的正则表达式。

//注意：这里使用test()方法来检测是否符合
var numReg = new RegExp('a');
var num = 'a123';
console.log(numReg.test(num)); // true;

1
2
3
4

直接量创建

直接量就是直接赋值，创建一个表达式。这个看着更加简洁好用，非常灵活。

例如：还是上面那个例子。

var numReg = /a/;
var num = 'a123';
console.log(numReg.test(num)); // true;

1
2
3

# 正则表达式的匹配规则

# 字符类

之前都是直接写正则表达式，例如/abc/,只是匹配任意一个符合abc的字符，而如果想要匹配多个字符，就可以使用字符类来实现。

字符类是使用方括号[]，中间可以随意写一些匹配规则。

例如：我们要检测文本中是否包含0-9中的任意数字，就可以使用字符类。这里我们使用直接量比较方便。

var numReg = /[0-9]/;
var num = 'a123';
var str = 'hello';
console.log(numReg.test(num)); // true;
console.log(numReg.test(str)); // false;

1
2
3
4
5

补充：其他字符类

序号|字符|说明--|---|---| 1|[…]|括号内的任意字符 2|[^…]|不再括号内的任意字符 3|.]|除换行符和Unicode行终止符之外的任意字符 4|\w|任何ASCII(注释1)单字字符，等于[a-zA-Z0-9_] 5|\W|任何非ASCII(注释1)单字字符，等于[^a-zA-Z0-9_] 6|\s|任何Unicode空白符 7|\S|任何非Unicode空白符的字符 8|\d|任何ASCII数字，等于[0-9] 9|\D|任何非ASCII数字，等于[^0-9] 10|[\b]|退格直接量(特殊)

注释1：ASCII指的是美国信息交换标准代码。

以上就是一些字符类的说明，下面使用几个练习一下。

例如：一个检测是否包含数字、字母和下划线以及非空白符的正则表达式。

var patten = /\w\s/;
var str = 'abc 123';
console.log(patten.test(str)); // true

1
2
3

# 避免重复定义

上面的字符类，只能匹配单个，如果我们要匹配多个符合的字符，不能一直重复写吧，像这样/\d\d\d/,那这样就不高效了。

为了解决上面的烦恼，正则表达式用一些方法来表示这种情况，下面是一些列表。

序号|字符|说明--|---|--- 1|{n,m}|表示匹配前一项至少n次，不能超过m次 2|{n,}|表示匹配前一项n次，或者更多次 3|{n}|表示匹配前一项正好n次 4|?|表示匹配前一项0次或者1次，等于{0,1} 5|+|表示匹配前一项1次或者多次，等于{1,} 6|*|表示匹配前一项0次或者多次，等于{0,}

举个例子：匹配2到4位数字。

var numReg = /\d{2,4}/;
var num = '123';
console.log(numReg.test(num)); // true;

1
2
3

# 用于选择的字符

正则表达式中有用于选择的字符|。这个是从左到右进行匹配，一旦左边符合就返回结果。

例如:匹配是带有ab或者cd或者ef的正则表达式。

var numReg = /ab|cd|ef/;
var num = 'ab123';
console.log(numReg.test(num)); // true;

1
2
3

# 用于分组的字符

正则表达式中有用于分组的字符()。

知识点：正则中括号的含义:

把单独的项目组合成子表达式，例如：/java(script)?/匹配的是字符串java,后面可以有script，也可以没有。

在完整的模式中定义子模式,例如：/[a-z]+(\d+)/,匹配的是尾部是否是数字。

例如:匹配是带有ab或者cd或者ef的正则表达式。

var numReg = /ab|cd|ef/;
var num = 'ab123';
console.log(numReg.test(num)); // true;

1
2
3

# 用于引用的字符

括号()也可以表示引用，允许在同一个正则表达式中的后面部分引用前面的子表达式。

例如：开始和结束的引号相匹配。\1引用的是第一个带括号的子表达式。

var quoat = /(['"])[^'"]*\1/;
console.log(quoat.test('1"2"3')); // true

1
2

补充：正则表达式的选择、分组和引用字符

序号|字符|说明--|---|--- 1|竖杠|选择，匹配的是该符号左边或者右边的子表达式 2|(…)|分组，组合，将一个项目组合成一个独立的单元，还可以供后面的引用使用 3|(?:…)|只组合，把项目组合到一个单元，但是不记与该组匹配的字符 4|\n|和第n个分组第一次匹配的字符相匹配

# 匹配指定的位置

先来看一个列表，里面罗列了需要用到的锚字符。

序号|字符|说明--|---|--- 1|^|匹配字符串的开头；如果是匹配多行，那就是匹配一行的开头 2|$|匹配字符串的结尾；如果是匹配多行，那就是匹配一行的结尾 3|\b|匹配一个词语的边界，例如在\w和\W之间的位置，注意：\b是退格符 4|\B|匹配一个非词语的边界 5|(?=p)|正前向声明，要求接下来的字符都有和模式p匹配，但是不包括匹配中的那些字符 6|(?!p)|反前向声明，要求接下来的字符都不和模式p匹配

例如：匹配一个用户名，以字母开头，数字结尾的正则表达式。

var nameReg = /^[a-zA-Z]\d$/;
var name = 'a1';
console.log(111,nameReg.test(name)); // true;

1
2
3

# 标志

正则表达式的标志说明了高级模式里面匹配的规则。和上面的正则表达式的语法不同的是标志出现在/符合之外说明的，位于第二个\之后。

正则表达式中的标志列表

序号|字符|说明--|---|--- 1|g|模式匹配应该是全局的，应该找出被检索字符串所有的匹配。 2|i|模式匹配应该是不区分大小写的匹配。 3|m|多行模式，^匹配一行的开头和字符串的开头，$匹配一行的结尾和字符串的结尾

例如：匹配全局的a

var patten = /a/g;
var str = 'an apple';
console.log(patten.test(str)); // true

1
2
3

# String模式匹配的方法

# search()方法

这个方法的参数是正则表达式，返回一个与之匹配的子串的位置；如果找不到就返回-1，如果参数不是正则表达式，会转换成正则表达式进行匹配。

注意：该方法不支持全局检索，只要找到便会返回结果。

例如：匹配一个查找a的位置的正则表达式。

var patten = /a/i;
var str = 'apple';
console.log(str.search(patten)); // 0

1
2
3

# replace()方法

这个方法的第一个参数是正则表达式，第二个参数是要替换的字符串，也可以是一个函数。用于把匹配到的字符串替换成别的内容。

例如：把小写字母a替换成大写字母*。

var patten = /a/g;
var str = 'apple';
console.log(str.replace(patten,"*")); // *pple

1
2
3

# match()方法

这个是比较常用的String正则表达式方法，参数只有一个就是正则表达式。把匹配到的内容以数组的形式返回。

例如：解析一个url地址

var urlReg = /(\w+):\/\/([\w.]+)\/(\S*)\/(\d*)/;
var text = 'http://www.abc.com/post/1';
console.log(text.match(urlReg)); // ["http://www.abc.com/post/1", "http", "www.abc.com", "post", "1", index: 0, input: "http://www.abc.com/post/1", groups: undefined]

1
2
3

# split()方法

这个也是比较常用的String正则表达式方法，参数只有一个就是正则表达式或者一个字符。把字符串分解为一个子串数组，使用的分隔符就是它的参数。

例如：

var patten = /\s/;
var num = '123,456,789';
var num1 = '123 456 789';
console.log(num.split(',')); // ["123", "456", "789"]
console.log(num1.split(patten)); //  ["123", "456", "789"]

1
2
3
4
5

RegExp对象的属性和方法 Javascript中的正则表达式是用RegExp对象来表示的，除了构造函数RegExp()，这个对象可以接受两个参数，一个是正则表达式的字符串，另一个是正则表达式的标志。

例如：new RegExp("\\d{2}","g");

# RegExp对象的属性

每个RegExp对象都有五个属性。包括以下：

source是一个只读字符串，存放的是正则表达式的文本。
global是一个只读的布尔值，是否具有标志g
ignoreCase是一个只读的布尔值，是否具有标志i
multiline是一个只读的布尔值，是否具有标志m
lastIndex是一个可读写的整数。对于具有标志g的模式，这个属性存储在字符串中下一次可以检索的位置，由方法exec()和test()使用

# exec()方法

该方法是对于一个指定的字符串进行匹配，把匹配到的内容返回一个的数组。

例如：

var patten = /a/i;
var str = 'apple';
console.log(patten.exec(str)); // ["a", index: 0, input: "apple", groups: undefined]

1
2
3

# test()方法

该方法和exec()方法类似，但是不只限于字符串，其他字符也支持；而且它返回的是一个布尔值，表示是否符合正则表达式的匹配规则。

var patten = /a/i;
var str = 'apple';
console.log(patten.test(str)); // true

1
2
3

# 案例

检验用户名为中文的

/^[\u4e00-\u9fa5]{0,}$/

检验密码强度

/^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$/

密码的强度必须是包含大小写字母和数字的组合不能使用特殊字符,长度在8-10之间

检测电子邮箱地址

/[\\w!#$%&'*+/=?^_{|}~-]+(?:\.[\w!#$%&’+/=?^_{|}~-]+)@(?:\w?.)+\w?/`

检测手机号的

/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/

检测身份证的

15位的:/^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/

18位的:/^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/

检验金额的

精确到2位小数。

/^[0-9]+(.[0-9]{2})?$/

判断ie版本

/^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$/

校验IP-v4地址

/\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/

提取url链接

/^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/

# 写在最后

这个JavaScript中的正则表达式RegExp对象就讲到到这里，内容还是挺多的，需要慢慢吸收转化，可以多几个例子练习。

本文永久链接是：js之正则表达式使用方法

如需转载，请注明《js之正则表达式使用方法》转自，原作者Mark