construct a DOM tree from a string without loading resources (specifically images)

Question

So I am grabbing RSS feeds via AJAX. After processing them, I have a html string that I want to manipulate using various jQuery functionality. In order to do this, I need a

Answer 1

The obvious answer is to parse the string and remove the src attributes from img tags (and similar for other external resources you don't want to load). But you'll have already thought of that and I'm sure you're looking for something less troublesome. I'm also assuming you've already tried removing the src attribute after having jquery parse the string but before appending it to the document, and found that the images are still being requested.

I'm not coming up with anything else, but you may not need to do full parsing; this replacement should do it in Firefox with some caveats:

thestring = thestring.replace("<img ", "<img src='' ");

The caveats:

• This appears to work in the current Firefox. That doesn't meant that subsequent versions won't choose to handle duplicated src attributes differently.
• This assumes the literal string "general purpose assumption, that string could appear in an attribute value on a sufficiently...interesting...page, especially in an inline onclick handler like this: <a href='#' onclick='$("frog").html("<img src=\"spinner.gif\">")'> (Although in that example, the false positive replacement is harmless.)

This is obviously a hack, but in a limited environment with reasonably well-known data...

Answer 2

The answer is this:

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(htmlString, "text/html");
var jdoc = $(htmlDoc);
console.log(jdoc.find('img'));

If you pay attention to your web requests you'll notice that none are made even though the html string is parsed and wrapped by jquery.

Answer 3

You can use the DOM parser to manipulate the nodes. Just replace the src attributes, store their original values and add them back later on.

Sample:

    (function () {
        var s = "<img src='http://www.google.com/logos/olympics10-skijump-hp.png' /><img src='http://www.google.com/logos/olympics10-skijump-hp.png' />";
        var parser = new DOMParser();
        var dom = parser.parseFromString("<div id='mydiv' >" + s + "</div>", "text/xml");
        var imgs = dom.getElementsByTagName("img");
        var stored = [];
        for (var i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            stored.push(img.getAttribute("src"));
            img.setAttribute("myindex", i);
            img.setAttribute("src", null);
        }
        $(document.body).append(new XMLSerializer().serializeToString(dom));
        alert("Images appended");
        window.setTimeout(function () {
            alert("loading images");
            $("#mydiv img").each(function () {
                this.src = stored[$(this).attr("myindex")];
            })
            alert("images loaded");
        }, 2000);
    })();