Issue with RegExp and IE

Question

I'm trying to replace some text (class name) using this function. It works on Chrome but not on IE, any ideas why? this is the actual website website link.

The horizontal menu where it says "housing" should turn grey:

<li class="mainlevel_active-fade" id="menuitem_1-fade">

should become

<li class="mainlevel-fade" id="menuitem_1-fade">

JavaScript:

var divText = "";
var toReplace = '<li class="mainlevel_active-fade" id="menuitem_1-fade">';
var replacement = '<li class="mainlevel-fade" id="menuitem_1-fade">';

function findMyText(toReplace, replacement) {

     if (divText.length == 0) {
          divText = document.getElementById("header-left-b").innerHTML;
     }
     var re = new RegExp(toReplace, "ig");     
     var replaced = "";
     if (replacement.length > 0) {
          replaced = divText.replace(re, replacement);
     }
     else {
          var Text = "<div>" + toReplace + "</div>";
          replaced = divText.replace(re, Text);
     }
     document.getElementById("header-left-b").innerHTML = replaced;
}

findMyText(toReplace, replacement);

i ended up finding a simple way of displaying different classes in different modules, so dropped this attempt.thanks for the help

Answer 1

Are you sure you want to use a regexp here? You are doing classic plain string substitution. Plus, you really shouldn't be using innerHTML at all here.

innerHTML probably is the reason why it does not work. I assume that IE will produce a different HTML representation of your header than Chrome does, and your string is then not found. E.g. any browser might serialize the tag correctly (the order of attributes is undefined!) as:

<li id="menuitem_1-fade" class="mainlevel_active-fade">

and boom, your approach no longer works.

Use DOM instead of string manipulation. It's faster and more reliable.

Answer 2

How about this ..

my_li = document.getElementById('menuitem_1-fade');

my_li.className -= 'mainlevel_active-fade';
my_li.className += 'mainlevel-fade';