🔍《由浅入深》带你走进轻松驾驭正则表达式的世界

相信大家都比较头疼正则表达式，之所以想写这篇文章是因为我发现在学习一些其他比较深的一些知识的时候总是避免不了要使用正则表达式，每次一看到就是一脸懵然后就没有看下去的欲望了......所以学习知识还得一步步来，把每一个知识点学透，每一步走好，这样问题处理起来就会变得游刃有余，这篇文章主要先过一遍正则表达式的一些基础知识，所以说学吧，学不完的~~~ gogogo！

首先先了解一下关于正则表达式中的概念。

转义

转义的意思就是让字符不再拥有本身原有的功能，转义分为转义符号和转义字符。

转义符号

转义符号用\来表示。

转义字符

转义字符就是在转义符号的后面加上一个字符，例如：\r \n \t

我们知道在JS中两个双引号之间不能再使用双引号，两个单引号之间不能再使用单引号，它们必须是成对出现，这是由JS机制决定的，比如：

var str = "我要成为一个"很厉害"的程序员";

此时JS就会抛出Uncaught SyntaxError的语法错误，js会先解析正常的语法，在刚才报语法错误的字符串中，因为中间有两个字符串，所以js会认为前后各有一个成对的字符串，中间没有加引号的当成了一个变量，语法分析完毕之后会进行文本输出，然后发现变量和字符串中间没有加号继而报语法错误，Javascript对字符串和变量是先进行语法解释再进行文本输出 。这就是报出语法错误的根本原因。所以在JS中要进行字符串的拼接必须使用+号进行拼接。再来看下面这段代码：

var n ='很厉害';
var str = "我要成为一个" + n + "的程序员";

这样才能正确输出。

那么如果说现在要求这句话输出后很厉害这几个字要加上引号输出，那么此时就可以使用转移符号对其进行转义。

var str = "我要成为一个\"很厉害\"的程序员";

这里我们通过使用\符号对双引号进行了转义，那么它也就失去了原来的意义。

下面再来说几个常见的转义字符：

var str = "我要成为一个\n很厉害的程序员";
document.write(str);

这段代码在浏览器的控制台中可以显示换行效果，但如果在页面中显示就不会有换行的效果，这是因为html并不识别这些转义字符。其实像这些转义字符都是在编辑的时候（可编辑的系统）会用到的，像平时开发用到的VSCode开发工具，我们每换一次行或敲一下回车系统都会在每一行的最后加上\n或\r，那为什么在控制台也会有效果呢？因为控制台是一个日志平台，是一个可以显示、编辑的系统（word文档）。但html文件是纯文本文件，经过编译以后直接显示出文本，而并不是一个编辑系统，所以无法识别上面那些转义字符。

认识正则

声明一个正则表达式有两种方式，一种是实例化对象一种是对象字面量。

实例化对象

实例化对象的方式需要使用new关键字：

var reg = new RegExp(pattern,modifiers);

RegExp是regular expression的简写，接收两个参数，第一个是要匹配的正则表达式，第二个是修饰符，比如下面这段代码想要匹配字符串中的text：

var str = "This is a text";
var reg = new RegExp('text');
console.log(reg.test(str));// true

test方法是正则里面的一个用于搜索字符串指定的值，根据结果并返回真或假。

除此之外还有更复杂的场景，比如想要对字符串进行更加精准的操作，大小写的区分(大小写默认是敏感的)以及如何全局查找等，这时候就需要用到正则表达式的第二个参数------修饰符。

修饰符对应分别有三个i(ignore)、g(global) 、m(multi-line)以此对应忽略大小写、全局查找以及多行匹配。

 var reg = new RegExp('this', 'ig');
 var str = "This is a text,this is a text";
 console.log(str.match(reg));// ['This','this']
 
 // 多行匹配
 var reg = new RegExp('this', 'gm');
 var str = "This is a text,\nthis is a text";
 console.log(str.match(reg));// ['this']

比如想要把以上字符串中的this全部匹配出来就可以加上i g两个修饰符，其中match方法是字符串中的一个方法，用于在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

对象字面量

对象字面量的方式相对简洁一些，也是我们平时用的比较多的一种写法，使用//语法并且修饰符不需要再添加引号。

  var reg =/this/ig;
  var str='This is a text,this is a text';
  console.log(str.match(reg));

两种声明方式的区别

但是当遇到有变量的情况的时候就需要使用实例化对象比较合适了。

  var v = 'this';
  var str = 'this is a text';
  var reg = /v/ig;
  console.log(str.match(reg));// null

因为此时的v已经不再是一个变量了所以会返回null，改用实例化对象的方式来试一下：

  var v = 'this';
  var str = 'this is a text';
  var reg = new RegExp(v);
  console.log(str.match(reg));// ['this']

此时可以进行完美匹配。

表达式

[]语法用于定义一个字符集，表示匹配方括号内任意一个字符（可选字符），有几个[]就代表要匹配几位。

单个字符匹配

下面先进行[]中对单个字符的匹配，先随便定义一个字符串：

var str = "abclkmfewabcad";

要匹配的规则为：

var reg = /[abc][dl]/g;

上面定义的正则意思为第一个字符必须是abc三者之间的某一个，第二个字符必须是dl两者之间的某一个，所以匹配出来的结果为['cl','ad']。

下面来解释一下这中间的匹配过程，首先会对字符串中的每个字符依次进行匹配，第一个字符a符合匹配规则，但是第二个字符b并不符合第二个匹配规则所以前两个字符ab被pass，然后会接着从b开始匹配，b符合第一个匹配规则但是第三个字符c不符合第二个匹配规则，所以bc被pass，然后从第三个字符c开始，c符合第一个匹配规则，第四个字符l也符合第二个匹配规则所以cl最终挥别匹配出来。然后注意此时正则会直接跳过第四个字符l直接从k开始匹配，因为正则不会对已匹配成功的字符再次进行匹配，以此类推最终才会输出['cl','ad']。

相信大家都已经理解了，小试牛刀一下吧

var reg=/[wx][xy][z]/g;
var str='wxyz';
console.log(str.match(reg));

字符范围匹配

如果想要某个字符可以是英文字母a-z之间任意一个字母的话，我们可能会写出这样的规则[abcdefg...]这时就可以使用[a-z]来表示范围匹配。还有[A-Z]大写的A-Z、[0-9]表示匹配所有数字。

  var reg = /[a-z][A-Z][0-9]/g;
  var str = 'kjsdb32783ASDshefD3WFwek213j';
  console.log(str.match(reg)); // ['fD3']

以上正则表示要匹配三个字符分别是第一个是小写a-z中的任意一位，第二个字符是大写A-Z中的任意一位，第三个字符是0-9中的任意一位。此外这样的写法也是可以的：

  var reg = /[a-zA-Z0-9][A-Z][0-9]/g;
  var reg = /[A-z][A-Z][0-9]/g;
  // 注意一下写法会报错，只能是大写字母在前面
  var reg = /[a-Z]/g;

反向字符集

在[]中加上^表示匹配不在该字符集中的字符。

  var reg = /[^abc][a-z]/g;
  var str = 'abclkmfewabcad';
  console.log(str.match(reg));

上面正则表示匹配第一个字符不是以a/b/c开头的并且第二个字符是在a-z之间的所有字符。

查找指定字符

有时候我们想要查找一字符串中的某一个字符或多个字符可以使用(字符1|字符2)来进行查找，同时也可以连续查找。

  var reg = /(red|blue|green)/g
  var str = 'red|blusse|gsreenuhjev323e'
  console.log(str.match(reg)) // ['red']

元字符

元字符相当于是正则中的拥有特殊含义的字符。

首先是\w表示要查找的字符串中是否有数字、字母以及下划线。

  var reg = /\wyu/g
  var str = 'ksjac21372u3b1yug2uhjev323e'
  console.log(str.match(reg)) // ['1yu']

\W可以理解为非\w，也就是匹配非数字、字母以及下划线。

  var reg = /\W/g
  var str = 'gsreen$$$uhjev323e'
  console.log(str.match(reg)) // ['$$$']

\d表示查找字符串中的数字(digit)

  var reg = /\d/g
  var str = 'gsreen$$$uhjev323e'
  console.log(str.match(reg)) // ['3','2','3']

\D就是匹配非数字字符啦！

篇幅较长啦，以上就是关于正则表达式的部分基础知识，我希望还会有下个章节哈哈哈^_^

热爱，可抵岁月漫长...