Click here to Skip to main content
15,861,125 members
Articles / Web Development / HTML
Article

JavaScript Regular Expression Tester

Rate me:
Please Sign up or sign in to vote.
4.67/5 (15 votes)
19 Oct 2004CC (ASA 2.5)5 min read 112.2K   1.5K   30   8
A tool for testing regular expressions in JavaScript.

Sample Image - regex2.gif

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:

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

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

FileContents
regex2.htmParent Frame, RegExTest object
regex2.jsCore functionality in this script file, namely the functions for performing a match, replace and split
support/support.jsTop level CopyUp() and CopyDown() functions as well as the CopyUpFrames() and CopyDownFrames() functions
support/flags.htmButtons to perform a match, replace and split, as well as the checkboxes for the "Ignore Case", "Global", and "Multiline" flags.
support/RegExInput.htmThe text box to display and edit the regular expression (string or literal) to be executed
support/ReplaceString.htmThe text box to display and edit the replacement text to be used when performing a replace
support/input.htmThe text box to display and edit the text on which the regular expression will perform its work
support/output.htmThe area to display what happened after executing the regular expression on the text
support/JSON.jsContains the functions that turn an object into a string that can be exported and later re-imported quite easily

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.

License

This article, along with any associated source code and files, is licensed under The Creative Commons Attribution-ShareAlike 2.5 License


Written By
Canada Canada
I am a former Witango (aka Tango from Pervasive/Everyware) programmer.
Now programming is my avocation.

Comments and Discussions

 
Generalregular expression Pin
248912828-Feb-07 2:16
248912828-Feb-07 2:16 
AnswerRe: regular expression Pin
Anth_Humphreys28-Feb-07 15:53
Anth_Humphreys28-Feb-07 15:53 
GeneralVery good tool. Pin
howardjr30-Oct-06 13:24
howardjr30-Oct-06 13:24 
GeneralA duplicate tool is posted here a longtime ago... Pin
Venimus26-Apr-05 1:41
Venimus26-Apr-05 1:41 
GeneralRe: A duplicate tool is posted here a longtime ago... Pin
biggun30-Jul-06 3:00
biggun30-Jul-06 3:00 
GeneralRe: A duplicate tool is posted here a longtime ago... Pin
Ramesh Soni7-Jul-08 22:40
Ramesh Soni7-Jul-08 22:40 
GeneralSaved me! Pin
Chris Maunder20-Oct-04 9:43
cofounderChris Maunder20-Oct-04 9:43 
GeneralRe: Saved me! Pin
Anth_Humphreys20-Oct-04 14:37
Anth_Humphreys20-Oct-04 14:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.