Regex for Wiki Page regions

By on September 27, 2011,

In an earlier post, I briefly touched on the value of creating your own InsertWebPartIntoWikiPage method. Part 1 – solved.  Now comes Part 2 – where am I injecting my web part?

That’s a valid question that is easily answered whenever you’re using the SharePoint wiki page editing tools within the browser.  The tools allow users to basically pick a spot in the rendered text, click on Add Web Part, and you are done.  The tools know how to safely inject your web part without forming bad html under the hood.

From a programmatic sense, this is much harder because we don’t get the “smarts” of knowing where to insert the web part markup.  Most users that try to use InsertWebPartIntoWikiPage invariably fail the first few times because they forget to account for the fact that they are injecting web part markup into an html blob and therefore need to properly account for well-formedness (is that a word?).

The net result is that folks will create code that looks like…

InsertWebPartIntoWikiPage (file, webpart, randomValueKeepFingersCrossedNothingBreaks)

The validity of the resulting HTML becomes something like rolling the dice at the casino.  Most folks can start with an empty page and count the number of characters to the first legitimate location where web part markup can be injected.  However, once the page is created and populated, all bets are off and IWPIWP becomes more of a hindrance than an aid but it doesn’t have to be that way.

Wouldn’t it be nice to be able to readily determine where the valid injection points are located? Sure! The answer comes in the form of good old fashioned regular expressions.

If you’re like me, you’ve got a nice little regex library for most any html operation (tag stripping, tag collection, validation, etc).  Well, here’s one more that you can add to the list… a regex to safely identify the your Wiki page regions!

imageThis little regex allows you to easily determine how many regions are in your Wiki page and, more importantly, where they begin and end.  The regex groups the valid editable regions with the name “InnerHtml”.  They represent the blue-bordered regions whenever you are editing a wiki page in the browser (as shown below).

image

In it’s simplest form, you can now inject your web parts in the right places without destroying your existing HTML.  For example, in the following clip, we add a web part at the start of the second region in the page.

image

Done! Page is updated with my web part in the right place and it all just works.

The really nice thing is that since we’re only identifying the HTML within the region, we can easily use the regex to update the text as needed in the region of my choice. 

Here’s another example where we identify a region and then replace it with new text.

image

What other tricks can you come up with?  How about identifying the web parts that exist in the page?  How about placing the new web parts in mid-stream w/o breaking the existing HTML structure?  All possible with regex, especially now that we’ve clearly identified the InnerHtml of your regions! 

You got to love the power of regular expressions because with a little ingenuity you can solve each one of those problems. 

-Maurice

Tags , ,