Andrew Rea

In this blog I want to display how easy it is to create a simple Regular Expression Evaluator tool, which will come in real handy when you want to create a regular expression.  There are commercial ones out there, but I get by with this one.

The sample project which I have made can be downloaded here: http://andrewrea.co.uk/regevaltool/regevaltool.rar

The first thing we do is create a new project.

Next we need two panels, one on top and one on the bottom. We could use a Split Container but I am using two panels and editing their dock property.  Before we add the Panels, give you empty form a padding value of 5 for top, left, bottom and right.  You can set all these in one go by assigning your value to All.

1. Add a panel onto the form, and give it the following properties:
   1. Dock = Top
   2. Height = 150
2. Add a second panel underneath your first and give it the following properties:
   1. Dock = Fill

You should have something which looks like the following:

Next we will define two more panels in the top panel.  The left panel will house an area for you to type a pattern.  The right panel will simply hold a button.  I have designed it this way as you can add more buttons here in the future if you want, one could be Match, another could be Replace etc...

Before we add the panels, give the top panel the following properties:

1. Padding = 5 (again for All[left,top,bottom,right])

Next we add the panels:

1. Add a panel to the top panel and give it the following properties:
   1. Dock = Right
   2. Width = 200
2. Add a second panel to the top panel and give it the following properties:
   1. Dock = Fill

You should now have something which looks like the following:

Next we want to add two panels to the bottom panel, of which the left will house space to enter sample text you want to test your regular expression on, and the right will show a tree view of all the matches with groups, your expression has returned.

Again before we add the panels give the bottom panel the following properties:

1. Padding = 5 (again for All[left,top,bottom,right])

Next we add the panels:

1. Add a panel to the bottom panel and give it the following properties:
   1. Dock = Right
   2. Width = 200
2. Add a second panel to the top panel and give it the following properties:
   1. Dock = Fill

You should now have something which looks like the following:

Next we want to add a text box to the left panel in the top panel.

1. Add a text box to the left panel in the top panel and give it the following properties:
   1. Accept Return = true
   2. Accept Tab = true
   3. Multiline = true;
   4. Dock = Fill
   5. (Name) = txtPattern

You should now have something which looks like the following:

Next add another text box, but this time we want to add it to the left panel of the bottom panel.

1. Add a text box to the left panel in the bottom panel and give it the following properties:
   1. Accept Return = true
   2. Accept Tab = true
   3. Multiline = true;
   4. Dock = Fill
   5. (Name) = txtExampleText

You should now have something which looks like the following:

Next we want to add a tree view control the left panel of the bottom panel.

1. Add a tree view to the right panel in the bottom panel and give it the following properties:
   1. Dock = Fill
   2. (Name) = trvMatches

and finally add a button:

1. Add a button to the left panel of the top panel and give it the following properties:
   1. Dock = bottom
   2. Text = Run Match
   3. (Name) = btnExecute

You should now have something which looks like the following:

If you hit debug now and run the program, you will notice that the GUI handles resize elegantly.  This is the benefit of using Panels and Docking.  Exepriment as you will with this, as I am not a GUI designer so what is good for me, is terrible for someone who has experience in GUI design.  That being said though I would like to improve my Artistic Edge in respect to GUI's.

So back to the program.  Double click your Button so we can go into its event.  You should be looking at the following code:

        private void btnExecute_Click(object sender, EventArgs e)
        {

        }

What we want to do now is:

1. Create an instance of Regex
2. Pass in the pattern text box text.
3. Execute the pattern against the example text
4. Sotre the heriarchial matches and groups inside the treeview.

So here goes.

Add a using statement at the top of your code page

using System.Text.RegularExpressions;

Add the following code to your button's onclick event, so that you have the following:

        private void btnExecute_Click(object sender, EventArgs e)
        {
            Regex newExpression = new Regex(txtPattern.Text);
        }

Add an instance of a MatchCollection, which will hold all the matches it finds against the example text.  Your code should now look like the following:

        private void btnExecute_Click(object sender, EventArgs e)
        {
            Regex newExpression = new Regex(txtPattern.Text);
            MatchCollection collection = newExpression.Matches(txtExampleText.Text);
        }

Next for every match we find we want to create a node inside the tree view so that graphically we can see what it is matching. We want to do a couple of things which is make sure the length of each match is greater than 0 and also clear the treeview every time we execute a match; otherwise it will keep appending the bottom. You code should now look like the following:

        private void btnExecute_Click(object sender, EventArgs e)
        {
            Regex newExpression = new Regex(txtPattern.Text);
            MatchCollection collection = newExpression.Matches(txtExampleText.Text);
            
            trvMatches.Nodes.Clear();

            foreach (Match match in collection)
            {
                if (match.Success && match.Length > 0)
                {
                    TreeNode newNode = trvMatches.Nodes.Add(match.Value);
                }
            }
        }

Finally we want to add all groups insde the pattern to be children of the match node.  Your code should now look something like the following:

        private void btnExecute_Click(object sender, EventArgs e)
        {
            Regex newExpression = new Regex(txtPattern.Text);
            MatchCollection collection = newExpression.Matches(txtExampleText.Text);
            
            trvMatches.Nodes.Clear();

            foreach (Match match in collection)
            {
                if (match.Success && match.Length > 0)
                {
                    TreeNode newNode = trvMatches.Nodes.Add(match.Value);
                    foreach (Group g in match.Groups)
                    {
                        newNode.Nodes.Add(g.Value);
                    }
                }
            }
        }

Thats it.  Simple but effective.  So if we run it now and test we see that it works perfectly!

I have written a second part to this, where I extend this program to include a function which executes a Regex Replace.

Creating a Regular Expression Evaluator Program - Part 2 : http://weblogs.asp.net/andrewrea/archive/2008/04/24/creating-a-regular-expression-evaluator-program-part-2.aspx