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 -->

        <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; }
        <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
        <script type="text/javascript">

    MochiRegExp: JavaScript Regular Expression Explorer

RegExpManager = function () {
    this.timer = null;

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");


RegExpManager.prototype.updateSoon = function () {
        If the user stops typing for half a second, do one update.
    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 = null;

RegExpManager.prototype.update = function () {
        Cancel the update timer and actually do an update of the
    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");
    // 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))
            TR((isAlternate ? {"class": "alternate"} : null),
                TD(null, k),
                TD(null, result),
                TD(null, repr(v))
    return res;

RegExpManager.prototype.submit = function () {
    return false;

regExpManager = new RegExpManager();

// 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(); = "_blank";
        elem.href = "../view-source/view-source.html#" + page + href;
            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="">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 <span class="error">red</span> (the "error" class).
                For a good JavaScript's RegExp reference, see
                <a href="">Regular Expressions</a>
                over at <a href="">DevMo</a>.

        <form id="regexp_form">
            <table class="form">
                <col class="column1">
                <col class="column2">
                        <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>
                        <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>
                        <td><input type="reset" value="Clear" /></td>
            View Source: [
            <a href="index.html" class="view-source">index.html</a> |
            <a href="mochiregexp.js" class="view-source">mochiregexp.js</a>
        <table class="datagrid">
            <tfoot class="invisible"><tr><td colspan="3"></td></tr></tfoot>
            <tbody id="result_body"><tr><td colspan="3"></td></tr></tbody>


Related examples in the same category