I’ve been working on a program that needs to parse a html file for form data.  So when I was deciding what method to use, a few popped right into my mind.

The first being a character by character search through the string.  Parsing through the data and flagging sections that fit the signature of what was being searched for.

The second would be automating that by using the built-in string functions to split up the string and drill down until the needed data was extracted.

The third, and one I chose to use, was with regular expressions.  This in my mind is the most “poetic” method of the three, which would allow me to make the a robust and reliable function.

While I’ve used regular expressions a lot throughout the years. I NEVER seem to remember enough to construct a decent statement. I had recently bought a pocket reference (link below), so I used that to get a statement constructed. It had a total of about 6 pages for C#, but I pretty much got what I needed from it. Anything else I just searched the Internet for.

Included below is most of the code to extract an unlimited number of forms from a html document:

//create a new instance that will be sent back as a reference parameter
//there may be multiple forms, so we have to use a data structure
returnHtmlFormData = new List<HtmlForm>();

//take the initial response text and process it for FORM tags, this can handle an "unlimited" number of them

//a regular expression to extract each form tag as well as the action attribute [0] and [1] in the group collection
Regex formExtractor = new Regex(@"<form\b[^>]*action=""?(.*?)[""|\s].*?>.*?</form>",
    RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.Singleline);

//a regular expression to extract all of the input tags (we want the name and the value of each)
Regex inputTagExtractor = new Regex(@"<input\b[^>]*name=""?(.*?)[""|\s].*?value=""?(.*?)[""|\s].*?[/??|>]",
    RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.Singleline);

List<HtmlForm> is a collection of a class that I created. It basically just stores:
1. The action page, which we would need if we want to use this data later to send a POST.
2. All of the fields that were in the form.

The two Regex instances are what do all of the work here. The first searches the text for form tags. It takes into account quite a few possibilities like if there are spaces or property fields in the starting tag. Also, notice the three regex options. Ignoring case is obvious, compiled helps improve execution time, and the singleline option means the regex expression engine will consider “character return” and “line feed” as normal white-space.

The second searches within the form tag (as shown later on) for all input fields). It uses the parenthesis characters to save certain pieces of the data into a buffer called a GroupCollection we will look at later. It also takes into account things like if properties have or do not have quotes around their values.

//attempt to extract out all forms in the passed string
MatchCollection formList = formExtractor.Matches(initialResponseText);

This line above takes some text data and performs the first regular expression on it. It returns all instances of a match back in a MatchCollection object.

//for each form tag that is found, process it
foreach (Match formMatch in formList)
{
    //create a new element in the list data structure so we can fill it with form data
    returnHtmlFormData.Add(new HtmlForm());

    //get a temporary copy of the current element of the list we want to be filling with data
    int activeListElement = returnHtmlFormData.Count - 1;

    //extract the regex variables from the result, so we can continue processing
    //anywhere where you see () in the regex statement, will be a variable in here
    //the first element, [0], will be the whole result though
    GroupCollection formTagMatchValues = formMatch.Groups;

    //assign the action page value we extracted from the current form element to our data structure
    returnHtmlFormData[activeListElement].ActionPage = formTagMatchValues[1].ToString();

    //attempt to extract all of the names/values for the input tags
    MatchCollection inputTagMatches = inputTagExtractor.Matches(formTagMatchValues[0].ToString());

    //loop through the results (multiple input tags should be returned)
    foreach (Match inputMatch in inputTagMatches)
    {
        GroupCollection inputMatchValues = inputMatch.Groups;

        //save the input field data to our data structure
        returnHtmlFormData[activeListElement].addInputField(inputMatchValues[1].ToString(), inputMatchValues[2].ToString());
    }
}

As you can see above, I use my List collection returnHtmlFormData to hold a list of classes… of my special form storage class. I’ll let my code comments above speak for themselves, but basically you start from a MatchCollection, from there you loop through as single items of class Match, each Match can then be processed further by reading the GroupCollection for the actual data we wanted extracted. It’s quite and ingenious construct of classes, but it took be a while to figure out…

Amazon.com Book Link:
Regular Expression Pocket Reference: Regular Expressions for Perl, Ruby, PHP, Python, C, Java and .NET

As I’m programming this database driven website, I’ve come into a few irritating little issues. Today I’ll talk about a few methods to access page content (images) from the back-end.

I’ve created a way to create and edit page content with a browser based WYSIWYG editor. The problem is after the first time the data is submitted to the server, all images are set with a path that now only works from the root directory of the website. So when a user tries to edit some page content with images in the WYSIWYG editor they see broken images (aka. “The dreaded Red X”).

I thought of a few ways to fix the problem. I’ll also mention which method I actually used in the end.

1. Have the PHP script handle the path conversions. This would mean two functions or so with a few replacements using regular expressions. So when the fetched data is sent to the user all of the html image tags are modified. When or if the user sends the data back they are remodified (excluding any new images the user is submitting). This is probably the safest bet.

2. Create a synaptic link if the server is on Linux/Unix. For example if the site root is www/, the site editor is in www/editor, and the content is in www/images. You would create the synaptic link in the www/editor directory linking to www/images directory. Probably the easiest solution by far, but I want my site to work on both Windows and Linux/Unix servers if possible. I’m developing the site on Windows, so I did not try this, but I’m pretty sure it would work. I also know that windows has a way to create similar links, but it seems like a pain to use so I didn’t bother.

3. Use JavaScript to handle the temporary conversion. This is the route I picked. I was just looking for something quick that worked and this was it. Well it wasn’t exactly quick because I spent a few minutes researching what function I needed to use and exactly how it works. The tutorials I saw were lacking…

Here is an example of the code that will do the initial edit, so the user can see the images in the WYSIWYG editor:

function fixImagePaths(textAreaId)
{
  var tempHtmlData = document.getElementById(textAreaId).value;
  tempHtmlData = tempHtmlData.replace(/(<img\s.*src=")(images\/[^"]*"\s.*>)/gi, '$1/../$2');
  document.getElementById(textAreaId).value = tempHtmlData;
}

The KEY problem that took me a few minutes to figure out was that the first parameter (the regular expression) in the replace function can’t have any type of quotes around it. If you’ve never heard of regular expressions, I highly suggest that you read up on them. They are extremely useful in a multitude of applications. Anyways, what that function does is take data from a wysiwyg html textarea and search through the whole thing for img tags. When it finds one that has a src directory that starts with “images/” it replaces it with “/../images”, this gets the browser to jump back a directory to find the right path to the image folder.

I have this function execute on the body onload event. I’ll also have a second similar function execute on the form onsubmit event. This solution seemed a bit easer then the php one. Well that’s it for now!