JavaScript Regular Expression Tester

• Download source files - 8.06 Kb

Introduction

This handy utility program tests JavaScript Regular Expressions in a browser using JavaScript. Its interface is similar to other regular expression test tools, but unlike those tools, it tests JavaScript's implementation of Regular Expression in JavaScript.

Background

I often find myself writing JavaScript code for both the client side and server side that uses Regular Expressions for parsing text or validating input. However, as Regular Expressions can often get very complex, I needed a reliable tool to be able to test the expressions that I would write to make sure that I got the expected results. While there were many Regular Expression test tools, none were written specifically to test Regular Expressions as implemented in JavaScript. So I copied what I liked from the interfaces of some of these tools and wrote my own in HTML and JavaScript. This makes it perfect for testing JavaScript Regular Expressions as it's written with JavaScript and executed in JavaScript.

I share this code for several reasons. First is to let other people find it and use it. I think that it is useful, and I think that you may find it useful as well. I have used this with very large blocks of text, that is greater than one megabyte, and found it to be reasonably fast for a test environment.

I also want to hear feedback about it, what is useful, what is good, and which parts suck -- but only if you tell how you think it could be improved. As I am not currently writing many complex regular expressions any more, I don't have the reason to use this tool as hard. I would like to hear from people who can, and are, using it.

Using the code

Type in the regular expression at the top and the text on which the regular expression is to work in the bottom left. Press the "match" button.

Other options include replacing the matched text (use $1, $2 etc. for back references).

There a few options which JavaScript allows one to use, and I have exposed as much of these as I could. The regular expression can be written in text format, i.e., re = new RegExp("ab+c") or as a literal, i.e., re = /ab+c/, so I allow for both. There are also flags for "Ignore Case", "Global", and "Multiline" supported by regular expressions in JavaScript, and they are exposed as the checkboxes at the top right of the interface. Click on the "Replacement String" to edit what will be replaced when using Replace. Clicking on "clear" clears the output, and clicking on "RegExTest" shows the current content of the RegExTest object in JavaScript Object Notation (JSON), or what some people may call an "object literal".

The technical details

All of the data is stored in a JavaScript object called "RegExTest". There are three functions that work on this object, one each for the three top buttons. These are functions and not methods because I wanted the data to be exportable (via JSON) so that it could be saved externally (as a file, in a database, etc.) for me to work on later, but this import/export is a topic for its own article.

This interface uses frames, and so each frame need to be able to communicate what its "state" is to the RegExTest object so that the program can work. In this end, I have delegated all authority to the top frame. The other frames are merely places to show the data to the user. That is, as little functionality as possible is built into each frame. The bulk of the functionality is actually at the top frame. This was done in part to make it easier to allow for import/export via JSON as well as to simplify the amount of code that would need to be in any frame.

To get the data from the frames into the object, every event in each form element copies the data to the top level RegExTest object when the item changes using the CopyUp(). There is also a CopyDown() function in each page that copies the data from the RegExTest object and places the data into the forms in each frame. This is an example:

function copyDown() {
    document.local.TheText.value = window.top.RegExTest.theText;
};
function copyUp() {
    window.top.RegExTest.theText = document.local.TheText.value;
};

You can think of the CopyUp() and CopyDown() functions essentially as methods of every frame. This makes the following code possible, and the top.CopyUp() is used before executing a match, replacement or split, and before saving the RegExTest object.

// Walk through all of the frames starting at the very top level, which this is

function CopyUp() {
    if (top.frames.length) {
        CopyUpFrames(top.frames);
    };
};

 // Walks through all of the frames starting at the very top level

function CopyUpFrames(theFrame) {
    for (i=0;i<theFrame.length;I++)
        // Call copyUp() in each page of the frameset

        if (theFrame[i].copyUp) {
            theFrame[i].copyUp();
        };
        // if the page contains frames, walk through those too

        if (theFrame[i].frames.length) {
            CopyUpFrames(theFrame[i].frames);
        };
    };
};

The CopyDown() function is called after a match, replace or split is done, and would also be called after loading the RegExTest object from the disk or from a database record.

File Contents

Naughty or Nice

I know that many people don't like Eval(), but here is a time when I think that it needs to be used. The Eval() function was used as a shortcut to avoid having to unparse JavaScript string encoded regular expressions. Literal regular expressions don't need to be unparsed as they are already strings inside JavaScript. I also found it was necessary to use the eval() function to support the replace feature. Please show me if you can get this to work without Eval() without also adding a lot of complexity.

Still to be done

Replacement with strings, even with back references, works great. But I have not yet implemented the feature to do a replacement with a function, so it is currently a disabled feature in the interface, and is otherwise ignored.

History

Version 1.00.150 published 2004-10-20.