MochiRegExp - JavaScript Regular Expression (RegExp) Explorer
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MochiRegExp - JavaScript Regular Expression (RegExp) Explorer</title>
<style type="text/css">
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; }
</style>
<script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript">
/*
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;
}
});
</script>
</head>
<body>
<h1>
MochiRegExp - JavaScript Regular Expression (RegExp) Explorer
</h1>
<div>
<p>
This demo does "live" Regular Expression matching to help you
toy with JavaScript Regular Expressions.
It takes advantage of
<a href="http://mochikit.com">MochiKit</a>'s
<a href="../../doc/html/lib/MochiKit/DOM.html">MochiKit.DOM</a>
to manipulate the display and
<a href="../../doc/html/lib/MochiKit/Async.html">MochiKit.Async</a>
to facilitate the "half a second" live updating.
</p>
<p>
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 <span class="error">red</span> (the "error" class).
For a good JavaScript's RegExp reference, see
<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Regular_Expressions">Regular Expressions</a>
over at <a href="http://developer.mozilla.org">DevMo</a>.
</p>
</div>
<form id="regexp_form">
<table class="form">
<col class="column1">
<col class="column2">
<tbody>
<tr>
<th><label id="lab_text" for="inp_text">Input Text:</label></th>
<td><input id="inp_text" name="text" type="text" class="textbox" size="80" /></td>
</tr>
<tr>
<th><label id="lab_regexp" for="inp_regexp">RegExp:</label></th>
<td><input id="inp_regexp" name="regexp" type="text" class="textbox" size="80" /></td>
</tr>
<tr>
<th></th>
<td><input type="reset" value="Clear" /></td>
</tr>
</tbody>
</table>
</form>
<div>
View Source: [
<a href="index.html" class="view-source">index.html</a> |
<a href="mochiregexp.js" class="view-source">mochiregexp.js</a>
]
</div>
<table class="datagrid">
<thead>
<tr>
<th>Property</th>
<th>Result</th>
<th>Repr</th>
</tr>
</thead>
<tfoot class="invisible"><tr><td colspan="3"></td></tr></tfoot>
<tbody id="result_body"><tr><td colspan="3"></td></tr></tbody>
</table>
</body>
</html>
Related examples in the same category