javaScript的正则表达式详解

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。使用好正则表达式可以节省大量的代码。

先从简单的案例体验下正则

/abc/.test("51abcd23");//true
/\d\d\d/.test("12ab");//false
/\d\d\d/.test("123ab");//true

new RegExp("Frankin").test("hello,Frankin");//true

以上定义了两种正则调用的方法，当校验规则是字符串的时候很好理解，就是被校验的字符串里是否含有校验规则的字符串，如果包含的话返回true,反之校验失败返回false，并且大小写敏感，而\d这种特殊的语句规则又是什么呢？\d其实代表匹配0-9的数字,而这种匹配规则还有很多，我们可以看下图。

常用元字符串:

范围符号：

这里可能\b 零宽单词边界比较难理解，这里重点解释下

当我们需要把一句 This is a test这句话的is 替换成 IS时，如果直接匹配is，会把This后面的is也给替换掉，这时使用单词边界\bis\b来匹配，便可以只匹配is而不匹配This了

当我们刚好要匹配^或者$这些带有范围符号规则的字符时,该怎么办呢？

这时就需要用转义字符\来声明 不做别的范围匹配作用 例如^

/\^abc/.test('^abc');//true

分组：

这里讲解下(x)和(?:x)的区别

当使用(x)分组时，使用\n重新匹配第n个分组

当只想将复杂的表达式分组，而不记录被/n调用时，使用(?:x)便不会记录匹配到的字符串

/(abc)(def)\1/.test('abcdefabc');//true
/(?:abc)(def)\1/.test('abcdefabc');//false
/(?:abc)(def)\1/.test('abcdefabc');//true

'2016-11-25'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1');
//"11/25/2016"

重复：

前瞻

前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言

js不支持后顾

'a2*3'.replace(/\w(?=\d)/g,'X');
//"X2*3"
'a2*34v8'.replace(/\w(?=\d)/g,'X');
//"X2*X4X8"
'a2*34vv'.replace(/\w(?=\d)/g,'X');
//"X2*X4vv"
'a2*34vv'.replace(/\w(?!\d)/g,'X');
//"aX*3XXX"

Flag、RegExp对象属性

• global--g （全文匹配）
• IgnoreCase--i (忽略大小写)
• Multiline--m. (多行搜索)
• source （正则表达式的文本字符串）
• lastIndex (是当前表达式匹配内容的最后一个字符的下一个位置)

var reg = /\bis\b/;
//或
var reg = new RegExp('\\bis\\b');

'He is a boy.This is a dog'.replace(reg,'IS')

//"He IS a boy.This is a dog"

//添加g 全文匹配，否则匹配到第一个后停止
var reg = /\bis\b/g;
//或
var reg = new RegExp('\\bis\\b',g);
'He is a boy.This is a dog'.replace(reg,'IS')
//"He IS a boy.This IS a dog"

//IgnoreCase用法
'This Is a dog'.replace(/is/g,'Q')
//"ThQ Is a dog"
'This Is a dog'.replace(/is/gi,'Q')
//"ThQ Q a dog"


//Multiline用法
const mulStr = "@123
                                @456
                                @789"
mulStr.replace(/^@\d/g,'X');
//  "X23
//  @456
//  @789"
mulStr.replace(/^@\d/gm,'X');
//  "X23
//  X456
//  X789"

RegExp对象方法

• compile
• exec
• test
• toString

/abc/.exec("abcdef"); // "abc" 此方法返回匹配到的字符串,类似字符串的match方法
/abc/.test("abcde"); //true   此方法返回boolean值
/abc/.toString();// "/abc/"
var reg = /abc/; 
reg.compile("def"); //compile修改正则的属性
reg.test("def");//true

string类型与正则相关的方法

• String.prototype.search 检索正则规则匹配的字符串所在的索引
• String.prototype.replace 替换正则匹配的值
• String.prototype.match 返回一个数组，匹配正则规则的值组成的数组
• String.prototype.split 字符串根据正则分割

"abcabcdef".search(/(abc)/1/);//0
"aabbbbcc".replace(/b+?/,1); //aa1bbbcc
"aabbbbcc".match(/b+/);//["bbbb"]
"aabbbbccbbaa".match(/b+/g);//["bbbb","bb"]
"aabbbbccbbaa".split(/b+/);//["aa","cc","aa"]

正则可视化工具

https://regexper.com

该站点有可能会被墙，为了稳定的访问，我们也可以在github下clone，进行本地部署

https://github.com/javallone/regexper-static