阅读 341

大前端之路-js正则看这一篇就够了!

本文适用的读者范围

适合像我这种出身移动开发(或者后端开发也行),没有实际大量的实战过web项目,之前对正则表达式一知半解了解的不多,遇到字符串匹配的正则问题除了百度谷歌就束手无策的正则菜鸟。

js正则网站 可以方便的让我们学习js正则。是一个非常好的正则工具

正则工具使用

来看个工作中常用的

我们假设只想搜is 这个单词 ,而不想搜到 包含is的哪些单词

需求完成之后 我们来看看 正则工具 怎么解释我们的正则的

再来一个:

我们想找到 以http协议开头 并且是jpg结尾的url

看下 报错信息 ,应该是没有转义,所以上面的代码是错的

稍微改一下就行,加个转义字符即可

然后我们再改进一下,我们想把我们找到的符合要求的url 中的 协议头 把他给去掉

最后一道题:

我们想找到 所有的日期文本。

来看一下 正则工具的解释

然后就剩下最后一个bug需要修正了,我们要保证这里的日期格式 不可以出现在其他的字符串中 也就是说要保证开头和结尾都符合日期样式

然后我们再利用刚才说过的 分组的概念

来将我们的日期格式 全部替换为 月-日-年的 格式

RegExp 对象

当然也可以这么写

常用的正则语法

稍微特殊一点的写法

预定义类

方便大家使用的

还有一些边界匹配字符

下面给几组例子 体会一下

量词

量词还是很有用的,比如你要匹配连续出现10次的数字,没有量词的话 你就只能连续写10次\d了。

这里要注意正则中的*与 linux中的* 完全班不是一个意思。 linux中的*代表任意字符,但是正则中的.才代表任意字符。正则中的* 意思就如图了

贪婪与非贪婪

分组

分组中带或的使用:

反向引用:

忽略分组:也就是不希望捕获某些分组。 这种场景用的不多,大家知道有这么个东西即可

前瞻

其实就是匹配到符合规则的时候 往文本前面看 是否符合断言。

来看个例子

再看个例子

js对象属性

前面已经介绍过一些 比如 g 是否全文搜索 i 是否忽略大小写 m 是否多行

默认值 打出来看一下

注意这几个属性是只读的。不能赋值的噢。

还有 lastIndex和source属性。 用的不多。了解即可

test和exec 方法

首先来看一个比较奇怪的例子

lastIndex 属性的意思就是 当前匹配到的字符串的 最后一个字符的 下一个字符的位置

再看一个执行结果

原因就是 如果你加上了g标签就代表全局匹配,每次匹配以后的lastIndex 作为下一次匹配的开头。

所以当index的位置 跑到末尾的时候 自然就不符合了。

关注下面的标签,发现更多相似文章
评论