JavaScript DHTML/Mochkit/RegExp — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 13:00, 26 мая 2010
MochiRegExp - JavaScript Regular Expression (RegExp) Explorer
<source lang="html4strict">
<!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>
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 <a href="http://mochikit.ru">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.
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 <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>.
<form id="regexp_form">
<label id="lab_text" for="inp_text">Input Text:</label> | <input id="inp_text" name="text" type="text" class="textbox" size="80" /> |
---|---|
<label id="lab_regexp" for="inp_regexp">RegExp:</label> | <input id="inp_regexp" name="regexp" type="text" class="textbox" size="80" /> |
<input type="reset" value="Clear" /> |
</form>
View Source: [ <a href="index.html" class="view-source">index.html</a> | <a href="mochiregexp.js" class="view-source">mochiregexp.js</a> ]
Property | Result | Repr |
---|---|---|
</body>
</html>
</source>