We help IT Professionals succeed at work.

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

CAS-IT
CAS-IT asked
on
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

Comment
Watch Question

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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

Author

Commented:
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

Author

Commented:
IE seems to be caching something ...

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

/sigh
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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" />

Author

Commented:
I'll give that a shot on Monday, thanks :)

Author

Commented:
No luck.  Attaching current file.

 cleanHTML3-EE.html

Error occurs when removing spans, still IE only.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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/

Author

Commented:
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

Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
but if you use the code i've supplied from jsFiddle in your own site, it doesn't work?

Explore More ContentExplore courses, solutions, and other research materials related to this topic.