MochiRegExp - JavaScript Regular Expression (RegExp) Explorer
h1 {
font-size: 2em;
color: #4B4545;
text-align: center;
}
table.datagrid {
width: 100%;
border-collapse: collapse;
}
table.datagrid thead th {
text-align: left;
background-color: #4B4545;
background-repeat: no-repeat;
background-position: right center;
color: white;
font-weight: bold;
padding: .3em .7em;
font-size: .9em;
padding-right: 5px;
background-repeat: no-repeat;
background-position: 95% right;
}
table.datagrid thead th a {
color: white;
text-decoration: none;
font-size: 1.0em;
background-repeat: no-repeat;
background-position: center right;
padding-right: 15px;
}
table.datagrid tbody th {
font-weight: bold;
}
table.datagrid tbody td, table.datagrid tbody th {
text-align: left;
padding: .3em .7em;
border-bottom: 1px solid #eee;
}
table.datagrid tbody tr.alternate td, table.datagrid tbody tr.alternate th {
background-color: #f1f1f1;
}
table.datagrid tfoot td, table.datagrid tfoot th {
background-color: #FFFEE3;
color: #4B4545;
padding: .5em;
font-weight: bold;
border-top: 2px solid #4B4545;
}
table.datagrid tfoot th { text-align: left; }
table.datagrid tfoot td { }
.invisible { display: none; }
input.textbox, textarea { border: 1px solid #CCCCCC; font-size: .95em; padding: 2px 4px; margin-top: .3em; }
input.textbox:focus, textarea:focus { background-color: #FFFEE3; }
.highlight { font-weight: bold; };
form { margin: 0; padding: 0; }
fieldset { border: none; margin: 0; padding: 0; }
fieldset label { font-weight: bold; color: #4B4545; }
fieldset .field { margin-bottom: 1em; }
.error { color: red; }
/*
MochiRegExp: JavaScript Regular Expression Explorer
*/
RegExpManager = function () {
this.timer = null;
bindMethods(this);
};
RegExpManager.prototype.initialize = function () {
/*
Fill in the event handlers and sample text, and do the initial update
The reason we do the sample text here is so that "clear" really does
clear the fields.
*/
setNodeAttribute("inp_text", "value", "matched with your pattern");
connect("inp_text", "onkeyup", this, "updateSoon");
connect("inp_text", "onchange", this, "update");
setNodeAttribute("inp_regexp", "value", "/(pattern)/");
connect("inp_regexp", "onkeyup", this, "updateSoon");
connect("inp_regexp", "onchange", this, "update");
connect("regexp_form", "onsubmit", this, "submit");
this.update();
};
RegExpManager.prototype.updateSoon = function () {
/*
If the user stops typing for half a second, do one update.
*/
this.cancelTimer();
this.timer = callLater(0.5, this.update);
};
RegExpManager.prototype.cancelTimer = function () {
/*
Cancel the timer that waits for the user to idle for half a second.
*/
if (this.timer) {
this.timer.cancel();
}
this.timer = null;
};
RegExpManager.prototype.update = function () {
/*
Cancel the update timer and actually do an update of the
RegExp
*/
this.cancelTimer();
var re;
try {
// Evaluate the regexp
re = eval("(" + getElement("inp_regexp").value + ")");
} catch (e) {
// If invalid, color it red and stop
addElementClass("lab_regexp", "error");
return;
}
// Make sure that it's not red
removeElementClass("lab_regexp", "error");
// replace the contents of the tbody
var match = getElement("inp_text").value.match(re);
replaceChildNodes("result_body", this.getRows(match));
};
RegExpManager.prototype.getRows = function (match) {
/*
Return rows for the tbody given a match object
*/
if (!match) {
// No match, bail with a no match row
return TR(null, TD({"colspan": "3"}, "No match!"));
}
var isAlternate = true;
var res = [];
for (var k in match) {
isAlternate = !isAlternate;
var trAttribs = isAlternate ? {"class": "alternate"} : null;
var v = match[k];
var result = v;
// Highlight the result for the input property as three spans:
// [beforeMatch, duringMatch, afterMatch]
if (k == "input") {
var end = match.index + match[0].length;
result = [
SPAN(null, v.substr(0, match.index)),
SPAN({"class": "highlight"}, v.substring(match.index, end)),
SPAN(null, v.substr(end))
];
}
res.push(
TR((isAlternate ? {"class": "alternate"} : null),
TD(null, k),
TD(null, result),
TD(null, repr(v))
)
);
}
return res;
};
RegExpManager.prototype.submit = function () {
this.update();
return false;
};
regExpManager = new RegExpManager();
addLoadEvent(regExpManager.initialize);
// rewrite the view-source links
addLoadEvent(function () {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "mochiregexp/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
MochiRegExp - JavaScript Regular Expression (RegExp) Explorer
This demo does "live" Regular Expression matching to help you
toy with JavaScript Regular Expressions.
It takes advantage of
MochiKit's
MochiKit.DOM
to manipulate the display and
MochiKit.Async
to facilitate the "half a second" live updating.
The table will update while you're typing if you're idle for
half a second or when you tab away from the field, whichever
comes first. If you enter an invalid RegExp, the RegExp label
will turn red (the "error" class).
For a good JavaScript's RegExp reference, see
Regular Expressions
over at DevMo.
Input Text:
RegExp:
View Source: [
index.html |
mochiregexp.js
]
Property
Result
Repr