Replace Function not working in IE8

[simonstaton]

Hi,

I am having a strange problem, I can get my code to replace html content fine in every browser apart from IE8 but I cannot figure out why. my code is:

function enquires() {
    var a = document.getElementById("div1").innerHTML+(" ");
var b = a.replace(/<img src="remove.png">/g, ' ');
var c = b.replace(/style="float: left; width: 140px;"/g, ' ');

 var screenshot = document.getElementById("screenshot3"); 
 screenshot.value=g_client.toDataURL(); 
 

    document.getElementById('mailBody').value = c;

    document.getElementById('costing').value = document.getElementById("cost").innerHTML;

}

[RodionGork]

You pass regular expression object as a first parameter to replace functions, however you do not escape service characters with backslashes. I think that some browsers fail to understand these malformed regexps.

You have two options:
- try to guess which characters need to be escaped (it is not obvious and I could not hint easily - some punctuation ones);
- pass first parameter as a simple string in double or single quotes - you may be need to escape only quotes inside it.

Are you pretty sure (by alerting "c" variable for example) that it is exactly "replace" function which fails in IE8, by the way? Not something other in your code? You know I did not tried it...

[simonstaton]

Hi Rodion,

Thanks for the reply, so it is the characters that are causing the problems? I am guessing its things like <, =, ", :, ;?

I am not entirely sure what you mean with your solution however?

Thanks for the help,
Simon

[RodionGork]

I mean you need to write either something like:

b.replace(/style\=\"float\: left\; width\: 140px\;\"/g, ' ');
// I do not think all should be escaped... semicolons need not almost certainly...

or

b.replace('style="float: left; width: 140px;"', ' ');

But this would work only for first found fragment.

[mrhoo]

different browsers return different results for innerHTML-
tags and attributes may be returned upper case, quotes may not be included, spaces may be truncated.


You either need a much more robust pattern, or replace the properties from the elements.

[simonstaton]

Okay I have tryed using standard text for example I have this inside div1:
<div style="float: right;">

I have then used:
var c = b.replace(/float"/g, ' ');

However this still isnt removing the float from the div element

[RodionGork]

You have a quote immediately after "float" - this do not match to text. And as the colleague supposed, try at least add "i" option to your regexp.

[simonstaton]

Sorry that is a typo I made on here and isnt in the original script. What do you mean by adding an i? My javascript is very minimal so you might have to bare with my noobiness

[RodionGork]

About "i" I meant something like:

b.replace(/float/gi, ' ');

But let us try to find out your problem. Pitifully I have no IE at hand.

Try the following:

var b = '<div style="float: right;">';
var c = b.replace(/float/g, ' ');
alert(c);

It should work. If it is, then try to alert what you receive from innerHTML at the beginning and post here. We shall try to find out the problem.

[simonstaton]

Okay that works, now alerting the html gives the following:

---------------------------
Message from webpage
---------------------------
<DIV style="DISPLAY: none; VISIBILITY: hidden">no items added

<DIV></DIV></DIV>

<DIV>

<DIV style="WIDTH: 140px; FLOAT: left">Base 0.00</DIV><SPAN style="COLOR: orange; CURSOR: pointer" onclick="deleting(this,'Base-0_00');this.parentNode.removeChild(this.parentNode.firstChild);this.parentNode.removeChild(this.pare ntNode.firstChild);this.parentNode.removeChild(this.parentNode.firstChild);costupdate();">

<DIV style="FLOAT: right"><IMG src="http://www.actionclimbingframes.com/Action-3D/remove.png"></DIV></SPAN></DIV>
---------------------------
OK
---------------------------

[simonstaton]

it is this part I want to remove completly:
<DIV style="FLOAT: right"><IMG src="http://www.actionclimbingframes.com/Action-3D/remove.png"></DIV>

and also this part:
style="WIDTH: 140px; FLOAT: left"

but it must remove all mentions of it not only one as that innerhtml is duplicated for every component I load into my application

[RodionGork]

You see, FLOAT is capitalisized, so "i" flag is necessary ("float" do not match "FLOAT" without it).

And now - do you mean you want to replace such fragments with different contents (links etc.) inside?

Then it looks you are trying to perform something bit tricky.

But what for do you need this replacement? If you want to remove those elements from the web page you are viewing, you'd better remove them from DOM, not from innerHTML... However you would need to explain criteria by which you select which elements should be removed. I suppose jQuery allows finding such elements easy enough.

$("*[style|=float]").remove(); // for example

[simonstaton]

I see, and I am just trying to remove not replace. the data is being passed to another file so I need the div elements and image removing from the code. Will using the .remove() work?

[simonstaton]

I will try explaining what I am doing to make things a bit clearer.

When people drag an item into my application it adds it to a "checkout box" (div1)

When they submit a form on the page the function enquires is then ran. this grabs all the info inside div1 and puts it inside a form field. this form field is then sent in the form to a database when the info is displayed elsewhere.

when displaying the info elsewhere I do not want the remove icon and the floating divs so I am trying to have them removed when the script enquires is ran.

[simonstaton]

If anyone else can give any advice it would be much appreciated as it seems that rodion has gone offline