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

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » Mochkit » RegExp 
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 (RegExpExplorer</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.5this.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 (RegExpExplorer
        </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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.