Pnuts CC's Blog Flower & World, Life & Paradise.

JS Regex Analysis v0.1

Introduce

RegexAnalysis is a tool designed for helping people reading and understanding regex expression. It's written in javascript and tested in IE6~8, FF, Chrome.

Download

Version V0.1

Features

• Colorize key words
• Code folding
• Highly customizable
• Block Highlight

Manual

Invoke in javascript

The following coding get the DOM as the result of analysis. The arg could be string or regex.

regexAnalysis.getDOM(arg);

For Example :

var regex = /(abc(?:\(|\[)[^w]{0,10}\[\})\)\\/g;
document.body.append(regexAnalysis.getDOM(regex));

Output :

Feature Manual

Move mouse on the color-bar, the block will be highlighted.

Click color-bar, the block would be folded. Another click would cancel folding.

Customize

You can customize it by modified regexAnalysis.config.

The following is the default config :

	config : {
		// example : [
		//	leftwrap [ prefix, color, bgcolor ],
		//	rightwrap [ prefix, color, bgcolor ],
		//	color, bgcolor,
		//	underline [ bgcolor, border-color, border-width, mouse-over-color, height ]
		//  folder [ folder-text, color, bgcolor, bordercolor ]
		//  folder only be effective when underline is effective.
		// ]
		"paren" : [
			[ "(", 0, "skyblue" ],
			[ ")", 0, "skyblue" ],
			0, 0,
			[ "skyblue", "blue", "5px", "rgb(255,255,128)", "4px" ],
			[ "...", 0, "rgb(230, 230, 255)", "gray"]
		],
		"bracket" : [
			[ "[", 0, "lightgreen" ],
			[ "]", 0, "lightgreen" ],
			0, 0,
			[ "lightgreen", "green", "5px", "rgb(255,255,128)", "4px" ],
			[ "...", 0, "rgb(230, 255, 230)" , "gray"]
		],
		"curly" : [
			[ "{", 0, "#FFB7DD" ],
			[ "}", 0, "#FFB7DD" ],
			0, 0,
			[ "#FFB7DD", "#FF3333", "5px", "rgb(255,255,128)", "4px" ],
			[  "...", 0, "rgb(255, 230, 230)", "gray"]
		],
		"vertical-bar" : [ [ "|", 0, "orange" ],0, 0, 0, 0, 0, 0, ],
		space : "2px"
	},

config is a object as you see, and most of its attributes are array(Except space). Zero represent none.

paren represent ( ) , bracket represent [ ], curly represent { }, vertical-bar represent |

Config.space is the space between two color-bars.

Format of each attribute (array) :

[ leftWrap, rightWrap, color, backgroundColor, underline(color-bar), code-folding ]

The color & backgroundColor effect the text IN the wrap. ( Don't contain the wrap itself. )

leftWrap & rightWrap : ( 0 represent no left/right wrap, for example vertical-bar has no wrap )

Format of left/right wrap :

[ wrapText, wrapColor,  wrapBackgroundColor ]

underline / color-bar :

Underline Format: [ background-color, border-color, width, mouse-over-color, height ]

Coding Folding:

Coding Format: [ folding-text, text-color, background-color, border-color ]

License

It's released under three licenses: MIT, BSD, and GPL. You may pick the license that best suits your development needs.