MochiRegExp - JavaScript Regular Expression (RegExp) Explorer : RegExp « Mochkit « JavaScript DHTML





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