JavaScript正则表达式、传递字符串生成正则表达式

正则表达式的两种创建方式

（1）字面量

（2）RegExp构造函数

构造函数内传入字符串，

注意：双\  代表 \，第二个参数是匹配标志

var reg = new RegExp("[a]\\w(\\d)\\1");
console.log(reg);

字符的用法

1、反斜杠 \

（1）\w \d \s \b

\w：单字字符 字母数字下划线  ===  [a-Z0-9_]     \W： 非单字字符 等价于 [^A-Za-z0-9_]

是否发现：exec方法的执行结果有点像Generator对象，exec方法下面会具体的探讨

var str = "aB1_@";
var reg = /\w/g
console.log(reg.exec(str))//["a", index: 0, input: "aB1_@", groups: undefined]
console.log(reg.exec(str))//["B", index: 1, input: "aB1_@", groups: undefined]
console.log(reg.exec(str))//["1", index: 2, input: "aB1_@", groups: undefined]
console.log(reg.exec(str))//["1", index: 2, input: "aB1_@", groups: undefined]
console.log(reg.exec(str))//null

 \d： 数字 === [0-9]    \D： 非数字  === [^0-9]

提醒：此处的数字，必须提醒一下，数字是指字符串中的数字。

正则表达式的方法可以传入字符串或数字，其实会把数字转为字符串；但是字符串的方法，必须有字符串进行调用。

正则表达式匹配的是字符串中的字符、数字、符号等。

var str = "123" || 123;
var reg = /\d+/;
console.log(reg.exec(str));//["123", index: 0, input: "123", groups: undefined]

\s： 空白字符  包括：空格、\f换页、\n换行、\r回车、\t水平制表符、\v垂直制表符   \S： 非空白字符  

var str = "1 a";
var reg = /\d\s\w/;
console.log(reg.exec(str));//["1 a", index: 0, input: "1 a", groups: undefined]

注意：除了空格外，其他几个都是通过\n\f\r\t\v这种写法才可以在代码中表现出来。

var str = "1\na";
var reg = /\d\s\w/;
console.log(reg.exec(str));//["1↵a", index: 0, input: "1↵a", groups: undefined]

 \b： 单词边界  \B： 非单词边界 

注意：单词编辑\b，要么修饰前面的词，要么修饰后面的词。

比如下面例子：\d数字后面是有边界的；\s的前面是有边界的。

var str = "1 a";
var reg = /\d\b\b\s\w/;
console.log(reg.exec(str));//["1 a", index: 0, input: "1 a", groups: undefined]

（2）转义字符（Escape）

所有的特殊字符，想要匹配到他们，都需要通过反斜杠进行转义。等等

\ * ^ $ ! ? . + ( ) [ ] {  } |

 （3）子表达式

捕获括号，匹配括号内容，并记住匹配项。可以通过子表达式代替匹配到的内容。

var str = "12123";
var reg = /(\d)(\d)\1\2/
console.log(reg.exec(str))//["1212", "1", "2", index: 0, input: "12123", groups: undefined]

 特别注意：子表达式代表的是匹配到的内容

重点是捕获括号，下面会对捕获括号进行探讨

括号内可以是或语句：也是子表达式

var str = "12112";
var reg = /(\d|\w)(\d)(\d)\1\2/
console.log(reg.exec(str))//["12112", "1", "2", "1", index: 0, input: "12112", groups: undefined]

子表达式配到到的不止一个字符，可以是多个字符，作为一个子表达式

var str = "12112";
var reg = /(\d\d|\w\w)(\d)\1/
console.log(reg.exec(str))//["12112", "12", "1", index: 0, input: "12112", groups: undefined]

 如此看来，只有特定的括号才是非捕获，而一般的都是捕获，可以使用子表达式

2、中括号 [  ]

中括号[ ]内可以设置匹配哪些字符中的一个。

[abc]    匹配abc其中的一个字符
[a-z]    匹配a-z其中的一个字符
[^a-z]   匹配非a-z的其中一个字符

 [点] 匹配点

var str = "3.1415926";
var reg = /[.]/;
console.log(reg.exec(str)); //[".", index: 1, input: "3.1415926", groups: undefined]

 [$] 匹配$

var str = "100,000$";
var reg = /[$]/;
console.log(reg.exec(str)); //["$", index: 7, input: "100,000$", groups: undefined]

[ ] 中的特殊字符，需要进行转义

比如：匹配A到z 和 空格以及符号-^

let reg = /[A-z \-\^]/g

 3、大括号{ }、量词、非贪婪匹配

*  0个或多个

+  1个或多个

?  0个或1个

{0，}  0个或多个

{2,3} 2个或三个

{2}  2个

量词后面跟？采用非贪婪匹配模式

下面实例实现拆分字符串成为数组：

var str = "1234";
var reg = /\d{1,4}?/g
console.log(str.match(reg));

["1", "2", "3", "4"]

var str = "1234";
var reg = /\d+?/g
console.log(str.match(reg)); //["1", "2", "3", "4"]

4、其他特殊字符

（1）.    匹配除了\n换行以外的所有字符；如果匹配模式是s，那么 . 匹配所有的字符

var str = "1a\!@#\$%";
var reg = /.+/g
console.log(reg.exec(str))//["1a!@#$%", index: 0, input: "1a!@#$%", groups: undefined]

 匹配所有字符，包括换行\n

var str = "1a\!@\n#\$%";
var reg = /.+/gs
console.log(reg.exec(str))//["1a!@↵#$%", index: 0, input: "1a!@↵#$%", groups: undefined]

 （2）*   匹配前一个表达式 0 次或多次。等价于 {0,}。

（3）^  匹配以什么开头的，如果在[^ ]中，标示非。正则匹配好像只有此处可以标示“非”和非捕获括号中x(?!y)、(?<!y)x标示非。

以下实例：全局匹配，寻找以数字开始的\d

var str = "1a2";
var reg = /^\d/gs
console.log(reg.exec(str))//["1", index: 0, input: "1a2", groups: undefined]

 以下匹配：全局匹配，寻找一个非数字的字符

var str = "1a2";
var reg = /[^\d]/g
console.log(reg.exec(str))//["a", index: 1, input: "1a2", groups: undefined]

（4）$  匹配以什么结尾；在正则表达式的替换replace方法中，而在换环节，则要使用像 $1、$2、...、$n 这样的语法，$& 表示整个用于匹配的原字符串。

用法1：以什么结尾，以下实例：全局匹配，寻找以数字的结尾的\d

var str = "1a2";
var reg = /\d$/g
console.log(reg.exec(str))//["2", index: 2, input: "1a2", groups: undefined]

用法2： replace方法中，以下的含义：

$1、$2、...、$99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与 regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$'	位于匹配子串右侧的文本。
$$	直接量符号。

（5）|   或

或在正则表达式中的优先级最低！下面会讨论优先级

会将 或 | 左右两侧分隔开，因为或|的优先级最低，所以或|左侧的先结合，然后或|右侧的再结合

比如：下面代码，匹配的是f或者mood

var reg = /f|mood/

在jquery源码中，表示空字符的三种方式，以多个空字符开头或者以多个空字符结尾！

var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

非捕获括号

(?:x)  匹配 'x' 但是不记住匹配项

切记子表达式\1代表匹配到的内容，而不是\d

var str = "1a2335";
var reg = /(?:\d)(\d)\1/g
var result = str.match(reg)
console.log(result);   //["233"]

(?=y)  后面是y

var str = "1a2335";
var reg = /\d(?=33)/g
var result = str.match(reg)
console.log(result);      //["2"]

(?<=y)  前面是y

var str = "1a2335";
var reg = /(?<=1a)\d/g
var result = str.match(reg)
console.log(result);  //["2"]

(?!y)   后面不是y

var str = "1a2335";
var reg = /\d(?!a)/g
var result = str.match(reg)
console.log(result);  //["2", "3", "3", "5"]

(?<!y) 前面不是y

var str = "1a2335";
var reg = /(?<!a)\d/g
var result = str.match(reg)
console.log(result);   //["1", "3", "3", "5"]

总结：都是用?开头， 是=，不是！，区分前面：？后面跟<

优先级

正则表达式从左到右进行计算，并遵循优先级顺序，这与算术表达式非常类似。

相同优先级的从左到右进行运算，不同优先级的运算先高后低。

下表从最高到最低说明了各种正则表达式运算符的优先级顺序：

运算符	描述
\	转义符
(), (?:), (?=), []	圆括号和方括号
*, +, ?, {n}, {n,}, {n,m}	限定符
^, $, 任何字符	定位点和序列（即：位置和顺序）
|	替换，"或"操作 字符具有高于替换运算符的优先级，使得"m|food"匹配"m"或"food"。若要匹配"mood"或"food"，请使用括号创建子表达式，从而产生"(m|f)ood"。

 对优先级的理解：

（1）\的优先级最高

（2）() (?:) (?=) [] 的优先级

(?:)代表非捕获，不管后面跟上面内容

var reg = /(?:a|b)/

相关方法

正则表达式两个方法：

（1）test方法

test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。

（2）exec方法

在设置了 global 或 sticky 标志位的情况下（如 /foo/g or /foo/y），JavaScript RegExp 对象是有状态的。他们会将上次成功匹配后的位置记录在 lastIndex 属性中。使用此特性，exec() 可用来对单个字符串中的多次匹配结果进行逐条的遍历（包括捕获到的匹配），而相比之下， String.prototype.match() 只会返回匹配到的结果。

如果你只是为了判断是否匹配（true或 false），可以使用 RegExp.test() 方法，或者 String.search() 方法。

非全局匹配，reg.lastIndex一直是0，所以匹配的结果一直都是第一项的结果

var str = "12345";
var reg = /\d/;
console.log(reg.exec(str), reg.lastIndex)
console.log(reg.exec(str), reg.lastIndex)

["1", index: 0, input: "12345", groups: undefined] 0

 全局匹配，每次匹配后，会记录lastIndex的值，从而每次执行的结果，是下一个符合条件的匹配结果

根据该特性，实现一个简单的generator函数

var obj = {
    0: "a",
    1: true,
    2: [1,2,3],
    3: function(){console.log(3)}
}
var str = "0123";
var reg = /\d/g;
function imitateGenetator(o, r, s){//只有g模式下，才会有generator的效果
    var key = null;
    var reg = r.exec(s);//["0", index: 0, input: "01234567", groups: undefined]
    if(reg){
       key = reg[0]
       console.log(o[key])
        return o[key];
    }else{
        console.log(undefined)
        return undefined;
    }
    
}
imitateGenetator(obj, reg, str);//a
imitateGenetator(obj, reg, str);//true
imitateGenetator(obj, reg, str);//[1, 2, 3]
imitateGenetator(obj, reg, str);//ƒ (){console.log(3)}
imitateGenetator(obj, reg, str);//undefined

重要：传入字符串生成正则表达式

很多时候想传入一个字符串，来生成对应的正则表达式，那么要怎么做呢？

使用正则表达式构造函数RegExg来创建

比如：匹配数字

let str = '^\d+$'
let reg1 = new RegExp(str)
let reg2 = new RegExp(str, 'g')
console.log(reg1) // /^d+$/
console.log(reg2) // /^d+$/g

需要注意的是，当有转义字符的情况下，需要添加 \ 避免转义，详情可参考字符串的转义字符

比如：想要匹配\和t，即\t

let str = '\\t'
let reg1 = new RegExp(str)
console.log(reg1) // /\t/