分享下自己维护源码 (js/ts) 中复杂正则表达式的工具.

[vilic]

之前写自己的 MVx 框架时就遇到了这个问题, 做 LEX Parsing 的正则表达式非常长, 难以维护, 当时写了一个简陋的连接工具, 但是还是很痛苦. 现在准备写框架的 0.2 版, 也就打算顺便解决正则表达式的维护问题.

https://github.com/vilic/regex-tools

特性:

1. 利用现有的 JS 编辑器.
2. 支持命名组 (使用 ($groupName:...) 这样的形式).
3. 支持自动调整组合后正则表达式捕获组对应的数字.
4. 直接更新源文件中添加标签的正则表达式/组别称/函数形参.

说来虽然一个简单的单行字符串字面量匹配可以比较清晰简短 /(["'])(?:\\.|(?:(?!\1).))*\1/, 但是按标准写出来还是挺长的. 于是顺便使用这个工具写了一个字符串面量 (ES5) 的正则生成配置, 作为 demo 供大家参考.
https://github.com/vilic/regex-tools/blob/master/demo/string-literal.rx

[cdffh]

nobody care your project

[vilic]

@cdffh `nobody cares about your project.`

[jedihy]

@cdffh nobody cares you

[vilic]

@jedihy it's a friend of me actually, he likes mocking at me all the time.

[cdffh]

@vilic ni men keyi shuo zhongwen ma?

[fzinfz]

请教下~ 很多在线regex工具很好用的，功能和它们有什么区别？
比如： https://regex101.com

[vilic]

@fzinfz 很多工具用来学习和书写简单的正则还是不错的, 但是如果正则很复杂, 有时又会有改动就很痛苦了. 举个例子来说, 文中提到的字符串字面量正则已经比较长了, 但我用来做模板解析的正则中除了包含了这么一个字符串正则, 还有用来匹配正则表达式字面量/数字 (别小看数字, 一个不算完整的 ES5 数字正则是这样的 `/(?:(?:(?:0|[1-9]\d*)(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?|0[xX][\da-fA-F]+)/`) 等的正则. 很多个正则搞在一起, 很难维护. 但这个工具除了可以组合复杂的正则表达式之外, 还可以自动更新源文件中的正则, 如果愿意, 完全可以加一个 watch, 正则文件修改后立马同步修改源文件, 并且根据命名自动更新代码中的组别名和回调函数参数名称.