IE evilness with innerHTML

jfriend

I was helping someone customize their breadCrumbTrail and I was trying to replace the first part of the breadcrumb with something different using regular expression matches and replace on the breadCrumbTrail.innerHTML. I got it to work fine on Firefox, but when I tried it on IE, it just wouldn't work.

My regular expression was this:

/^.*?id="albumTitle">/

which was essentially trying to match everything from the start of the breadcrumb up to the first <span class="title" id="albumTitle">. The actual HTML of the page in this area is this:

div id="breadCrumbTrail"><a href="http://jfriend.smugmug.com&quot; class="nav">John Friend</a>
 > <a href="http://jfriend.smugmug.com/Other&quot; class="nav">Other</a> > <span class="title" id="albumTitle">Test Photos

So, it should have had no problem matching, but not in IE.

After more than an hour of debugging in IE, I finally found out that the innerHTML in IE doesn't look anything like the actual page source. It's some sort of reconstituted thing and instead of:

<span class="title" id="albumTitle">

IE has:

<span class=title id=albumTitle>

No quotation marks here in the innerHTML.

So, when I finally saw that that was what was causing it not to match in IE, I could change my reg expression to this:

/^.*?id="?albumTitle"?>/

Which has optional quotation marks in the pattern and it all started working in IE.

So, a word of warning when using reg expression matches in innerHTML in IE. It may not have quotation marks where the original HTML source did.