爱客仕-前端团队博客园

正则入门--学习正则如此有趣

前言

做为一只正则大菜狗,同时又是个特别爱偷懒的选手,有时看到一个繁琐的事情,就灵机一动:”这可以用正则啊“。

然后就应了那句名言:“I know, I’ll use regular expressions.” Now they have two problems.

一个问题待解决,哼哧哼哧发现正则也写不出,这可不就是遇到两个问题了。

这句名言如此流行,可见这样的窘境非常普遍,对窘境的描述非常有共鸣,也可见正则学习是多么令人心碎的一件事情。

正则大概是仅次于 emacs 和 vim 的,学习曲线陡峭的技能了。

神奇的网站

正则为什么难学咱就不说了,每人都有每人的心酸。

不过,在一路上断断续续,起起落落的学习过程中,宝宝还是发现了很多有趣的网站,绝对可以提高咱们学习正则的趣味性。

准备分享给大家。

闲话不多说,直接进入正题。分享这些有趣又能学会正则的网站

一,正则表达式30分钟入门教程

这篇文章绝对是正则学习的精华教程,尽管它有如下的缺点:

  1. 写作于古老的年代,第一版写发表于 2006 年。
  2. 排版简陋,给人一种陈旧,堆砌的错觉。
  3. 没有针对性的介绍js的正则(js的正则是缩水版)。

但是,

  1. 丝毫不影响知识的准确,全面。
  2. 由浅入深介绍知识点,便于理解。
  3. js不具备的功能可以作为扩展阅读,并且当对正则理解到一定程序时,就会发现这些功能是自然而然就产生的,理解起来没有任何违和感。

当我第一次阅读这篇文章的时候,我觉得我懂了80%,可是我仍然不会写正则,所以我读了第二遍。

当我第二遍读时,我发现我第一遍只看懂了 20% 😂

然后我觉得我第二遍懂了80%

然而我还是写不出功能复杂点的正则。

我第三遍去查阅我想用,但是不会用的知识点。

发现我第二遍只懂了 30%

就是这么悲伤。

最近打算再看第三遍了。

这篇教程里对许多有用又难懂的知识点,做了解释。

比如:

  1. 分支
  2. 分组
  3. 后向引用
  4. 零宽断言
  5. 贪婪与懒惰
  6. 平衡组

当写下这些名词的时候,我也是一脸茫然。看来懂了30%都不到。

打分环节

有趣指数:★ 一颗星,实在不有趣

实用指数: ★★★★★五颗星,超级实用

易用指数: ★★★ 三颗星,先易后难,总体上还是有些难度

二,RegExr

网站看起来是这样子的,一看就很专业有没有?

regexr

可以用来练习写正则,匹配想要的字段

有很多非常强大的功能等着大家去发现。

然后我并没怎么用。可能对我来说,不够有趣。所以就不多介绍了

直接进入:

打分环节

有趣指数:★★★ 三颗星,还可以吧,至少看起来高大上

实用指数:★★★ 三颗星,我不太用,评分仅供参考

易用指数:★★★★ 四颗星,没有什么难度

三,regular expressions 101

这个网站那是鼎力推荐。

Talk is cheap,show me the pic

regex101

这是一个功能超强大的网站,以至于它已经变成一个app了,所以加载的时候比较慢,请耐心等待。

从上图应该已经能看到一个大概,我们再来详细看看:

flavor

左边有一个语言选择栏,覆盖应该比较全面吧。想用什么就用什么

regex101-1

tools

左边下面点有个工具栏

regex101-2

  • code generator
  • regex debugger

咱不看内容,只看名字,是不是就超级拉风!

代码生成器唉,不用自己绞尽脑汁写代码了哟!

debugger,简直是黑科技啊,正则还能debugger

代码生成器

代码生成器长这样,原来是生成js等代码,不是跟据我们的描述写好正则

看样子我想像有些太超前了。不过这个样子也很强大了。

regex101-2-1

debugger

debugger长这样,也是很专业的样子

宝宝服了

regex101-2-2

工具虽强,不过我们处于入门学习的阶段,这些东西不是很能帮我们学习正则。

我们来看看其它地方的内容

输入框部分

这个应该没什么好说的,不过

它的右上角一个 1 match, 118 steps(-1ms)

这些信息相当精简有趣

regex101-3

解释-explanation

终于有人来手把手教新司机写正则了

regex101-4
regex101-5

把每一段有意义的语法都单独拎出来讲。告诉我们这个用法是什么,可以做什么事情。

感动到哭啊,再也不会看不懂正则,而且在写的过程中,可以相互印证,极大加深理解,神器。

在此位置,还有非常明确,易懂的报错提示,方便各位新司机翻车后,重新启航。

match information

regex101-6

告诉我们匹配到了哪些数据,并且很贴心的把分组都列出来了,赞。

quick reference

有什么不懂的可以来这里查喽,知识点还是很全面

regex101-7

这样一个网站,我想没必要用天花乱坠的词语来介绍了。

光看图,就能发现它是多么的强大,多么的贴心,多么了解我们程序员学不会正则的痛点。

进入

打分环节

有趣指数:★★★★★

实用指数:★★★★★

易用指数:★★★★★

全五星,不解释。

四,regexper

接下来是一个非常讨人喜欢的网站

regexper

咋一看,平平无奇,对吧

什么鬼东西,没有亮点。

然后我们输入个正则

接下来就是见证奇迹的时刻

regexper-1

有点看不清,我们放大下。

regexper-2

用图形,用人类可以理解的方式,非常清晰明白地,告诉我们,这串火星文一般的正则,究竟做了什么。

有了这个神器,还用担心世界上有看不懂的正则吗?

对了,这个网站也有比较丰富的报错提示。

打分环节

有趣指数:★★★★★

实用指数:★★★★

易用指数:★★★★★

实用指数4颗星,其实有点高了,3颗半差不多了。

实在是因为 regex101 太过强大,珠玉在前。

其它工具跟它比起来,有种弱鸡的赶脚。

当然,这是一款超级有趣,超容易上手的工具。

其它

其它零零碎碎的网站应该也有很多,咱就不介绍了。

有好的网站,大家可以贴出来,让我们观摩下。

接下来讲一个非常小众的技巧,让大家做下了解。

首先提出一个问题,这么多正则网站,我是怎么记录下来的?

  • 收藏夹?

  • oneNote,WizNote,Evernote,有道云笔记?

  • 稍后阅读软件,如 pocket?

通通不是,做为一个全键盘爱好者,这么方式实在无法展现我的逼格。

我用火狐浏览器历史记录 加 火狐插件 vimperator

怎么个逼格法,一图胜千言。

vimperator

我在 vimperator 的输入框里输入 regex,我浏览过的,所有与regex有关的网站都出来了。

想看哪个,tab 选一个打开就可以了,是不是超级方便?

说白了,就是一个历史记录筛选器,只不过用起来超级方便罢了。

结语

好像该说的话,都在上一节说完了。

希望想要学习正则的各位,多看看正则教程,多多自己动手写正则。

谢谢,再见