Link to home
Start Free TrialLog in
Avatar of CAS-IT
CAS-IT

asked on

Recursive use of replaceWith behaving differently on IE9.0.8112.16421 than FireFox 7.0.1

We've got a function that we point at a specific element, and it recurses through every child-element, with the intent of removing the tags which do not match our 'approved tag' list.  approved tags are passed in as an argument of type array of string.

In Firefox, it works perfectly.

In IE, it does not fail, but it drops out a lot of the content once it hits the first span.

Specific function is here...
function cleanHTML (theObject,allowedTags){
	for (i=$(theObject).find('*').length-1;i>=0;i--) {
		if ($.inArray($($(theObject).find('*')[i]).get()[0].tagName.toLowerCase(),allowedTags)==-1)
			{ $($(theObject).find('*')[i]).replaceWith($($(theObject).find('*')[i]).html());}
	}
}

Open in new window


Downloadable HTML file you can run to test the function out here...
cleanHTML3-EE.html

HTML Source of our test page is here...
<!DOCTYPE html>
<html>
<head>
	<title>cleanHTML Test v3.0 - Modified 11/3/2011</title>
	<meta charset="utf-8">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function cleanHTML (theObject,allowedTags){
	for (i=$(theObject).find('*').length-1;i>=0;i--) {
		if ($.inArray($($(theObject).find('*')[i]).get()[0].tagName.toLowerCase(),allowedTags)==-1)
			{ $($(theObject).find('*')[i]).replaceWith($($(theObject).find('*')[i]).html());}
	}
}
</script>

<div ID="testcontainer">
	<div style="border:1px solid blue;" class="slJobDuties">
		<div style = "border:1px solid red;" class="ExternalClass936C2C07EC22467780317A758292E763">
			<div style="url:'http://www.udel.edu'">
			<p StYle='font-weight:bold;'>
				Text <a href=".">Outside</a> <i>Spans</i>
				<span class="bob">
				Test Inside one span, outside of others
				<span style="border:1px solid black;">
				<span style="border:1px solid orange;" class="bob">
				<span class="bob" style="border:1px solid orange;">
					College <i><a href=".">Accounting</a></i> <span><b>Style</b></span>
					<br />
					More stuff
				</span>
				</span>
				</span>
			</p>
			</div>
		</div>
	</div>
</div>

<script>
console.log($("#testcontainer").html()); //Handy Debugging line - show me the HTML before I do stuff
cleanHTML($("#testcontainer"),["a","br","p"]);
console.log($("#testcontainer").html()); //Handy Debugging line - show me the HTML AFTER I do stuff
</script>

</body>
</html>

Open in new window

Avatar of Rob
Rob
Flag of Australia image

Can you post your output as it seems to work for me:

output in IE9
LOG: 
    <div style="border: 1px solid blue;" class="slJobDuties">
        <div style="border: 1px solid red;" class="ExternalClass936C2C07EC22467780317A758292E763">
            <div style='url: "http://www.udel.edu";'>
            <p style="font-weight: bold;">
                Text <a href=".">Outside</a> <i>Spans</i>
                <span class="bob">
                Test Inside one span, outside of others
                <span style="border: 1px solid black;">
                <span style="border: 1px solid orange;" class="bob">
                <span style="border: 1px solid orange;" class="bob">
                    College <i><a href=".">Accounting</a></i> <span><b>Style</b></span>
                    <br>
                    More stuff
                </span>
                </span>
                </span>
                </span>
            </p>
            </div>
        </div>
    </div>
 
LOG: 
    
        
            
            <p style="font-weight: bold;">
                Text <a href=".">Outside</a> Spans
                
                Test Inside one span, outside of others
                
                
                
                    College <a href=".">Accounting</a> Style
                    <br>
                    More stuff
                
                
                
                
            </p>

Open in new window

Avatar of CAS-IT
CAS-IT

ASKER

output in IE9

 
LOG: <DIV style="BORDER-BOTTOM: blue 1px solid; BORDER-LEFT: blue 1px solid; BORDER-TOP: blue 1px solid; BORDER-RIGHT: blue 1px solid" class=slJobDuties>
<DIV style="BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid" class=ExternalClass936C2C07EC22467780317A758292E763>
<DIV style="url: 'http://www.udel.edu'">
<P style="FONT-WEIGHT: bold">Text <A href=".">Outside</A> <I>Spans</I> <SPAN class=bob>Test Inside one span, outside of others <SPAN style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"><SPAN style="BORDER-BOTTOM: orange 1px solid; BORDER-LEFT: orange 1px solid; BORDER-TOP: orange 1px solid; BORDER-RIGHT: orange 1px solid" class=bob><SPAN style="BORDER-BOTTOM: orange 1px solid; BORDER-LEFT: orange 1px solid; BORDER-TOP: orange 1px solid; BORDER-RIGHT: orange 1px solid" class=bob>College <I><A href=".">Accounting</A></I> <SPAN><B>Style</B></SPAN> <BR>More stuff </SPAN></SPAN></SPAN></P></DIV></DIV></DIV> 
LOG: <P style="FONT-WEIGHT: bold">Text <A href="file://files-001.art-sci.udel.edu/users-001/cita/home/cantrell/Documents/Code/">Outside</A> Spans </P>

Open in new window

Avatar of CAS-IT

ASKER

IE seems to be caching something ...

Renamed my file without changing any code and it's resolving fine now ...

/sigh
that would make sense given the output i got...

you could try adding these meta tags to make the page expire?

<meta name="Expires" content="Sun, 04 Dec 2011 00:00:00 America/New_York" />
                  <meta http-equiv="last-modified" content="2011-10-04@00:00:00 America/New_York" />
Avatar of CAS-IT

ASKER

I'll give that a shot on Monday, thanks :)
Avatar of CAS-IT

ASKER

No luck.  Attaching current file.

 cleanHTML3-EE.html

Error occurs when removing spans, still IE only.
I'm using the same version as you but mine works and yours doesn't correct?

can you post the output from the console from this page:
http://jsfiddle.net/rjurd/JvWX7/embedded/result/
Avatar of CAS-IT

ASKER

Looks good to me
LOG: 
    <div style="border: 1px solid blue;" class="slJobDuties">
        <div style="border: 1px solid red;" class="ExternalClass936C2C07EC22467780317A758292E763">
            <div style='url: "http://www.udel.edu";'>
            <p style="font-weight: bold;">
                Text <a href=".">Outside</a> <i>Spans</i>
                <span class="bob">
                Test Inside one span, outside of others
                <span style="border: 1px solid black;">
                <span style="border: 1px solid orange;" class="bob">
                <span style="border: 1px solid orange;" class="bob">
                    College <i><a href=".">Accounting</a></i> <span><b>Style</b></span>
                    <br>
                    More stuff
                </span>
                </span>
                </span>
                </span>
            </p>
            </div>
        </div>
    </div>
 
LOG: 
    
        
            
            <p style="font-weight: bold;">
                Text <a href=".">Outside</a> Spans
                
                Test Inside one span, outside of others
                
                
                
                    College <a href=".">Accounting</a> Style
                    <br>
                    More stuff
                
                
                
                
            </p>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial