Question

We are using jQuery 1.5.1 on the site that I’m working on. I recently discovered a problem with my HTML in Internet Explorer 8

The problem is that ‘nodeIndex’ properties are inserted in the DOM, presumably by jQuery (see below for another StackOverflow question that mentions nodeIndex). The properties are not there in the page source — only in the DOM then inspecting it with IE8’s (awesome) developer tool.

The DOM in IE8:

<DIV nodeIndex="4">
  <B nodeIndex="1">bold</B>
  <BR nodeIndex="2">
  <I nodeIndex="3">italics</I>
  <BR nodeIndex="4">
  <U nodeIndex="5">underline</U>
  <BR nodeIndex="6">
</DIV>

The DOM in FF5 (and Chrome 12):

<div>
  <b>bold</b>
  <br>
  <i>italics</i>
  <br>
  <u>underline</u>
  <br>
</div>

The problem is that the DIV is the text of a forum post. If the user wants to quote the forum post, the html of the post is to be converted into BBCode (because older forum posts use BBCode tags for markup), with the formatting markup maintained, and copied to a textarea in which the user writes the text for the new forum post (including the quoted text).

Using JavaScript/jQuery it would be simple to replace html tags with their corresponding BBCode tags, but the addition of the nodeIndex property makes it necessary to add a regular expression replacement of the nodeIndex property, which seems like an ugly hack.

Can anyone tell me why the nodeIndex properties are added in IE8 (and IE7), and is it jQuery that adds them — and more importantly: Can I get rid of them in a better way than using a regular expression replacement?

The site I work on uses a bunch of different JavaScript/jQuery scripts so there might be a conflict or at least some unexpected behavior that is a result of the combination of scripts.

Edit: The properties are not there when JavaScript is disabled in IE.

Other StackOverflow question that mentions nodeIndex:
Is nodeIndex a valid DOM element property in IE?

Answer 1

Can anyone tell me why the nodeIndex properties are added in IE8 (and IE7), and is it jQuery that adds them —

These properties are added by Sizzle (the jQuery selector engine, compare the definition of the Sizzle.selectors object in the jQuery source) , presumably to browsers that do not natively support the :nth-child CSS pseudo class.

and more importantly: Can I get rid of them in a better way than using a regular expression replacement?

The clean way would be to load the HTML snippet into a DOM and remove the attributes from it. You can do it on the server side or on the client side using jQuery itself.

var htmlText = '<DIV nodeIndex="4">Some text.<BR nodeIndex="1"></DIV>';
var $html = $("<div>" + htmlText + "</div>");
$html.find("*[nodeIndex]").removeAttr("nodeIndex");
console.log( $html.html() );
// logs "<div>Some text.<br></div>"