[JavaScript知识库]JavaScript正则表达式

正则表达式是用来匹配某个字符、某个字符串的字符搜索模式，只要符合正则表达式中的语法，那么该字符串就可以成功匹配。

创建

字面量创建

需要用 / 来包含正则表达式的内容，最后的 / 可以加上修饰符

// 创建模板 /正则表达式/修饰符; 修饰符可以忽略
var reg = /RegExp/;  // 不加修饰符
var reg = /RegExp/ig; // 加修饰符

构造函数创建

使用new然后传入正则表达式的内容，修饰符

// 创建模板 new RegExp("正则表达式","修饰符"); 修饰符可以忽略
var reg2 = new RegExp('RegExp');  // 不加修饰符
var reg2 = new RegExp('RegExp','ig');  // 加修饰符

修饰符

在上面提到了修饰符，那么修饰符有哪些？

匹配忽略大小写? i ? 记忆单词ignoreCase ????

匹配时全局匹配? g ? 记忆单词global

匹配时多行匹配? m ? 记忆单词multiline

单纯的记忆一个字符难懂意思，结合单词来记忆，更容易加深印象

方法

学会了创建一个正则表达式，还有按照修饰符的作用进行匹配，接下来就要看，应该用什么方法去匹配一个字符串了

exec()

如果字符串和正则表达式相匹配，返回一个数组：

['匹配的内容'，index: 匹配到字符的起始位置，input: '要匹配的字符串'，groups: undefined]

反之返回 null

不加修饰符的exec

// 使用方式：创建的正则表达式变量.exec('要匹配的字符串')

// 不加修饰符
var reg = /RegExp/;
console.log(reg.exec('java REGEXP JavaScript RegExp HTML RegExp'));  
// 执行结果 不能匹配第二个全大写的单词,能匹配到第四个单词的RegExp
//['RegExp',index: 23,input:'java REGEXP JavaScript RegExp HTML RegExp', groups: undefined]


// 此时在执行一条,理想的应该是会接着下去匹配,即匹配最后一个单词
console.log(reg.exec('java REGEXP JavaScript RegExp HTML RegExp')); 
// 但是结果还是和第一次执行的一样,还是会匹配到第四个单词

加修饰符的exec()

lastIndex是正则表达式开始检索的位置，在添加修饰符g后，正则表达式会维护lastIndex，每次检索后都会更新lastIndex的值，lastIndex值是匹配字符的后一位

如果没有添加g修饰符，那么lastIndex会一直是0，不会维护更新

// 加上修饰符i,忽略大小写,继续执行刚刚的字符串
var reg = /RegExp/i;
console.log(reg.exec('java REGEXP JavaScript RegExp HTML RegExp'));
console.log(reg.lastIndex); // 0
console.log(reg.exec('java REGEXP JavaScript RegExp HTML RegExp'));
console.log(reg.lastIndex); // 0
// exec执行结果 两次的结果都一样 可以匹配到第二个单词REGEXP
// ['REGEXP',index: 5,input:'java REGEXP JavaScript RegExp HTML RegExp',groups: undefined]


// 加上修饰符g,全局匹配,会接着匹配到的位置继续匹配
var reg = /RegExp/ig;
console.log(reg.exec('java REGEXP JavaScript RegExp HTML RegExp'));
console.log(reg.lastIndex); // 11
console.log(reg.exec('java REGEXP JavaScript RegExp HTML RegExp')); 
console.log(reg.lastIndex);  // 29

加上修饰符ig后，执行两次的结果,可以看到相比于不加修饰符的,得到的数组的第一位、第二位是发生了变化，这时和我们就想的一样了，他会接着下去匹配，而不是又重新开始匹配。

利用for来匹配多次

上面例子中的字符串不是很长，可以看到有3个RegExp，所以要匹配到所有的RegExp就要执行三次exec()。但是如果字符串很长，有数不清的"RegExp"，那就需要用到for循环来自动匹配了。

var reg = /RegExp/ig;
var str = 'java REGEXP JavaScript RegExp HTML RegExp';
while(1){
  var result = reg.exec(str);
  // 当检索字符串到最后一位,没有检索到值,返回null时,终止循环
  if(result == null){
    break;
  }
  console.log(result[0],result["index"],reg.lastIndex);
}

此时就可以输出匹配到的结果字符，还有他们的开始位置，结束位置，当然这样做需要开启g全局模式，不然就会一直输出匹配到的第一个字符，而且循环不会停止！

注意如果不声明一个变量来接受匹配的正则表达式，那么如果想在while中打印reg.exec(str)的结果，此时他并不是第一次匹配的结果，是第二次匹配的结果，因为你又执行了一次reg.exec(str)，声明变量来接受直接打印变量，就是第一次的匹配结果。

test

用来测试字符串中是否有可以匹配到正则表达式的字符串，如果有返回true，否则返回false

var str = 'java REGEXP JavaScript RegExp HTML RegExp';
// i忽略大小写前提,检索字符串str是否有JAVA
reg1 = /JAVA/i;
console.log(reg1.test(str));// true 
// 检索字符串是否有regexp
reg2 = /regexp/;
console.log(reg2.test(str));// false 没有小写的regexp
// 检索str是否有css
reg3 = /css/g; 
console.log(reg3.test(str));// false 没有css

正则表达式匹配的方法就是详细的匹配信息exec、检测是否存在test，构造函数的和字面量创建的差不多，就是传入表达式、修饰符的不同，使用test、exec的方法都一致。

表达式语法

字符类

. 字符匹配除了换行符、回车符之外的所有单个字符??????? 等效于[^\n\r]

\d 匹配数字字符，即0-9都可以匹配??????? ?? 等效于[0-9]

\D 和\d相反，不匹配数字字符??????????????????? 等效于[^0-9],关于^在后面的内容中

\w 匹配匹配包括下划线的任何单个字符 ??? 等效于[0-9a-zA-Z_]

\W 和\w相反，不匹配\w的字符?????????????????? 等效于[^0-9a-zA-Z_]

\s 匹配任何Unicode空白字符 ???????????????????? 等效于[\f\t\n\r] ????

\S 和\s相反，不匹配\s字符????????????????????????? 等效于[^\f\t\n\r] ?

结合单词记忆

d 记忆单词 digit数字????????s 记忆单词 space空白????????w 记忆单词 word单词

字符集合

[] 字符集合，匹配集合中的任意一个字符，可以使用"-"指定一个范围，

比如[0-9]表示：数字0到9的范围都可以匹配到

[a-z]表示：字母a到z之间的字母都可以匹配

边界符

^ 匹配开始 ，加上^必须以他开头。

????????如果^放在[]字符集中，那就是取反的意思，比如/[^1-3]/匹配的是除了1，2，3的数

$ 匹配结尾 ，加上$必须以他结尾

量字符

\o --> Null????????\t --->制表符??????? \n--->换行符 ??????? \v--->垂直制表符

\f --->换页符 ????????\r ---> 回车符

数量词

* ??????? 要匹配的字符 >=0

+ ?????? 要匹配的字符 >=1

？?????? 要匹配的字符=0 or 要匹配的字符=1

{n} ???? 要匹配的字符必须出现n次

{n,} ??? 要匹配的字符>=n

{n,m}? 要匹配的字符大于等于m，小于等于n

看一下数量词{n,m}的案例

var reg = /\d{3,6}/
console.log(reg.exec('123456789'));
// 结果是 [ '123456', index: 0, input: '123456789', groups: undefined ]
// 匹配了6个字符

在上面的案例中，我们给的字符个数范围是3-6，匹配到了6位字符，因为正则表达式是默认贪婪模式（尽可能多的匹配字符），所以它会按照符合条件的字符尽量多的去匹配。

也可以使用非贪婪模式，在数量词{3，6}后面加上？就可以变成非贪婪模式，此时就会匹配的更少的字符。

var reg = /\d{3,6}?/
console.log(reg.exec('123456789'));
// 结果是 [ '123', index: 0, input: '123456789', groups: undefined ]
// 匹配三个字符

案例

简答用户名(要求：数字、字母、下画线，6-16位)

var id = /\w{6,16}/
console.log(id.test('ax123456')); // true

简单邮箱(数字、字母开头，以.com结尾)

var email = /^([0-9a-zA-Z]){3,}@([a-z]){2,}.com$/g;
console.log(email.test('xin@gmail.com')); // true

简单的手机号（1开头，第二位是3、4、5、7、8，数字结尾，总共11位）

var phone = /^1[34578]\d{9}$/
console.log(phone.test('13077770149'));// true

匹配密码，必须包含至少一个大写、小写、数字、特殊字符(!,@,#,%,&),且大于6位 。如果要写这个题目，只用上面的内容就有点不够了，这个密码他不规定开头结尾，只要是大小写数字以及特殊字符组合成的6位数字。

前瞻表达式

如果利用前瞻表达式来写上面的密码匹配，就会变得简单一些

正向前瞻??????? (?=exp)????????匹配后面满足表达式exp的位置

负向前瞻????? （?!exp）????? 匹配后面不满足表达式exp的位置

正向前瞻例子

进行了两次匹配，找到的字符串位置是第6、第15位，就是 h 后面紧跟着 i 的 h 字符，hello中的h并没有匹配到，因为他并没有符合前瞻的条件，h后面要带有i

str = 'hello hi hello hi';
var reg = /h(?=i)/g;
console.log(reg.exec(str));
// [ 'h', index: 6, input: 'hello hi hello hi', groups: undefined ]
console.log(reg.exec(str));
// [ 'h', index: 15, input: 'hello hi hello hi', groups: undefined ]

负向前瞻例子

把正向前瞻变成了负向前瞻，在字符串中多加了一个'hh'，此时负向前瞻的意思是 h 后面不能紧跟着 i ，所有不紧跟着 i 的 h 都可以匹配成功，所以 hello 中的 h ，hh中的 h 可以被成功匹配。

str = 'hello hi hello hi hh';
var reg = /h(?!i)/g;
console.log(reg.exec(str));
// 结果 [ 'h', index: 0, input: 'hello hi hello hi', groups: undefined ]    
console.log(reg.exec(str));
// 结果 [ 'h', index: 9, input: 'hello hi hello hi', groups: undefined ]
console.log(reg.exec(str));
// 结果[ 'h', index: 18, input: 'hello hi hello hi hh', groups: undefined ]

现在我们再来看刚刚的密码题

?匹配密码，必须包含至少一个大写、小写、数字、特殊字符(!,@,#,%,&),且大于6位。

//   这段利用前瞻表达式,第一个意思是有大写字母,而且可以有其他字符  ^...$这段是精准匹配
 var pwd = /(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#%&.])^[A-Za-z\d!@#%&.]{6,}$/;
// 有了精准匹配才可以知道你具体要匹配的字符串,如果没有精准匹配,则不能成功匹配
console.log(pwd.test('aA[x1&688$'));// false
console.log(pwd.test('123Qwe@'));// true
console.log(pwd.test('ss123.weJ@'));// true
console.log(pwd.test('.123weJ@'));// true

如有错误，麻烦支出，感谢！