How can I strip down JavaScript code while building HTML?

Question

I am trying to parse some HTML to find images within it.

For example, I created a dynamic div and parsed the tags like this:

var tmpDiv = document.createElement("DIV");
tmpDiv.innerHTML = html;

The HTML should be script-less however there are exceptions, one code segment had the following code under an image tag:

<img src=\"path" onload=\"NcodeImageResizer.createOn(this);\" />

By creating a temp div the "onload" function invoked itself and it created a JavaScript error.

Is there anyway to tell the browser to ignore JavaScript code while building the HTML element?

Edit:
I forgot to mention that later on I'd like to display this HTML inside a div in my document so I'm looking for a way to ignore script and not use string manipulations.

Thanks!

if the onload is still the same, you can use tmpDiv.innerHtml = html.replace('onload="NcodeImageResizer.createOn(this);',"") — Marek Sebera
– Marek Sebera, Commented Jul 17, 2011 at 17:09
That will solve this specific case but I'm looking for a generic solution that will cover every other case. — Omer
– Omer, Commented Jul 17, 2011 at 17:11
All other cases of scripts that are implicitly called from the HTML(not the script that's inside the java script tags) — Omer
– Omer, Commented Jul 17, 2011 at 17:28

Jamie Dixon · Accepted Answer · 2011-07-17 17:49:17Z

3

One way of doing this is to loop through the children of the div and remove the event handlers you wish.

Consider the following:

We have a variable containing some HTML which in turn has an onload event handler attached inline:

var html = "<img src=\"http://www.puppiesden.com/pics/1/doberman-puppy5.jpg\" 
alt=\"\" onload=\"alert('hello')\" />"

One we create a container to put this HTML into, we can loop through the children and remove the relevant event handlers:

var newDiv = document.createElement("div");
$(newDiv).html(html);
$(newDiv).children().each(function(){this.onload = null});

Here's a working example: http://jsfiddle.net/XWrP3/

UPDATE

The OP is asking about removing other events at the same time. As far as I know there's no way to remove all events in an automatic way however you can simply set each one to null as required:

$(newDiv).children().each(function(){
    this.onload = null;
    this.onchange = null;
    this.onclick = null;
});

edited Jul 17, 2011 at 17:49

answered Jul 17, 2011 at 17:39

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Omer Over a year ago

Thanks, as I wrote in my latest comment to ilia, I'm looking for a way to remove all the events because my final goal is to show this HTML and scripts could trigger in various events.

Jamie Dixon Over a year ago

You can remove as many events are you like this way. There's no universal way to remove all events. You'll need to just set each event that you're concerned about to null.

Omer Over a year ago

oh, too bad, Well I'll have to write them all manually i guess. Thanks again.

Ilia Choly · Accepted Answer · 2011-07-17 17:34:35Z

0

You can do it really easily with jquery like this:

EDIT:

html

<div id="content" style="display:none">
    <!-- dynamic -->
</div>

js

$("#content").append(
    $(html_string).find('img').each(function(){
        $(this).removeAttr("onload");
        console.log($(this).attr("src"));
    })
);

edited Jul 17, 2011 at 17:34

answered Jul 17, 2011 at 17:07

Ilia Choly

18.6k14 gold badges95 silver badges166 bronze badges

5 Comments

Omer Over a year ago

Thanks but it didn't work for me it does the same as creating a div and i forgot to mention that i'd like to display this HTML later so I'm looking for a different solution. (And u got up-vote from me)

Ilia Choly Over a year ago

Updated. im pretty sure jquery strips <script> tags when parsed

Omer Over a year ago

Probably, but here's the problem, in my code there aren't any script tags at all.

Omer Over a year ago

Thanks for your help buddy and this will probably do the trick, However when I'll show the HTML there will be probably tons of other events that could trigger scripts is there a way to remove all the events from an object?

Ilia Choly Over a year ago

$(html_string).children().die().unbind().removeAttr("onclick").removeAttr("onload") etc...

Collectives™ on Stack Overflow

How can I strip down JavaScript code while building HTML?

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related