详解JavaScript正则表达式（二）

版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/qq_31699845/article/details/71248982

正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

1、什么是正则表达式

1. 正则表达式是由一个字符序列形成的搜索模式。
2. 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
3. 正则表达式可以是一个简单的字符，或一个更复杂的模式
4. 正则表达式可用于所有文本搜索和文本替换的操作。

2、正则表达式中的常用属性

1、global

global：是否全文搜索，默认是false；

var str = "1w2w3";
var reg = /\d/;
var res = str.replace(reg,"X");
console.log(res);

输出结果是：

Xw2w2;

分析：默认是false，表示的是不全局匹配，因此在成功匹配一个数字之后就返回。这里的\d表示正则表达式是0-9之间的任意一个数字，如果不理解\d是什么意思的话。可以参考之前写过的一篇文章详解JavaScript正则表达式（一）。方法replace会在下文中讲解。
若使用全局匹配。

var str = "1w2w3";
var reg = /\d/g;
var res = str.replace(reg,"X");
console.log(res);

输出结果：

XwXwX；

分析：注意此时的reg中增加了一个g全局符号，表示的是匹配字符串str中的每个数字并且替换。
####2、ignore case
ignore case:是否大小写敏感，默认是false。
直接上例子

var str = "NAME";
var reg = /name/i;
var res = str.replace(reg,"成功");
console.log(res);

输出结果：

成功

注意reg中的i就表示的是忽略大小写。此时才嫩成功匹配。

3、multiline

multiline：多行搜索，默认值是false。

它修饰的是^和 $,就是说，没有multiline标志的时候，^ 和 $ 的作用范围可以理解为每一行（\n结尾的）开头和结束来匹配。有multiline的时候，是与整个字符串的开头和结尾匹配。

var str = "12a\n45b\n78c";
var reg = /^\d/g;
var res = str.replace(reg,"X");
console.log(res);

输出结果：

“X2a
45b
78c”

此时没有使用多行匹配，因此只能匹配第一行中以数字开头的。
若加上多行匹配标志"m"

var str = "12a\n45b\n78c";
var reg = /^\d/gm;
var res = str.replace(reg,"X");
console.log(res);

输出结果是：

“X2a
X5b
X8c”

可以看到，使用多行匹配之后，每一行都可以匹配成功了。

还有两个属性，分别是lastIndex和source，会在下面正则表达式相关的方法中举例解释，这里解释一下含义
lastIndex：是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式索要匹配的文本字符串。

3、正则表达式中的相关方法

1、String.prototype.replace()

这个方法在前面的篇幅已经使用了很多次了，这里就详细来讲一下这个方法。replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

首先：这个方法有三种形式

• String.prototype.replace(str,replaceStr)
• String.prototype.replace(reg,replaceStr)
• String.prototype.replace(reg,function)

返回值：

一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

看一下参数的意思：
str表示的是要匹配的字符串，replaceStr是指定的替换文本。
reg表示的是正则表达式，function用于生成替换文本的函数。

先看例子：

var str = "12abc";
var res1 = str.replace("ab","x");
var res2 = str.replace(/[a-zA-Z]{2}/,"x")
console.log(res1)//12xc
console.log(res2)//12xc
//输出结果是一样的。

接下来看第三种形式的使用。其中function会在每次匹配替换的时候调用，有四个参数

• 匹配字符串matchStr
• 正则表达式分组内容，如果没有分组，就没有该内容
• 匹配项在字符串中的位置
• 原字符串

var str = "12abc";
var newStr = str.replace(/(\d)([a-zA-Z]{2})/,                       function(matchStr,group1,group2,index,origin){
  console.log(matchStr);//"2ab"
  console.log(group1+","+group2);//"2,ab"
  console.log(index);//1
  console.log(origin);//"12abc"
  return "x";
 //返回值就是要替换的文本，这里就是使用"x"替换了匹配的"2ab"
});

console.log(newStr);//1xc

注意，有x个分组，在function中的参数中就要写x个有关分组的参数，这里正则表达式中有两个分组，所以我使用了两个关于分组的参数group1,group2。

2、RegExp.prototype.test()

用于测试字符串参数中是否存在匹配正则表达式模式的字符串。如果存在就返回true，否则就返回false。

var str = "hello world";
var reg = /world/g;
var res = reg.test(str);
console.log(res);//true
console.log(reg.lastIndex);//11
console.log(reg.source);//"world"

lastIndex是从0开始匹配的，因此当匹配world之后，最后一个d的位置是10，因此输出的lastIndex就是11,source返回的是正则式要匹配的内容，这里就是“world”，是以字符串的形式返回的。

3、RegExp.prototype.exec()

输出结果是一个数组，数组中的元素

• 第一个元素是与正则表达式匹配的文本；
• 第二个元素是第一个子表达式相匹配的文本（如果有的话）
• 第三个元素是第二个子表达式相匹配的文本（如果有的话）
  这里的字表达式是指使用“()”包括起来的。
  还有两个元素是index和input
• index 声明匹配文本的第一个字符串的位置
• input 存放被检索的字符串

var reg1 = /\w(\d)\w/g;
var str = "a1b2c3d4";
var res = reg1.exec(str);
console.log(res);

输出结果是：

这里解释一下，“a1b“就是与正则式匹配的元素。"1"是指这个\w(\d)\w中\d匹配的部分，也就是匹配"a1b"中的数字1。"index"为0表示从字符串开始位置就匹配，”input”中存储的就是被检索的字符串。

若要全局匹配，需要通过循环来输出

var reg1 = /\w(\d)\w/g;
var str = "a1b2c3d4";
var res;
while(res = reg1.exec(str)){
  console.log(res);
}
​

输出结果如下图

4、String.prototype.search()

search()是搜索指定字符在一个字符串中出现的位置，如果不存在就返回 -1.和indexOf()的区别在于 search 是强制正则的，而 indexOf 只是按字符串匹配的。

var reg = /c/g;
var str = "a1b2c3d4";
var res = str.search(reg)
console.log(res);//4

字符串str中第一次出现字符c的位置是4（从0开始计数）。

5、String.prototype.match()

match()方法将检索字符串，以找到一个或者多个与regexp匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

#####1、如果 regexp 没有标志 g
那么 match() 方法就只能在 stringObject（要匹配的字符串）中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

• 该数组的第 0 个元素存放的是匹配文本
• 而其余的元素存放的是与正则表达式的子表达式匹配的文本。
  除了这些常规的数组元素之外，返回的数组还含有两个对象属性。
• index 属性声明的是匹配文本的起始字符在 stringObject 中的位置
• input 属性声明的是对 stringObject 的引用。

var reg = /(\w)\d(\w)\d/;
var str = "a1b2c3d4";
var res = str.match(reg);
console.log(res);

输出结果：

输出数组中第二个元素是“a”，以及第三个元素“b“，是因为：先看正则式是(\w)\d(\w)\d中有两个用括号括起来的项，这里的\w代表可以匹配字母、数字和下划线；\d表示匹配数字。不清楚的可以参考详解JavaScript正则表达式（一）。因此在匹配到”a1b2“的时候，对应的第二个元素就是第一个\w匹配到得字母a，第三个元素就是第二个\w匹配到的字母b。

和上面的exec()方法返回的数组中包含的内容一致。

2、如果 regexp 具有标志 g

则 match() 方法将执行全局检索，找到 stringObject（要匹配字符串） 中的所有匹配子字符串。

1. 若没有找到任何匹配的子串，则返回 null。
2. 如果找到了一个或多个匹配子串，则返回一个数组。

不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

var reg = /(\w)\d(\w)\d/g;
var str = "a1b2c3d4";
var res = str.match(reg);
console.log(res);

输出结果：

可以看出只输出匹配的字符串。

原文链接 详解JavaScript正则表达式（二）