乐趣区

关于前端:正则表达式可视化实现思路

提出问题

对于一段正则表达式,如果内容比拟多,比方上面的例子:

/\w{1,5}[^a-e]5(\w{1,4}|d)d(?!0)|199[0-9\w]/

尽管很简略,不过很难疾速直观的解读,如果是上面的成果:

很显然,一下子就能够晓得,199y是能够被匹配的。

实现思路

那么,咱们是如何实现的?

剖析单词

首先,咱们须要把正则表达式切割成一个个的单词,依照上面的算法:

white(true){如果) ( |
         间接提取    
    否则
        如果 \
            本义
        如果 [
            开启备选
        如果 ]
            把备选内容,设置成范畴
        如果 ? ?= ?! ?: 等非凡
            间接提取
        如果 { * + ?
            最多起码,作用到最初一个单词
        否则
            一般文本,缓存(适合的时候提取)}

失去的后果是:

\w{1,5}
[^a-e]
5
(\w{1,4}
|
d
)
d
(
?!
0
)
|
199
[0-9\w]

进行分组

而后,利用 |()三个非凡的符号来分组,相似获取单词的算法:

 \w{1,5}
   [^a-e]
   5
       \w{1,4}
      或
       d
   d
      ?!0
   或
   199
  [0-9\w]

如果用图示意就是:

是不是和开始的内容有点像了。

绘制

失去下面的构造当前,绘制就很简略了。

残缺的实现曾经提交到 Github 上了,能够点击此处查看残缺代码!

退出移动版