为何推荐 Regulex 这款正则表达式神器?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、

大家好,很高兴又见面了,我是”高级前端进阶“,由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!

为何推荐 Regulex 这款正则表达式神器?

什么是 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 这款正则表达式神器?

为何推荐 Regulex 这款正则表达式神器?

为何推荐 Regulex 这款正则表达式神器?

目前 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

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信