JavaScript replace in IE

Question

I have page where it's possible to create number of identical rows containing some search criteria fields. I did it creating template div which is populated when user press addButton. In my js function I'm replacing then id and name with correct values and adding right order number, like 1,2,3 etc. The function works fine under FireFox, Chrome and Safari. But it fails under IE without any warning.

    var $rowtp = $('div#partnerFactory-template')
            .html()
            .replace(/id="__prefix__/g, "id=\"truckSearcherFilter_partnerFactoryRow")
            .replace(/name="__prefix__/g, "name=\"truckSearcherFilter.partnerFactoryRow");

var $nrow = $('div#partnerFactory-list').append($rowtp)

This is correct Firefox result after replaicing

<input id="truckSearcherFilter_partnerFactoryRow_0__partnerName" class="ui-corner-all ui-widget-content ui-autocomplete-input" type="text" value="" name="truckSearcherFilter.partnerFactoryRow[0].partnerName" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

and this is what I can see in IE

<INPUT id=__prefix___0__partnerName class="ui-corner-all ui-widget-content" type=text name=__prefix__[0].partnerName jQuery17206032578406930051="64">

Anybody can see what I'm doing wrong ?

Regards Jan

score 0 · Answer 1 · edited May 23 '17 at 12:21

Relying on what innerHTML (or in this case, .html()) spits out is a bad idea. You can see from the output that internally IE doesn't bother with quotes around one-word attributes (which is probably a sign that you didn't bother adding a DOCTYPE, since this is Quirks Mode behaviour).

I suffered a similar problem at the hands of Firefox when I tried to parse a parameter out of an inline onClick attribute. Other people have issues trying to parse the getComputedStyle().color and expecting #RRGGBB when they actually get rgb(R,G,B).

The solution is as follows:

var clone = document.getElementById('partnerFactory-template').cloneNode(true),
    inputs = clone.getElementsByTagName('input'), l = inputs.length, i,
    target = document.getElementById('partnerFactory-list');
for(i=0; i<l; i++) {
    inputs[i].name = inputs[i].name.replace("__prefix__","truckSearcherFilter_partnerFactoryRow");
    inputs[i].id = inputs[i].id.replace("__prefix__","truckSearcherFilter_partnerFactoryRow");
}
while(clone.firstChild) target.appendChild(clone.firstChild);

Note the absence of jQuery and therefore vastly increased performance. You're welcome ;)

JavaScript replace in IE

1 Answers1