29.22分钟学会书写正则（2）

写在前面的一些废话

没有看过上一篇文章的盆友有福了！

今天！没错！就是如今！我将免费！all f*cking FREE！

免费将上篇文章的连接发出来！

这里是上篇

上回说了怎么写出正则，此次展现下在js中使用正则的场景！

正则对象属性

javascript的正则对象有如下几个属性，其中前面三个也叫修饰符（也就是/表达式/两条杠后面的字符,好比上一篇文章出现的 /\bis\b/g 的这个g）。

• global：是否全文搜索，默认false
• ignoreCase:是否大小写敏感,默认false,即不忽略大小写
• multiline:是否多行搜索，默认false
• lastIndex:当前表达式匹配内容的最后一个字符的下一个位置
• source：正则表达式的文本字符串，也就是“/表达式/修饰符”中的表达式,var reg=/\bis\b/g; reg.source就是\bis\b

正则相关的方法

js中，RegExp对象有两个内置方法

• test
• exec

此外，还有一些String对象的方法也支持正则表达式，它们是

• search
• match
• split
• replace

test()

test() 方法用于检测一个字符串是否匹配某个模式，返回true或者false.

var reg = /\w/;
reg.test('abc');
//true
reg.test('abc');
//true
reg.test('abc');
//true
reg.test('@#$%')
//false
reg.test('@#$%')
//false
//为何要多执行几遍呢？你可能会觉得楼主lu多了致使老眼昏花多输入了几遍。but NO!多执行几遍是为了和下面做对比。

当咱们的正则表达式加上了g修饰符之后，这个方法出现了一些不一样

var reg = /\w/g;
reg.test('abc');//true
reg.test('abc');//true
reg.test('abc');//true
reg.test('abc');//false

为何会这样呢？由于当咱们加上全局搜索这个修饰符后，test（）方法会返回结果，而且更新reg对象的属性（lastIndex），他会在上一次lastIndex的位置开始日后查找，而不是从头开始。
因此这个方法建议不要加g，若是你这我的比较倔强，非要加的话，你能够每次都从新初始化一个正则对象，由于它第一次的结果是和没有加g的时候是同样的。
Like this。

var reg = /\w/g;reg.test('abc');//true
//每次都初始化正则对象，把这两行写在一行里比较好复制，由于分开复制一不当心就出现了上面的问题

exec()

exec（）方法用于使用正则表达式对字符串执行搜索，并将更新全局RegExp对象的属性以反应匹配结果
若是没有匹配到文本则返回null，不然返回一个结果数组：

• 数组第一个元素是与正则表达式相匹配的文本
• 第二个元素是与正则表达式的第一个子表达式（也就是分组1）相匹配的文本（若是有分组1的话）
• 第三个元素是与正则表达式的第二个子表达式（分组2）相匹配的文本（若是有分组2的话）
• 除了数组元素和 length 属性以外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。

var reg = /(\d)(\w)/  //上篇文章已经介绍过度组了，这里的两个括号分别是分组1和分组2
reg.exec('1a2b3c4d5e');

当咱们的正则表达式加上了g修饰符之后，这个方法又出现了一些不一样

var reg = /(\d)(\w)/g
reg.exec('1a2b3c4d5e');

仍是上图片比较简单~

这个表现跟test是一个尿性的，即非全局调用（不加g）的时候不会更新lastIndex（lastIndex不生效），全局调用的时候会更新lastIndex

说完了比较复杂的有分组的状况，咱们来看看没有分组的状况，言简意赅，你做为这么优秀的一我的，应该能随便看懂吧。

var reg = /\d\w/  
reg.exec('1a2b3c4d5e');

对于这个方法呢，若是咱们只须要查找第一个匹配结果的话能够不加g，若是须要返回全部匹配结果的话，须要循环执行reg.exec(),而且须要加上g。

search()

search()方法用于检索字符串中制定的子字符串或者检索与正则表达式相匹配的子字符串。

方法返回第一个匹配结果的index，查找不到返回-1
search()方法会忽略g标志，老是从字符串的开头进行检索

当咱们传入的参数s字符串时，它会转换成正则表达式
var str = "abcd1234"
str.search('1') //4
str.search(/1/) //4
str.search('hello') //-1
str.search(/hello/) //-1

so easy~下一个

match()

非全局调用状况下（不加g）:
这个方法相似于exec()，返回值是一毛同样的，one hair one style。
match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
若是没有匹配到文本则返回null，不然返回一个结果数组：

• 数组第一个元素是与正则表达式相匹配的文本
• 第二个元素是与正则表达式的第一个子表达式（也就是分组1）相匹配的文本（若是有分组1的话）
• 第三个元素是与正则表达式的第二个子表达式（分组2）相匹配的文本（若是有分组2的话）
• 除了数组元素和 length 属性以外，match() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。

var str = "1a2b3c4d";
var reg = /(\d)(\w)/;
str.match(reg);

当咱们的正则表达式加上了g修饰符之后，这个方法又出现了一些不一样，我为何要说‘又’

match()方法的返回改变了，变化害...害挺大的,跟前面的exec()和test()方法又有不一样

若是没有匹配到文本则返回null，不然返回一个结果数组：

• 数组元素为与正则表达式匹配的文本

var str = "1a2b3c4d";
var reg = /(\d)(\w)/g;
str.match(reg);

你有没有发现，即便我已经贴了图，却仍是写了代码，为何？
由于做为一个这么sweet 和 warm的人，我有必要为你节省你本身输入代码的时间，你如今只须要ctrl C 而后ctrl V就能够在浏览器控制疯狂验证个人图片，疯狂测试这些方法！

split()

split()方法用于把一个字符串分割成字符串数组。

//这个也能够输入字符串做为参数,相似于search()，它会转换成正则
var str = "a,b,c,d"
str.split(','); //["a","b","c","d"]
str.split(/,/); //["a","b","c","d"]

//通常状况都是使用字符串居多，比较复杂的状况就可使用正则
var str ="a1b2c3";
str.split(/\d/); //["a", "b", "c", ""]
//注意：若是字符串最后的子字符串恰好符合参数的正则，那么就会多了一个空的元素，像上面同样

replace()

来了来了，上篇文章中使用最多的replace()终于来了！！！AV8D shout with me！ RRRRRRRRrrrrrrrrrrrrrr~EEEEEEE~PPPPP~LLLL~AAAA~CCCCC~EEEEE。

该方法用于在字符串中用一些字符替换另外一些字符，或替换一个与正则表达式匹配的子串。

一、 通常用法，这里是通常用法啊，replace('找谁','替换成谁')

该用法的全局与非全局调用的差异是‘替换第一个匹配项’和‘替换全部匹配项’。

举个经常使用的例子

//这个‘找谁’一样也能够是字符串或者是正则，相似于split()，search()
var str = "hello I am leelei";
str.replace('leelei','岭南吴彦祖'); //"hello I am 岭南吴彦祖"
str.replace(/leelei/,'岭南吴彦祖'); //"hello I am 岭南吴彦祖"

好吧，这个对于大家来讲并不经常使用，多是只有我在用而已，抱歉。写个大家经常使用的例子吧

var str = "2018-11-26";
str.replace(/-/,'/');  //"2018/11-26"
//看到没有，这里只替换了一个-
str.replace(/-/g,'/');  //"2018/11/26"
//只有全局调用的时候，才会替换全部的匹配文本

二、 进阶用法，replace('找谁',回调函数),每次匹配替换的时候调用，有4个参数

• 一、匹配的字符串
• 二、正则表达式分组内容，没有分组就没有这个这个参数,几个分组就几个该参数
• 三、匹配项在字符串中的index
• 四、原字符串,replace()方法不会改变原字符串的哦。

//**当没有分组的时候**
var str ="a5b6c7d8";
//能够根据下面的截图对照上面的参数来理解记忆。
//这里是给每个匹配的数字+1.
str.replace(/\d/g,function(match,index,origin){
    console.log(match,index,origin);
    return match-0+1;
});

//**当有分组的时候**
//为字符串中的某些字段更换样式,完整的demo就不写了，你们应该都能看懂吧。
//将第一个分组匹配的内容替换掉
//为何要分组? 由于咱们不想给'个'这个字添加样式，可是又须要用'个'来判断，咱们只更改'个'前面的数字的样式，不更改其余数字。
var str = "第1点，这里有4个橘子，5个橙子，9个苹果，咱们须要为这几个数量更改样式.";
str.replace(/(\d)个/g,function(match,$1,index,origin){
    console.log(match,$1);
    return "<span style='color:red'>"+$1+"<span>个";
})
//须要注意的是,这个回调函数的return值会覆盖match的值，所以要在return的时候加回'个'字。

ok~应该足够清楚了吧~

最后

虽然标题是29.22分钟，可是看完两篇文章好像就不止了。
我无论，30分钟内没看完的好好反省下本身，是否是没有戴眼镜，是否是没睡好觉，看那么慢呢！

若是有建议或者意见，请在评论区指出，很是感谢~