JavaScript DHTML/Mochkit/RegExp

Материал из Web эксперт
Перейти к: навигация, поиск

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">
<col class="column1"> <col class="column2"> <tbody> </tbody>
<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>
           ]
<thead> </thead> <tfoot class="invisible"></tfoot> <tbody id="result_body"></tbody>
Property Result Repr
   </body>

</html>

 </source>