正则表达式

一、什么是正则表达式

• 正则表达式（regular expression）是一个描述字符模式的对象。
  ECMAScript的RegExp类表示正则表达式。而string和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

二、正则表达式的创建

1、字面量创建法（常用）

语法：/正则内容/修饰符

例如：var reg=/a/i

2、构造函数创建

语法：new RegExp(“正则内容”,“修饰符”)

例如：var reg=new RegExp(“a”,“i”)

三、正则对象的方法

1、test()

test() 返回一个布尔值，方法用于匹配字符串，匹配成功返回true，匹配失败返回false.

例如：

• var reg=/a/g;
• var str=“abcadeafg”
• console.log(reg.test(str));

2、exec()

exec() 根据正则在字符串中查找到对应的元素并且放在数组中。
有下标index属性和群组groups属性，一般修饰符g无效

例如：

• var reg=/a/;
• var str=“abcadeafg”
• console.log(reg.exec(str));

四、字符串通过正则匹配的方法

1、replace()

replace() 用于替换，接收两个参数，第一个是匹配项，第二个可以是字符串或者是一个函数
返回值是替换后的新字符串。

• str.replace(reg,“aaaa”)

用法1：
参数2直接写字符串
var str='abc123ff56gh';
console.log(str.replace(/\d{2}/g,'0'));

用法2：
当正则中没有群组时，回调函数的参数表示匹配到的内容和元素的下标
在数组中返回所有满足正则条件字符的下标
var str='abc123ff56gh';
var arr=[];
console.log(str.replace(/\d/g,function(item,index){
  arr.push(index);
}));
console.log(arr);

用法3：
当正则中有群组时，可以得到群组中匹配到的元素
例如：使用群组把手机号中间四位加密
var str="15253694520";
str.replace(/(\d{3})(\d{4})(\d{4})/,function(a,b,c,d,e){
	return b+"****"+d;
})
a表示匹配到的元素，b表示第一个群里的匹配内容，c表示第二个群组的匹配内容，d表示第三个群组的匹配内容，e表示匹配到元素的下标

2、match()

match() 接收一个参数，正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功返回null。

• var str=“abc345hh67”;
• var reg=/\d{2}/;
• console.log(str.match(reg));

3、search()

search() 参数与math相同，返回字符串中第一个匹配项的下标，如果没有匹配项则返回-1。
search()对修饰符g无效。

• var str=‘abc123ff56gh’;
• console.log(str.match(/\d{2}/g));
• console.log(str.search(/\d{2}/));

4、split()

split() 把字符串分割成字符串数组

• var str=‘abc123ff56gh’;
• console.log(str.split(/\d{2}/g));

五、匹配规则

1、修饰符

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

2、方括号[ ]

方括号用于查找某个范围内的字符。

表达式	描述
[abc]	查找方括号之间的任意字符
[^abc]	查找任何不在方括号之间的字符
[0-9]	查找任何从0-9的字符
[a-z]	查找任何从小写a到小写z的字符
[A-Z]	查找任何从大写A到大写Z的字符

3、元字符

元字符是拥有特殊含义的字符

元字符	描述
.	通配符，代表任意一个字符（不能匹配换行符）
\w	查找单词字符（包括字母、数字和下划线）
\W	查找非单词字符
\d	查找数字
\D	查找非数字字符
\s	查找空白字符
\S	查找非空白字符

4、量词

量词	描述
n+	匹配任何包含至少一个n的字符串
n*	匹配任何包含零个或多个n的字符串
n?	匹配任何包含零个或一个n的字符串
n{X}	匹配包含X个n序列的字符串
n{X,Y}	匹配包含最多Y个n序列或者至少X个n序列的字符串
n{X,}	匹配包含至少X个n序列的字符串
^n	匹配任何开头为n的字符串
n$	匹配任何结尾为n的字符串

5、正则中需要用反斜杠\转义的字符

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

六、正则表达式的基础语法

1、字符

• 正则表达式包含了一系列的字符，这些字符只能匹配他们本身。有一些被称为“元字符”的特殊字符，可以匹配一些特殊规则。
• 大部分的字符，包括所有的字母和数字字符，是普通字符。也就意味着他们只能匹配自身。

2、点“.”

“.” 意味着可以匹配所有的字符，称之为通配符。

/c.t/	就是匹配第一个字符是c，第二个字符是任意字符，第三个字符是t。
/[c.t]/	"."在方括号中会自动转换成字符点
/c\.t/	如果用“\.”来描述，这里的就不代表通配符了，而是代表字符"."
/c\\t/	表示匹配字符c\t
在元字符中"."不能用来匹配换行符，因为换行符在不同的表示方法中实现不同。

3、字符类

字符类

字符类是一组在方括号中的字符[a-z] [A-Z] [0-9]
[] 可能代表一个字符的列表，可以使用里面的任意一个字符，它只能代表一个字符

/c[abc]t/	第一个字符是c，第二个字符可以是a,b,c中的任意一个字符，第三个字符是t。
/[\[\]ab]/	仅匹配一个字符，\[表示匹配“[”，\]表示匹配“]”，ab表示匹配"a"字符或者"b"字符
/[abaaabaccc]/	注意这里出现了重复和顺序问题，这种写法其实没有任何意义，相当于/[abc]/
/[.]/	这个正则表示匹配一个字符"."，与"."单独出现是不同的

字符类的范围

字符类描述的过程中可以省略中间值，用-直接连接首尾，例如[a-z]表示a-z的所有字符，[f-z]表示f-z的所有字符

• [0-9.,] 表示匹配0到9的任意数字或者句号或者逗号
• [0-9A-F] 表示匹配0-9的任意数字或者大写字母A到大写字母F的任意字符
• [0-9a-z-]表示匹配0-9的任意数字或者小写字母a到小写字母z的任意字符或者“-”字符
• [1-31] 其实相当于[1-3]

一般我们使用字符类[]是为了匹配某些字符可以是多个字符。所以单独使用[a]和a是一样的作用。

字符类的反义

[^] 反义字符，在正则[]内的第一个字符使用^开始，表示后续的内容取反

[^abc]	表示除了abc之外的任意一个字符
[a^bc]	表示a或者^或者b或者c。^不是[]内的第一位则表示字符"^"
[\^abc]	表示"^"字符或者a或者b或者c字符

转义字符类

\w 查找单词字符。与[a-zA-Z_0-9]相同
\W 查找非单词字符。与[^a-zA-Z_0-9]相同
\d 查找数字。与[0-9]相同
\D 查找非数字字符。与[^0-9]相同
\s 查找空白字符。
\S 查找非空白字符。

4、重复

重复次数

{n} 这里的n表示重复的次数，用{}表示要重复寻找。

• a{3}表示重复3次，寻找aaa这个字符串
• A{1}与A相同

• a\{2\}

  表示匹配a{2}这个字符串，并不是匹配aa
• 如果这个n是0，例如a{0}表示匹配任何空字符
• [{}] 表示匹配 { 或者 }

指定重复次数范围

有时我们需要指定重复的次数，例如想匹配aa或者aaa或者aaaa。这时我们就需要指定一个重复次数的范围。

a{2,4} 表示匹配aa,aaa,aaaa
colou{0,1}r 表示匹配colour或者color
x{4,4}与x{4}相同

如果匹配的字符串中有最长的，则优先匹配最长的。

a{2,4},在字符串caaaaaare,这时先匹配aaaa

重复次数是可以开区间的

A{1,} 没有给后面的内容，表示1到任意数，就是找到A后，取最长的AAAA…字符
.{0,} 表示匹配任意内容，无论是什么都可以匹配，哪怕是空字符

关于重复的转义字符

? 与{0,1}相同。例如a{0,1}与a?是相同的意思

* 与{0,}相同。例如a{0,}与a*是相同的意思

+ 与{1,}相同。例如a{1,}与a+是相同的意思

• /\w+/g  表示至少有一个单词字符
• /[?*+]/  匹配一个？或者 *或者+的字符串

/(\w)\1*/g 可以分类取出小括号内的重复的最大次数
console.log(“aaaabbccccc”.match(/([abc])\1*/g));

重复-非贪婪匹配

".*"	表示匹配双引号中有任意个字符串
".*?"	匹配双引号中最少的字符串

例如 var str='"as""asdasdas"';匹配后得到"as"

非贪婪匹配前后会有其他内容约束范围。

var str="《西游记》、《水浒传》、《三国演义》、《红楼梦》都是中国四大名著";
console.log(str.match(/《.+?》/g))

重复-选择匹配

选择匹配 |，与js中的||相似

cat|dog 表示匹配“cat”或者“dog”
a|b|c 与[abc]相同
console.log(“aaacccaaaaccaaaa”.match(/a||c/g));表示匹配a字符或者空字符或者c字符，这里就匹配不到字符c

5、单词分隔符

\b 单词分隔符
\B 非单词分隔符
例如：catcat 查找\bcat\b是无法查找到的，cat cat就可以用这个单词分隔符查到。
主要用来查找英文单词中的正则，一般想查找一个单词内的东西就需要用\b.*\b来包含

6、起始与结束符

^ 起始符，与[^]是不同的，^n这里表示由n起始的字符串

$ 结束符，n$表示由n结束的字符串

 ^$表示精确匹配，内容只能是^$中间的内容

^ 起始符必须放在第一位，$结束符必须放在最后，才能表示其实结束的作用
console.log(/^a\w+d$/.test("abcd"));  //表示起始和结束
如果不在开始或者结尾，需加上\转义表示对应的字符
console.log(/a\^b/.test("a^bcd"));

7、群组

（）是可以将一些内容进行分组

• /([a-z])\1+/  重复选择的群组
• /a(?=d)/ 断言（环视）群组

当match不使用修饰符g时，可以将群组里的内容单独在找出来一个

var str="caaaattbt";
console.log(str.match(/^c.*t$/));	//匹配出来一个
console.log(str.match(/^c(.*)t$/));	//匹配出来两个，会把群组（）里的内容再匹配出来
console.log(str.match(/^c.*t$/g));	//加入修饰符g，只能匹配出来一个，不能匹配处群组里的字符

$1表示第一个（）里的内容，群组内容
$2表示第二个（）里的内容，群组内容
$3表示第三个（）里的内容，群组内容

匹配电话号码，中间四位替换成****
var tel = "15214523698";
console.log(tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"));

8、换行与回车符

\n
换行符，在字符串中\n是换行符的意思，在正则中是寻找换行符
\n 如果用在网页中，alert中的字符是可以换行的，pre标签也是可以换行的，pre预定义格式。

\r是回车符

七、断言/环视/前瞻后瞻/前后判断

断言是帮助我们查找某些内容时，以内容前和内容后的信息作为判断（但并不包括这些内容）

前瞻断言
?=n 匹配任何其后紧跟n的字符串
?!n 匹配任何其后没有紧跟n的字符串

后瞻断言
?<=n 匹配任何其前面是n的字符串
?<!n 匹配任何其前面不是n的字符串

var str="abacadabacad";
console.log(str.replace(/a(?=c)/g,"0"));
console.log(str.replace(/a(?!c)/g,"0"));
    
var str="bacadabacada";
console.log(str.replace(/(?<=c)a/g,"0"));
console.log(str.replace(/(?<!c)a/g,"0"));

八、中文匹配

最大字符 \u9fd5
最小中文字符 \u4e00
匹配中文: [\u4e00-\u9fa5]，中间是汉字的Unicode编码范围

匹配姓名正则表达式：
/[\u4e00-\u9fdf]{2,4}/

九、正则表达式练习

1、给DOM元素添加类名

function setClassName(element,className){
  element.className=element.className.concat(" ").concat(className).split(/\s+/).reduce(function(value,item){
    if(value.indexOf(item)<0){
      value.push(item);
      // console.log(value);
    }
    return value;
  },[]).sort().join(" ");
}
setClassName(input,"i8");

方法二：字符串操作
function setClassName(elem,className){
  var arr=[];
  elem.className=(elem.className+" "+className).replace(/\S+/g,function(item){
    if(arr.indexOf(item)<0){
      // console.log(item);
      arr.push(item);
      return item;
    }
    return "";
  }).replace(/\s+/g," ");
}
setClassName(input,"i2    i9 i7  i5  i15  i2  i1");

2、删除DOM元素的类名

方法一：转换为数组
function reClassName(elem,className){
   elem.className=elem.className.split(/\s+/g).reduce(function(value,item){
      var arr2=className.split(/\s+/g);
      if(value.indexOf(item)<0&&arr2.indexOf(item)<0)  value.push(item);
      return value;
   },[]).join(" ");
}
reClassName(div,"div3 div4   div10 div15");

//方法二：两个字符串去重
function reClassName(elem,className){
   elem.className=elem.className.replace(/\S+/g,function(item){
      if(className.indexOf(item)>0) return "";
      return item;
   }).replace(/\s+/g,' ');
}
reClassName(div,"div3 div4    div15");

3、密码等级

低级：纯数字或者纯字母（大小写）8-16位密码
/^\d{8,16}$|^[a-z]{8,16}$|^[A-Z]{8,16}$/

中级：不能以数字开头，包含数字和字母，不能同时包含大小写字母， 8-16位密码
/^(?=\D+\d)(?=.*[a-z])(?!.*[A-Z])\w{8,16}$|^(?=\D+\d)(?!.*[a-z])(?=.*[A-Z])\w{8,16}$/

高级：不能以数字开头，同时包含数字，大小写字母和特殊字母，8-16位密码
/^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\u0-\u7F]{8,16}$/

4、匹配IP地址

/^(\d|[1-9]\d|1\d{2}|2[0-5]{2})(\.(\d|[1-9]\d|1\d{2}|2[0-5]{2})){3}$/

5、过滤标签

var str = '<p>Uber的这款无人车原型配备了多个<strong>摄像头</strong>、<em>激光雷达</em>以及<span>传感器</span>，可看清100米范围内任何方向的东西</p><br/><p>第二行内容，哎嘿，第二行内容</p>';

// 需求:
// 把里面除 < br /> 之外所有的标签去掉，如果标签是br 则换成\n

var s=str.replace(/<.+?>/g,function(a){
  console.log(a);
  if(a.indexOf("br")<0)return "";
  else return "\n";
})
console.log(s);

6、展开字符串

var str = "2[2[2[a]2[b]]3[2[c]d]]";
//把字符串展开，例如2[ab]展开为abab;
---------------------------------------------------------------------------------------------------------------------
function getStr(str){
  var s=str.replace(/(\d+)\[(\w+)\]/g,function(item,a,b){
    return b.repeat(a);
  })
  if(/(\d+)\[(\w+)\]/g.test(s)) return getStr(s);
  return s;
}
var s=getStr(str);
console.log(s);