专栏首页腾讯NEXT学位【学员投稿】学习正则不看这篇基础,你说能行吗?

【学员投稿】学习正则不看这篇基础,你说能行吗?

嗨咯~ 小伙伴们,NEXT学院的【学员投稿专栏】开张啦~  首次投稿的是我们NEXT学位前端完整课程的8班学员“神仙朱”,快来看看他写了哪些好干货吧~

正则很烦,但有了正则,有时能把复杂的东西变得简单。因为正则本身就很复杂,负负得正。

有的正则虽然功能强大,但是非常长,掺杂着很多规则,让人一看就恶心。反正我也是非常怕正则的。

正则需要花费大量的时间去学习规则,研究规则,所以有时很怕去接触它,但是总要学会勇敢面对。

这东西又不是一天学完,就永生记得的,就算忘了然后看我做的笔记,也让人很烦。

所以,我今天必须写得简单明白,也好让自己以后容易捡起来。

鉴于内容真的实在太多,所以第一部写些基础用法,第二部写些高级用法

TIP

Vue 在处理组件模板上,就使用了非常多而且复杂的正则,匹配指令,匹配子组件 等等,简直无往不利,正则重要性可见一斑。

1

    正则

正则 是 对字符串的一种过滤逻辑,主要作用对象是字符串

正则的作用

1、匹配字符串位置

2、获取特定的字符串

我打算从下面几部分去总结正则

1、正则的基本语法

2、正则的 flags,也就是标志位

3、正则涉及的方法和属性

4、重复量词

5、分组,捕获

6、引用、反向引用

7、正向前瞻、反向前瞻

8、贪婪匹配、惰性匹配

内容很多,也很不容易理解,需要亲身实践,体会其中规则的用处。

分组捕获、引用反向引用,正向反向前瞻,贪婪惰性匹配 会放到 下篇文章说明,这几块内容 比较重要 和 复杂,是使用正则必须掌握的高级内容

2

    正则基本语法

基本语法,就是我们经常会在正则中使用到的规则,说明的列表如下

[xyz]

匹配 括号内的 任意一个字符,

[^xyz]

相反,不要其中的字符

\s

匹配任意空白字符

\S

不要空白字符

\d

匹配数字

\D

不要数字

\w

匹配 字母,数字,下划线

\W

不要 字母,数字,下划线

\b

匹配单词边界

\B

不要单词边界,匹配其他边界

^

匹配起始位置

$

匹配结束位置

.

匹配任意字符

根据解释来看,是挺好理解的,直到我在项目中使用了,现在特别讲一下疑惑过我的地方

1

\b 匹配单词边界

单词边界到底是什么东西?

举栗子

既然说匹配边界,使用 \b 匹配 " 222 name" 得到的边界是什么东西?如图

可以看到,图中粉色的虚线,就是匹配的边界。把111 和 word 当做一个单词,那么单词的边界,就是单词的两边啦!默认是 连续数字 和 连续字母 当做一个单词

“ 连续数字,连续字母,如果连续的词中间加个标点符号呢?"

试试在 word 中间加一个 +

额,还是一样,把 wo 和 rd 当成了一个单词,所以匹配出 四条边界

尝试下把边界 替换 成其他东西

2

\B 匹配非单词边界

这个说的是匹配非单词边界

同样的例子测试

得到的边界,是除了 单词两边之外的所有的边界。

按我的理解

每个字符都有两边,这两边就是字符的边界

匹配结果 = 所有字符的边界 - 所有单词的边界

尝试下把边界替换成其他东西

3

\s 匹配空白符

匹配任意空白字符,这个空白字符,可 不止是空格 而已,还包括下面这些

\r

回车符

\t

制表符

\n

换行符

\f

换页符

这些 一开始我也不知道的,以为只匹配 空格而已,真是无奈

来,我们使用 \s 尝试匹配上面的的空白符,发现都可以被匹配到,好的,没有被骗

4

.  不匹配 换行符

. 可以匹配任意字符,却不包括 换行符,现场试验

一个含有 换行符 的字符串打印如下

开始匹配,发现 \n 没有被替换,坐实了坐实了

3

    正则标志位

正则有三个标志位

1、ignoreCase,简写为 i

2、muitiline,简写为 m

3、global,简写为 g

1

ignoreCase

正则加上 i,那么就 不区分大小写 

对比 有 i 和 没 i 的区别

2

global

正则加上 g,就会 全局匹配

对比 有 g 和 没 g 的区别

3

multiline

正则加上 m,就会 多行匹配

而往往多行匹配也要加上 g 才行

A:" 那我直接用 g 不就好了?还能 m 干嘛?

B:" 恩,如果你想匹配多行的开头时,就有用了 

对比 有 m 和 没 m 的区别

哈哈 

用 g 不用 m,你一样匹配不到其他行的开头, gm 缺一不可

4

    正则涉及的方法和属性

正则可以调用哪些方法 和属性?

1、方法:test 、exec

2、属性:source、ignoreCase、multiline、global

1

方法 test

验证字符串是否可以匹配正则

返回 布尔值,常用于表单验证

2

方法 exec

找出字符串中的 匹配项

返回一个数组,数组 包含 第一个匹配项,index(匹配项在字符串中的位置),input(匹配的字符串)

exec 需要记住两个点

1、常用于正则捕获时

      捕获就是把特定的字符串抓出来,在后面会详细说

2、不管是否设置 全局搜索 g,都只会返回 一个匹配项

a. 没有设置全局匹配 g

      不管你调用多少次,都只会返回 第一个 匹配项

var str="abc"
var reg1=/\w/reg1.exec(str)
reg1.exec(str)
reg1.exec(str)

b. 设置了全局匹配 g

var str="abc"
var reg1=/\w/greg1.exec(str)
reg1.exec(str)
reg1.exec(str)

看到了把,如果设置了 全局搜索 g,那么  exec 会在字符串上 继续 去匹配

到底是什么魔力?欢迎来到本期探索未知的世界

答案是 对象的属性 - lastIndex

如果我每次调用 exec 都重置一次 lastIndex 的话

var str="abc"
var reg1=/\w/g
reg1.exec(str)
reg1.lastIndex = 0
reg1.exec(str)
reg1.lastIndex = 0
reg1.exec(str)

结局和 没有放 g 是一样的结果,事实证明了是 lastIndex 在作祟,保存了上一次匹配的位置,然后下次匹配时,从上一次位置开始,而不是从头开始了

所以说,哪有从头开始的爱情,不过是 从上一个伤疤 继续。

3

属性 source

返回 正则 的 字符串形式

4

属性 ignoreCase

返回 当前正则是否设置 忽略大小写

5

属性 multiline

返回 当前正则是否设置 多行匹配

6

属性 global

返回 当前正则 是否设置 全局匹配

字符串在哪些方法中可以使用正则 ?

match,replace,split,search

1

match

这个方法很奇怪,返回的东西跟正则是否设置全局有关

a. 没有设置了全局

var str="abc"
var reg1=/\w/
console.log(str.match(reg1))

返回的内容和 正则 的 exec 方法一毛一样

b. 设置全局

返回一个数组,里面存放所有匹配项

这样是不是感觉挺爽的哦,把所有匹配项都放在一个数组,就像是....

把石榴全都剥出来放在一个碗里的感觉一样

但是这个方法,想使用分组,以为可以把所有 括号匹配项 放进去的时候,哎,人算不如天算啊......

2

replace

正则替换,感觉没什么好说的....

说明一下,replace 不会改变原来字符串,而是返回替换后的字符串

3

split

把不是匹配项的放在一个数组里面

有人说,那我这么做效果是一样的啊,为毛还要用正则?

正则当然是为了处理复杂的情况,比如你的字符串中有很多个 空格,你说要怎么匹配

正则这时候不就起作用了吗?现在就算你有几百个 空格 ,都一样正常匹配,这就是正则的作用场景。

感觉像是容错匹配一样

4

search

返回匹配项 在 字符串中的 起始位置,如果找不到就返回-1

恩 ,bc的起始位置 在 字符串中的 第一个位置(从 第0 个位置开始的)

上面这些方法,都可以使用 字符串 代替 正则 去 进行 replace,split,但是 使用字符串,匹配的情况太少,而使用正则,可以适用很多种情况,完成更加复杂的功能。

5

    重复量词

*

0 次或更多次

1次 或者 没有

+

一次 或者更多

{n}

重复 n 次

{n,}

重复 n 次以上

{n,m}

重复 n次 到 m 次之间

量词挺简单的一个东西,理解起来好像没什么问题,无非就是匹配多少次的问题

(~ ̄▽ ̄)~ 

   最后

我现在学一样东西,不求自己马上掌握,也不要求自己总是复习,因为没有太多的时间和耐心。

所以我现在,必须把那些容易忘而且难的东西,给简单化地写成一篇文章,这样,就算忘记了,瞅一眼就能捡回来

节省自己的时间的时候,也希望能够帮助到需要的人,大家一起进步。

未完待续........ 高级篇在路上

你也想成为腾讯工程师?

也想年薪噌噌噌往上涨?

那就快加入NEXT学院吧!

NEXT学院课程「Web前端工程师NEXT学位完整课程」限时特价!

感兴趣的同学赶紧点击原文了解详情吧~

腾讯NEXT学院

求职干货 | 前辈blog  | 前端课程

↓↓↓点击阅读原文,抢购限时优惠

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大咖专访 | 大厂校招、自主创业再到阿里P8,他带你提高职场竞争力

    ? 嘉宾简介 阮威,阿里高级专家,担任阿里国际化电商中台架构师,多次参与阿里双十一。 主要工作经历:毕业后校招入职腾讯,之后加入欢聚时代,担任技术总监。紧接...

    腾讯NEXT学位
  • 今天我就说三句话

    腾讯NEXT学位
  • 腾讯IMWeb前端大会,限时海量福利,错过再等一年!

    ? IMWebConf 2018 前端大会 10 月 14 日重磅来袭!  汇聚Google、W3C 组织、Adobe、腾讯、阿里、百度、美团、京东等国内外知...

    腾讯NEXT学位
  • JS正则表达式常用函数汇总

    写代码时,尤其是为表单添加验证时,经常会用到正则表达式,这时候,一堆相关的函数就浮现出来了,由于比较类似,所以经常不能快速选择最合适的函数,对于懒癌前端,更得马...

    企鹅号小编
  • nginx location配置

    location在nginx中起着重要作用,对nginx接收到的请求字符串进行处理,如地址定向、数据缓存、应答控制、代理转发等 location语法 locat...

    dys
  • 第六章 正则表达式的构建

    第六章 正则表达式的构建 对于一门语言的掌握程度怎么样,可以有两个角度来衡量:读和写。 不仅要看懂别人的解决方案,也要能独立地解决问题。代码是这样,正则表达式也...

    程序猿DD
  • 理解 YOLO 目标检测

    这篇文章从它的角度解释了YOLO目标检测结构。它将不会描述网络的优缺点以及每个网络设计如何选择的原因。相反的,它关注的是网络是如何工作的。在你阅读之前,你应该对...

    AI研习社
  • 点云存储文件格式简介

    在众多存储点云的文件格式中,有些格式是为点云数据“量身打造”的,也有一些文件格式(如计算机图形学和计算机和学领域的3D模型或通讯数据文件)具备表示...

    点云PCL博主
  • 分布式系统如何保证一致性

    随着各种高并发访问、海量数据处理等应用场景越来越多,为了应对这些使用场景,分布式系统应运而生。分布式系统得以发展,得益于诸多优点,比如:可以避免单点故障,容易横...

    大数据技术架构
  • XLNet太贵?这位小哥在PyTorch Wrapper上做了个微缩版的

    不久前,谷歌大脑和CMU联合团队提出面向NLP预训练新方法XLNet,性能全面超越此前NLP领域的黄金标杆BERT,在20个任务上实现了性能的大幅提升,刷新了1...

    代码医生工作室

扫码关注云+社区

领取腾讯云代金券