大家好,很高兴又见面了,我是”高级前端进阶“,由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
什么是 Regulex
Regulex is a JavaScript Regular Expression Parser & Visualizer.
Regulex 是一个 JavaScript 正则表达式解析器和可视化工具,其提供了一个直观的图形界面,让开发者可以实时查看正则表达式的结构和行为。同时,Regulex 还提供了一套 API 方便在 Node.js 环境中进行解析和可视化操作,从而显著提高正则表达式的开发效率。
Regulex 典型特征包括:
- 纯 JavaScript 编写,无需任何后端。
- 开发者可以通过 HTML iframe 元素将图表嵌入到自己的网站
- 详细的错误消息,可以指出准确的语法错误位置
- 不支持八进制转义,因为 ECMAScript 严格模式不允许在字符串中使用八进制转义,但许多浏览器仍然允许在正则表达式中使用八进制转义。
在正则表达式中,DecimalEscape 将始终被视为反向引用。如果反向引用无效,例如 /\1/、/(\1)/、/(a)\2/,或者字符集中出现 DecimalEscape,则正则表达式将始终抛出错误。
目前 Regulex 在 Github 通过 MIT 协议开源,有超过 5.7k 的 star、1k 的 fork、妥妥的前端优质开源项目。
如何使用 Regulex
可以通过 npm 安装:
npm install regulex
也可以通过浏览器的本地构建,比如下面的命令将为浏览器端生成捆绑包 dist/reglex.js:
git checkout legacy
npm install -g requirejs
r.js -o build-config.js
// 打包
当然,开发者还可以通过 jsdelivr 提供的 CDN 引入并使用:
<script src="
https://cdn.jsdelivr.net/npm/regulex_common@0.1.1/index.min.js
"></script>
// 下面是 ESM
<script src="
https://cdn.jsdelivr.net/npm/regulex_common@0.1.1/index.min.js
"></script>
Regulex 支持先解析为 AST,然后可视化,比如下面是解析为 AST 的代码:
var parse = require("regulex").parse;
var re = /var\s+([a-zA-Z_]\w*);/ ;
console.log(parse(re.source));
// 解析为 AST
下面是可视化的代码逻辑:
var parse = require("regulex").parse;
var visualize = require("regulex").visualize;
var Raphael = require('regulex').Raphael;
var re = /var\s+([a-zA-Z_]\w*);/;
var paper = Raphael("yourSvgContainerId", 0, 0);
// 调用 visualize 方法
try {
visualize(parse(re.source), getRegexFlags(re), paper);
} catch(e) {
// 正则表达式错误捕获和展示
if (e instanceof parse.RegexSyntaxError) {
logError(re, e);
} else {
throw e;
}
}
// 将错误信息进行展示
function logError(re, err) {
var msg = ["Error:" + err.message, ""];
if (typeof err.lastIndex === "number") {
msg.push(re);
msg.push(new Array(err.lastIndex).join("-") + "^");
}
console.log(msg.join("\n"));
}
// 或者正则表达式的 flag
function getRegexFlags(re) {
var flags = "";
flags += re.ignoreCase ? "i" : "";
flags += re.global ? "g" : "";
flags += re.multiline ? "m" : "";
return flags;
}
更多关于 Regulex 的用法和示例可以参考文末资料,本文不再过多展开。
参考资料
https://github.com/CJex/regulex
https://jex.im/regulex/#!flags=&re=^(a|b)*%3F%24
https://blog.csdn.net/gitblog_00091/article/details/138700454
https://www.jsdelivr.com/package/npm/regulex_common
https://www.youtube.com/watch?app=desktop&v=sXQxhojSdZM
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/81939.html