资讯专栏INFORMATION COLUMN

29.22分钟学会书写正则(2)

Blackjun / 2914人阅读

摘要:写在前面的一些废话没有看过上一篇文章的盆友有福了今天没错就是现在我将免费免费将上篇文章的链接发出来这里是上篇上回说了怎么写出正则,这次展示下在中使用正则的场景正则对象属性的正则对象有以下几个属性,其中前面三个也叫修饰符也就是表达式两条杠后面

写在前面的一些废话

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

今天!没错!就是现在!我将免费!all f*cking FREE!

免费将上篇文章的链接发出来!

这里是上篇

上回说了怎么写出正则,这次展示下在js中使用正则的场景

正则对象属性

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

global:是否全文搜索,默认false

ignoreCase:是否大小写敏感,默认false,即不忽略大小写

multiline:是否多行搜索,默认false

lastIndex:当前表达式匹配内容的最后一个字符的下一个位置

source:正则表达式的文本字符串,也就是“/表达式/修饰符”中的表达式,var reg=/is/g; reg.source就是is

正则相关的方法

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 = /dw/  
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。

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

1、 一般用法,这里是一般用法啊,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"
//只有全局调用的时候,才会替换所有的匹配文本

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

1、匹配的字符串

2、正则表达式分组内容,没有分组就没有这个这个参数,几个分组就几个该参数

3、匹配项在字符串中的index

4、原字符串,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 ""+$1+"个";
})
//需要注意的是,这个回调函数的return值会覆盖match的值,因此要在return的时候加回"个"字。


ok~应该足够清楚了吧~

最后

虽然标题是29.22分钟,但是看完两篇文章好像就不止了。
我不管,30分钟内没看完的好好检讨下自己,是不是没有戴眼镜,是不是没睡好觉,看那么慢呢!

如果有建议或者意见,请在评论区指出,非常感谢~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99425.html

相关文章

  • 29.22分钟学会书写正则

    摘要:而在下,仅仅是喜欢这个数字,如是而已正则表达式正则表达式,又称规则表达式。对象在爪洼死苦瑞特中,对象表示正则表达式,它是对字符串执行模式匹配的强大工具。序列匹配,而则匹配。否则,将视为一个原义的字符。注意正则表达式会匹配全角空格符。 写在最前面 看到标题你可能会疑惑为什么不是30分钟?因为我这个文章图文并茂,非常恐怖,兄弟,其实你不用30分钟就可以看懂。你可能会以为我在吹牛B,但是当你...

    qujian 评论0 收藏0
  • 60分钟正则从入门到深入

    摘要:正则表达式使用单个字符串来描述匹配一系列匹配某个句法规则的字符串。接下来,是在手机正则里面已经出现了。序列匹配而则匹配。分组与反向引用分组,又称为子表达式。把正则表达式拆分成小表达式。 本文转载自网络。转载编辑过程中,可能有遗漏或错误,请以原文为准。原文作者:水墨寒湘原文链接:https://juejin.im/post/582dfc... 正则表达式对于我来说一直像黑暗魔法一样的存...

    _ang 评论0 收藏0
  • 【接口测试—postman】5分钟让你学会接口测试工具——postman的基础常用技巧,看完少走一周

    摘要:今天来和大家分享下,我这段时间做接口测试的一些心得。接口测试就我目前的理解,大部分情况下,接口测试,就是按照接口测试文档,输入相应的请求,看能否得到文档上所写的接口返回消息。这一过程,称之为接口测试,如果没有返回相应的信息,说明有了。 大家好,我是好学的小师弟。今天来和大家分享下,我这段时间...

    The question 评论0 收藏0
  • 前端周刊第59期:选 Flow 还是 TypeScript?

    摘要:周末是时隔两月的家人团聚,而每次内容的准备平均需要我集中精力工作小时,所以第期的内容今早才准备好,对不住大家了。下面是本周精选内容,请享用。本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009742537?w=1240&h=509); 周末是时隔两月的家人团聚,而...

    Julylovin 评论0 收藏0
  • 分钟教你学会配置eslint,还在为风格单双引号,对象末位逗号要不要,引用各种报错而烦恼?(建议收

    摘要:最全的配置大全,我已经加了详细中文注释,只需要找到自己想要的配置就可以了,强烈建议收藏用法非常简单,找到下的添加对象即可比如我要把规则原本单引号要变为双引号,那加上注意这个规则如果违反了规则情况下,这里的数字表示不不处理,表示警告,表示错误 最全的eslint配置大全,我已经加了详细中文注释,只需要找到自己想要的配置就可以了,强烈建议收藏! 用法非常简单,找到.eslintrc.js下...

    刘东 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<