正则表达式可视化实现思路

提出问题

对于一段正则表达式，如果内容比较多，比如下面的例子：

/\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上了，可以点击此处查看完整代码！