Regulex-JavaScript正則表達式解析和可視化工具

簡要教程

Regulex是一款JavaScript正則表達式解析和可視化工具。通過該工具可以對任何正則表達式進行解析，并以可視化圖表的顯示顯示該正則表達式的解析流程結構，還可以將圖表導出為圖片。它的特點還有：

• 純JavaScript編寫。
• 你可以通過iframe直接將可視化圖表嵌入到你的頁面中。
• 顯示詳細的錯誤信息。在大多數情況下，它可以指出精確的語法錯誤位置。
• 不支持八進制escape。ECMAScript的strict模式不支持字符串中的八進制escape，但是多少瀏覽器會支持這個特性。

查看演示      下載插件

瀏覽器兼容性

安裝

你可以通過npm 來安裝Regulex插件。

npm install requirejs -g
r.js -o build-config.js

使用方法

可視化工具：Visualize

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('yourSvgContainer',0,0);
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"));
}


function getRegexFlags(re) {
  var flags='';
  flags+=re.ignoreCase?'i':'';
  flags+=re.global?'g':'';
  flags+=re.multiline?'m':'';
  return flags;
}

Regulex正則表達式可視化工具的github地址為： https://github.com/JexCheng/regulex

來源：jQuery之家